homework/module2/script.js

/* 1. Напишите функцию, которая возвращает массив, 
очищенный от пустых значений, не меняя исходный*/



function clean (data) {
    	var arr = [];
	
	data.filter(function(data, i, data) {
      			   
      			function isEmpty(obj) {
                   return JSON.stringify(obj) == "{}"; // функция для проверки объекта на "пустоту"
               }
      		
      		if (isEmpty(data[i]) === false && !Array.isArray(data[i]) && data[i] !== "")
           		arr.push(data[i]);
      		else {
	        Array.isArray(data[i]) && data[i].length !== 0 || data[i] == null ? arr.push(data[i]) : false;
           }

      	
    });

  	return arr;
}



var data = [0, '0', 'ddd', null, '', {7: 7}, {}, ['ddd'], [], [1, 2, 3]];;
console.log( clean(data) ); // [0, '0', 'ddd', null, {7: 7}, ['ddd'], [1, 2, 3]]


/* 2. Напишите функцию-аналог splice, не используя никакие методы массива.*/

function splice (data, index, number) {
		
		if ( arguments.length === 3 ) {
		var arr = [];
		for (var j = 0, k = -1; j < number; (index++) && (j++) ) {
				k++;
				arr[k] = data[index];
				data[index] = data[index+number];
			}
			data.length = ( data.length - number );
			return arr;
        }
			
		else if ( arguments.length > 3 ) {
			var a = [];
			for (var l = 0; l < data.length; l++) {
				a[l] = data[l];
			}
			var i = 0; 
			for (var m = 3; m < arguments.length; (m++) && (i++)) {
					data[index+i] = arguments[m];
				}
			for (var h = ( index + number ); h < a.length; (h++) && (i++)) {
					data[index+i] = a[h];
            	} 
            }
		return arr;
}
	
	var arr = [1, 2, 4, 3];
	console.log(splice(arr, 2, 1)); // [4]
	console.log(arr); // [1, 2, 3]
	splice(arr, 2, 0, 100, 200, 300); // []
	console.log(arr); // [1, 2, 100, 200, 300, 3]


/* 3. Напишите функцию, которая возвращает сумму всех чисел, 
переданных в качестве аргументов, число которых не ограничено. 
Функция работает только с числами (включая строковые). 
Если какой-то из параметров - массив, то к сумме добавляется также сумма значений 
этого массива (если какое-либо из значений этого массива также является массивом, 
то к результату добавляется также и сумма его значений, и так далее).*/

function getSum() {
	var sum = 0;
	for (var i = 0; i < arguments.length; i++) {
		if (typeof arguments[i] === 'object' ) {
			sum += getSum.apply(null, arguments[i]);
		}
		else if (!isNaN(arguments[i])) sum += +arguments[i];
	}
	return sum;
}

var sum = getSum(1, '1', 'one', {4: 3}, [2, '2', 'two']);
console.log( sum ); // 6

/* 4. Напишите функцию, которая рисует в указанном HTML-контейнере 
диаграмму из данных, представляющих из себя массив объектов: 
каждый объект имеет свойства color и value, означающих соответственно 
цвет столбца и его высоту.*/


function buildDiagram (data, diagram) {
	var section = '<section class='+diagram+'>';
	$('body').append(section);
	$('section.'+diagram).css ({
  'display': 'flex',
  'align-items': 'flex-start',
  'flex-wrap': 'wrap-reverse',
  'overflow': 'auto',
  'text-align': 'center',
  'width': '60%',
  'height': '300px',
  'margin': '20px auto',
  'padding': '20px',
  'border': '1px solid black',
  'align-content': 'center', 
  'justify-content': 'center',
  'background': 'rgba(74, 67, 67, 0.14)'
     });
   
  
   data.forEach (function(box, i, data) {
		
		$('section.'+diagram).append('<div class='+i+'> <span>'+data[i].value+'% </span> </div>');
		$('section.'+diagram +' div.'+i).css ({
			'height': data[i].value+'%',
  			'width': '80px',
  			'background': data[i].color
		});
		$('section span').css ({
			'bottom': '18px',
    			'position': 'relative',
			'font-family': 'arial'
		});

		});


 }


var data1 = [ {color: '#DE9797', value: 60},{color: 'yellow', value: 50}];
buildDiagram(data1, 'diagram1');

var data2 = [ {color: '#97DEDA', value: 20}, {color: 'red', value: 100}, 
{color: 'orange', value: 10}, {color: 'yellow', value: 50},
{color: 'blue', value: 52.5}, {color: 'purple', value: 35}];

buildDiagram(data2, 'diagram2');



/*5. Напишите функцию, которая изображает 
в теге HTML картинку по данным, представляющим из 
себя двумерный массив закрашенных точек.*/



function draw(points) {
		var table = $('<table>').appendTo('body');
		
		var maxLength = 0; 
		points.forEach(function(item) {
		var point = Math.max.apply(null, item);   // находим максимальную длину строки в 2-мерном массиве 
		if (point > maxLength) maxLength = point;
	});

		for (var j = 0; j < points.length; j++) {
			var tr = $('<tr>').appendTo(table);
		}
		for (var i = 0; i < maxLength; i++) { 
			$('<td>').appendTo('tr');
			}

		$(table).css({
			'border-collapse': 'collapse',
			'text-align': 'center',
			'position': 'relative',
 			'top': '20px',
			'margin': '0px auto',
			'align-content': 'center',
			'justify-content': 'center'
		})
		$("td").css({
			'width': '30px',
			'height': '30px',
			'border': '1px solid black'
		})

		for (var k = 0; k < points.length; k++) {
			for (var l = 0; l < points[k].length; l++) {
				$('tr:eq(' + k +') td:eq(' + (points[k][l]-1) + ')').css({
					'background': 'black'})
			}
		}
	}
	
	var points = [
	[3, 4, 5],
	[2, 3, 9, 16],
	[1, 2, 9, 10, 15, 16],
	[1, 2, 5, 6, 9, 10, 11, 12, 13, 14, 15, 16],
	[1, 2, 4, 5, 6, 7, 9, 12, 13, 16],
	[1, 2, 3, 4, 5, 6, 7, 8, 9, 12, 13, 16],
	[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 16],
	[2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15],
	[2, 3, 4, 7, 8, 12, 13],
	[2, 3, 7, 8],
	[2, 3, 4, 5, 7, 8, 9],
	[2, 3, 4, 5, 7, 8, 9],
	
	];
	
	draw (points);