Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                	// тема 1
  //	написать функцию, которая рандомно выводила бы 10 значений в массив в диапазоне 20
	
  let randomArr = [];
  for (let i = 0; i < 10; i++) {
    randomArr.push(Math.round(Math.random() * 20));
  }
  console.log(randomArr);
  
  // усложняем тему 1
	
   function randomFun(count) {
		let randomArr = [];
		
		for (let i = 0; i < count; i++) {
			randomArr.push(Math.round(Math.random() * 20));
		}
		
		return randomArr;
	}

	const count = 10;
	console.log(randomFun(count));
	
//добавим небольшое развитие в виде кнопки
	// теперь создадим кнопку по нажатию которой будет выдан результат
	
	function randomFun(count) {
		let randomArr = [];
		
		for (let i = 0; i < count; i++) {
			randomArr.push(Math.round(Math.random() * 20));
		}
		
		return randomArr;
	}

	function drowRandomArr() {
		document.getElementById('demo').innerHTML = randomFun(10);
	};
	document.getElementById('btn').addEventListener('click', drowRandomArr);
	
  // тема вторая

  /*теперь напишем еще одну задачу и проработаем ее таким же образом
	задача будет звучать так. Найти среднее значение из суммы элементов мас­си­ва*/

  const arr = [5, 17, 2, 2, 15, 7, 11,];
  let arrSum = arr.reduce(function (sum, elem) {
    return sum + elem;
  }, 0);
  let middleElem = Math.round(arrSum / arr.length);
  console.log(middleElem);
  
  // усложняем вторую тему
	
  //  теперь проработаем задачу через функцию и тем самым еще раз закрепим на практике
  function findMiddleElem(arr) {
    let arrSum = arr.reduce((sum, elem) => (sum + elem), 0);
    return Math.round(arrSum / arr.length)
  }

  const arr = [5, 17, 2, 2, 15, 7, 11,];
  console.log(findMiddleElem(arr));

  // добавляем легкий штрих для элегантности и легкости полета нашей мелодии в виде кода
  //  добавим addEventListener() клик по кнопке

  function findMiddleElem(arr) {
    let arrSum = arr.reduce((sum, elem) => (sum + elem), 0);
    return Math.round(arrSum / arr.length)
  }

  function btnElem() {
    const arr = [5, 17, 2, 2, 15, 7, 11,];
    document.getElementById('demo').innerHTML = findMiddleElem(arr);
  }

  document.getElementById('btn').addEventListener('click', btnElem);
  
  // тема 3
	
	// объединение двух тем в одну задачу
  /*теперь мы объединим две задачи в одну для отработки объединения функций*/
  function randomFun(count) {
    let randomArr = [];
    
    for (let i = 0; i < count; i++) {
      randomArr.push(Math.round(Math.random() * 20));
    }
    
    return randomArr;
  }

  function findMiddleElem(randomArr) {
    let newArr = randomArr.reduce(function (p1, p2) {
      
      return p1 + p2;
    });
    
    return Math.round(newArr / randomArr.length);
  }

  let count = 10;
  const randomF = randomFun(count);
  //  console.log(randomF);
  let findMiddleE = findMiddleElem(randomF);
  console.log(findMiddleE);
  
  // добавляем четвертую тему
  /*теперь усложним еще одним действием нашу задачу, но первоначально проработаем ее всеми вышеизложенными способами*/
  
	const arr  = [5,17,2,2,15,7,11,];
	const result = [];
	const num = 5;
	for (let i = 0; i < arr.length; i++) {
		if(arr[i] > num)  {
			result.push(num);
		} else {
			result.push(arr[i]);
		}
	}
	console.log(result);
	
	// усложняем тему
  //	теперь надо написать функцию, которая будет делать замену всех элементов в массиве,  которые больше данного значения на свое значение
	
  const arr = [4, 13, 6, 20, 16, 15, 2, 15, 12, 8];
  const num = 5;
  let replaceElem = [];
  const len = arr.length;

  for (let i = 0; i < arr.length; i++) {
    if(arr[i] > num) {
      replaceElem.push(num);
    } else {
      replaceElem.push(arr[i]);
    }
  }
  console.log(replaceElem);
	
	// пишем вариации с различными видоизменениями 
	
  function func () {
    let arr = createRandArr(8, 1, 15);
    let averageNum = getAverageFromArr(arr);
    return changeNumsHigherDefinite(arr, averageNum);
  }

  document.write(func());
  function createRandArr(length, from, to){
    let arr = [];
    for (let i = 0; i < length; i++) {
      let rand = Math.floor(Math.random() * (to - from + 1)) + from;
      arr.push(rand);
    }
    return arr;
  }

  function getAverageFromArr(arr){
    let result = arr.reduce( (sum, elem) => sum += elem, 0 );
    return Math.round(result / arr.length);
  }

  function changeNumsHigherDefinite(arr, num){
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > num) arr[i] = num;
    }
    return arr;
  }
  
  // вариация
  const replaceMeddleElem = (function () {
	 const _randomElem = [];
	 let _middleNumber = 0;

	 return {
		 generateRandomArr: function (lengthArr) {
			 for (let i = 0; i < lengthArr; i++) {
				 _randomElem.push(Math.round(Math.random() * 20));
			 }

			 return _randomElem;
		 },
		 middleMath: function () {
			 const counter = _randomElem.reduce((selfElem, elem) => {
				 return selfElem + +elem;
			 }, 0);

			 _middleNumber = Math.round(counter / _randomElem.length);

			 return _middleNumber;
		 },
		 replaceNumberArr: function () {
			 return _randomElem.map(elem => (elem > _middleNumber) ? _middleNumber : elem);
		 }
	 }
 })();

 const count = 10;
 const randomArr = replaceMeddleElem.generateRandomArr(count);
 const meddleElem = replaceMeddleElem.middleMath();

 console.log(randomArr);
 console.log(meddleElem);

 console.log(replaceMeddleElem.replaceNumberArr());
 
 // вариация
 /*сделаем независимыми наши функции  middleMath()*/
 
	const replaceMeddleElem = (function () {
		const _randomElem = [];
		let _middleNumber = 0;
	
		return {
			generateRandomArr: function (lengthArr) {
				for (let i = 0; i < lengthArr; i++) {
					_randomElem.push(Math.round(Math.random() * 20));
				}
	
				return _randomElem;
			},
			middleMath: function () {
				const counter = _randomElem.reduce((selfElem, elem) => {
					return selfElem + +elem;
				}, 0);
	
				_middleNumber = Math.round(counter / _randomElem.length);
	
				return _middleNumber;
			},
			replaceNumberArr: function (lengthArr = 10) {
				this.generateRandomArr(lengthArr);
				this.middleMath();
	
				return _randomElem.map(elem => (elem > _middleNumber) ? _middleNumber : elem);
			}
		}
	})();
	
	const count = 10;
	console.log(replaceMeddleElem.replaceNumberArr(5));
	
  // добавим объект
  const toolsForArr = (function () {
    let _randomArr = [];
    let _middleNumber = 0;

    function _clearData() {
      _randomArr = [];
      _middleNumber = 0;
    }

    return {
      generateRandomArr: function (lengthArr) {
        for (let i = 0; i < lengthArr; i++) {
          _randomArr.push(Math.round(Math.random() * 20));
        }

        return _randomArr;
      },
      middleMath: function (arr) {
        const counter = arr.reduce((selfElem, elem) => {
          return selfElem + +elem;
        }, 0);

        _middleNumber = Math.round(counter / arr.length);

        return _middleNumber;
      },
      replaceNumberArr: function (args) {
        _clearData();

        if (typeof args !== 'object') {
          args = args || 10; //defaults 10

          this.generateRandomArr(args);
          this.middleMath(_randomArr);
        } else if (typeof args === 'object' && args.arr && args.middle) {
          _randomArr = args.arr;
          _middleNumber = args.middle;
        }

        return _randomArr.map(elem => (elem > _middleNumber) ? _middleNumber : elem);
      }
    }
  })();

  console.log(toolsForArr.replaceNumberArr(
    { arr: [ 1, 2, 3, 4, 5 ], middle: 3 }
  ));

  console.log(toolsForArr.replaceNumberArr(5));
  console.log(toolsForArr.replaceNumberArr());
  
  // еще вариация
  const toolsForArr = (function () {
    return {
      generateRandomArr: function (lengthArr) {
        const randomArr = [];

        for (let i = 0; i < lengthArr; i++) {
          randomArr.push(Math.round(Math.random() * 20));
        }

        return randomArr;
      },
      middleMath: function (arr) {
        const counter = arr.reduce((selfElem, elem) => {
          return selfElem + +elem;
        }, 0);

        const middleNumber = Math.round(counter / arr.length);

        return middleNumber;
      },
      replaceNumberArr: function (args) {
        let randomArr = [];
        let middleNumber = 0;

        if (typeof args === 'object' && args.arr && args.middle) {
          randomArr = args.arr;
          middleNumber = args.middle;
        } else if (typeof args === 'number' || args === undefined) {
          args = args || 10; //defaults 10

          randomArr = this.generateRandomArr(args);
          middleNumber = this.middleMath(randomArr);
        }

        return randomArr.map(elem => (elem > middleNumber) ? middleNumber : elem);
      }
    }
  })();

  console.log(toolsForArr.replaceNumberArr(
    { arr: [ 1, 2, 3, 4, 5 ], middle: 3 }
  ));

  console.log(toolsForArr.replaceNumberArr(5));
  console.log(toolsForArr.replaceNumberArr());
  console.log(toolsForArr.replaceNumberArr([451515]));
  console.log(toolsForArr.replaceNumberArr('sdsdsd'));
  
  // закончим на кульминации и ваша задача прийти с разрешением в тонику

              
            
!
999px

Console