hw-js-04/javascript/homework.js

//3 persons
//Сделать три ассоциативных массива a, b, c, в каждом из которых должны быть поля name и surname.

const a = new Map([
	['name', 'yaho'],
	['surname', 'google'],
]);
const b = new Map([
	['name', 'Liza'],
	['surname', 'Babay'],
]);
const c = new Map([
	['name', 'Coconut'],
	['surname', 'Fish'],
]);

//different fields
//Добавьте некоторые другие поля (например age, fathername, sex (пол)) так,
//что бы набор полей отличался у разных объектов

a.set('age', 16);
b.set('fatherName', 'Bob');
c.set('sex', 'male');

//fields check
//Проверьте наличие необязательных полей у каждого из этих массивов.
//Если поле найдено, выведите его с помощью alert.Проверку делайте по typeof или in в if.

// if (a.has('age')) alert(`${a.get('age')} this is field`);
// if (b.has('fatherName')) alert(`${b.get('fatherName')} this is field`);
// if (b.has('sex')) alert(`${b.get('sex')} this is field`);

//array of persons
//Добавьте несколько ассоциативных массивов с персонами в обычный массив persons,
//например a, b, c.Так же добавьте персону литерально({ ...}).
//Получится обычный массив с элементами - ассоциативными массивами с персонами.

const persons = [a, b, c];

//loop of persons
//Сделайте цикл, который выводит весь массив persons
//в форме объектов console.log(persons[i])
// for (let i = 0; i < persons.length; i++) {
// 	console.log(persons[i]);
// }

//loop of name and surname
//Сделайте цикл, который выводит весь массив persons, но только Имя и Фамилию каждой персоны.

// for (let i = 0; i < persons.length; i++) {
// 	const name = persons[i].get('name');
// 	const surname = persons[i].get('surname');
// 	console.log(name, surname);
// }

//loop of loop of values
//Сделайте цикл, который выводит весь массив persons,
//но только значения всех полей из объектов.Используйте вложенный цикл
// for (let i = 0; i < persons.length; i++) {
// 	for (let person of persons[i]) {
// 		console.log(...person);
// 	}
// }

//fullName
//Сделайте цикл, которых добавляет поле fullName в каждый объект,
//содержащий ФИО.Учтите, что поле fathername не является обязательным.

// for (let i = 0; i < persons.length; i++) {
// 	persons[i].set('fullName', i);
// }

//serialize
//Создайте JSON-строку из persons
// const serialize = JSON.stringify(persons.map((arr) => [...arr]));
// console.log(jsonPersons);
//deserialize
//Создайте ассоциативный массив с одной персоной из JSON-строки. Добавьте её в persons
// const deserialize = JSON.parse(serialize);
// persons.push(new Map(deserialize[0]));
// console.log(persons);

//HTML
//Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы.
//Имя и Фамилия - колонки.Таблицы в HTML Пример кода:
//Модифицируйте код так, что бы он выводил массив persons
// const tableWrapper = document.getElementById('wrapper');
// let stringTable = "<table border='1'>";
// for (let i = 0; i < persons.length; i++) {
// 	stringTable += `<tr><td>${persons[i].get('name')}</td><td>${persons[i].get(
// 		'surname'
// 	)}</td></tr>`;
// }
// stringTable += '</table>';
// tableWrapper.innerHTML += stringTable;

//HTML optional fields
//Сделайте цикл, который выводит весь массив persons, в форме HTML-таблицы.
//Имя и Фамилия, а так же другие поля при наличии.Колонки: поля, строки таблицы - персоны.
// const tableWrapper = document.getElementById('wrapper');
// let stringTable = "<table border='1'>";
// persons[0].set('dddd', 'justForCheckDoesItWorks?');
// for (let i = 0; i < persons.length; i++) {
// 	stringTable += '<tr>';
// 	for (let value of persons[i].values()) {
// 		stringTable += `<td>${value}</td>`;
// 	}
// 	stringTable += '</tr>';
// }
// stringTable += '</table>';

// tableWrapper.innerHTML += stringTable;

//HTML tr color
//Добавьте к предыдущему примеру раскраску через строчку используя другой стиль тэга tr.

// const tableWrapper = document.getElementById('wrapper');
// let stringTable = "<table border='1'>";
// persons[0].set('dddd', 'justForCheckDoesItWorks?');
// for (let i = 0; i < persons.length; i++) {
// 	stringTable += `<tr style="color:green">`;
// 	for (let value of persons[i].values()) {
// 		stringTable += `<td>${value}</td>`;
// 	}
// 	stringTable += '</tr>';
// }
// stringTable += '</table>';

// tableWrapper.innerHTML += stringTable;

//HTML th optional
//Переработайте вывод persons в HTML с поиском всех возможных колонок во всех записях, выводом
//названий колонок в заголовок HTML - таблицы.Для решения этой задачи вначале узнайте
//множество полей(ключей) во всех записях(они не совпадают), выведите HTML - заголовок используя тэги < th >,
//а потом выводите все записи.Ниже выведите все персоны построчно.Следите за корректностью колонок.
//Для этого вам нужно итерировать общий набор колонок, а не каждую персону, колонки из которой могут отличаться от предыдущей.

// const tableWrapper = document.getElementById('wrapper');
// let stringTable = "<table border='1'>";
// persons[0].set('IsWorks?', 'justForCheckDoesItWorks?');
// for (let i = 0; i < persons.length; i++) {
// 	stringTable += `<tr ">`;
// 	for (let [key, value] of persons[i].entries()) {
// 		stringTable += `<th style="color:blue">${key}</th>`;
// 		stringTable += `<td style="color:green">${value}</td>`;
// 	}
// 	stringTable += '</tr>';
// }
// stringTable += '</table>';

// tableWrapper.innerHTML += stringTable;

// Задание на синий пояс.
//Сделать HTML-конструктор из деревянной структуры, которая была на прошлом занятии:
const someTree = {
	tagName: 'div', //html tag
	subTags: [
		//вложенные тэги
		{
			tagName: 'div',
			subTags: [
				{
					tagName: 'div',
					text: 'some text',
					attrs: {
						color: 'green',
					},
				},
				{
					tagName: 'div',
					text: 'some text 2',
					attrs: {
						color: 'blue',
					},
				},
			],
			attrs: {
				'font-size': '48px',
			},
		},
	],
	attrs: {
		border: 1,
		'background-color': '#92cd00',
		width: '500px',
	},
};

//Для начала сделайте конструктор для верхнего уровня (в примере - table).
//Потом с помощью копипасты сделайте то же самое с вложенным уровнем nestedTags(tr).Аналогично для уровня td.
//Конструктор должен поддерживать вложенность до 3его уровня (как в примере).
//В результате работы конструктора из примера выше должен получиться следующий HTML(в строке str):
{
	/* <table border=1>
    <tr>
        <td>some text</td>
        <td>some text 2</td>
    </tr>
</table> */
}
//Переносы строк и отступы в результате не принципиальны, главное - структура HTML Проверьте ваш код на других структурах.

// const tableWrapper = document.getElementById('wrapper');
// let stringTable = '';
// const htmlConstructor = (obj) => {
// 	stringTable += `<${obj.tagName} style="`;
// 	for (const [key, value] of Object.entries(obj.attrs)) {
// 		stringTable += `${key}:${value};`;
// 	}
// 	stringTable += `">`;
// 	for (const secondLevel of obj.subTags) {
// 		stringTable += `<${obj.tagName} style="`;
// 		for (const [key, value] of Object.entries(secondLevel.attrs)) {
// 			stringTable += `${key}:${value};`;
// 		}
// 		stringTable += '">';
// 		for (const thierdLevel of secondLevel.subTags) {
// 			stringTable += `<${obj.tagName} style="`;
// 			for (const [key, value] of Object.entries(thierdLevel.attrs)) {
// 				stringTable += `${key}:${value};`;
// 			}
// 			stringTable += '">';
// 			stringTable += `${thierdLevel.text}`;
// 			stringTable += `</${thierdLevel.tagName}>`;
// 		}
// 		stringTable += `</${secondLevel.tagName}>`;
// 	}
// 	stringTable += `</${obj.tagName}>`;
// };

// htmlConstructor(someTree);

// tableWrapper.innerHTML += stringTable;

//destruct array
//напишите код, который используя деструктуризацию положит:
//четные числа в переменные even1, even2,
//нечетные в odd1, odd2, odd3,буквы в отдельный массив
// const [odd1, even1, odd2, even2, odd3, ...restArr] = [
// 	1,
// 	2,
// 	3,
// 	4,
// 	5,
// 	'a',
// 	'b',
// 	'c',
// ];
// console.log(odd1, even1, odd2, even2, odd3, restArr);

//destruct string
// число в переменную number
// букву a в переменную s1
// букву b в переменную s2
// букву c в переменную s3

// const [number, [s1, s2, s3]] = [1, 'abc'];
// console.log(number, s1, s2, s3);

//destruct 2
//извлеките используя деструктуризацию имена детей в переменные name1 и name2
// const {
// 	children: [{ name: name1 }, { name: name2 }],
// } = {
// 	name: 'Ivan',
// 	surname: 'Petrov',
// 	children: [{ name: 'Maria' }, { name: 'Nikolay' }],
// };
// console.log(name1, name2);

//destruct 3
//извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
// const [first, second, ...restArr] = [1, 2, 3, 4, 5, 6, 7, 10];
// const { length } = restArr;
// console.log(first, second, length);

//Задание на черный пояс
//Сделать предыдущее задание на черный пояс в упрощенном виде: не использовать четырехмерный массив
//для хранения истории, а использовать ассоциативный массив: Например, если пользователь ввел 1212
//за последние четыре хода, то мы ищем то, что было введено последний раз после такой последовательности:

// const predictArray = new Map();
// let hystory = '';

// const internalGame = () => {
// 	const answer = confirm('Choose OK  or Cancel') ? 0 : 1;
// 	console.log(predictArray);
// 	if (hystory.length === 3) {
// 		hystory += answer;
// 		predictArray.set(hystory, answer);
// 		hystory = '';
// 	} else {
// 		hystory += answer;
// 	}
// 	internalGame();
// };

// internalGame();