EasyCode-JavaScriptReact-v1 · viskosa · Jul 20, 2018 · Jul 20, 2018 · Jul 21, 2018 · Jul 21, 2018
diff --git a/js-core/classworks/classwork-16/index.html b/js-core/classworks/classwork-16/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Lesson_16</title>
+</head>
+<body>
+	<h1>Classwork 16</h1>
+
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/js-core/classworks/classwork-16/main.js b/js-core/classworks/classwork-16/main.js
@@ -0,0 +1,243 @@
+const questions = [
+  {
+    questionName: 'вопрос 1',
+    answers: ['answer 1.1', 'answer 1.2', 'answer 1.3'],
+    correctAnswersIndexes: [1]
+  },
+  {
+    questionName: 'вопрос 2',
+    answers: ['answer 2.1', 'answer 2.2', 'answer 2.3'],
+    correctAnswersIndexes: [2]
+  },
+  {
+    questionName: 'вопрос 3',
+    answers: ['answer 3.1', 'answer 3.2', 'answer 3.3'],
+    correctAnswersIndexes: [1, 2]
+  }
+];
+
+const app = {
+  questions,
+  testName: 'Тест по программированию',
+  render() {
+    const main = this.newEl('main');
+    const testName = this.newEl('h1');
+    testName.textContent = this.testName;
+    const questionsList = this.newEl('ol');
+
+    const button = this.newEl('button');
+    button.setAttribute('type', 'submit');
+    button.textContent= 'Проверить результаты';
+
+    button.onclick = function(){//изменяем заголовок у второго вопроса
+    		//console.log('clicked');
+    		//questionsList.children[1].children[0].textContent = 'Вопрос 9999';
+
+    		if (questionsList.children[1].children[0].textContent == 'Вопрос 9999') {
+    			questionsList.children[1].children[0].textContent = 'Вопрос 2';
+    		} else {
+    			questionsList.children[1].children[0].textContent = 'Вопрос 9999';
+    		};
+    		console.log(questionsList.children[1].children[1].children[0].lastChild.checked);
+    		let input = questionsList.children[1].children[1];
+
+        // по клику то чекед, то не чекед
+    		input.children[0].firstElementChild.checked = !input.children[0].firstElementChild.checked;//toggle
+    		input.children[2].firstElementChild.checked = !input.children[2].firstElementChild.checked;
+
+    		for (let i = 0; i < questionsList.children.length; i++){
+    			console.log(questionsList.children[i].children[1].children[1].firstElementChild);
+    						questionsList.children[i].children[1].children[1].firstElementChild.checked;
+    		}
+
+    		for (let i = 0; i < questionsList.children.length; i++){
+    			let title = questionsList.children[i].firstElementChild;
+    			console.log(title);
+    			title.setAttribute('style', 'background: red')
+    		}
+
+    		let titles = document.querySelectorAll('h3');//это не массив, а коллекция элементов, у нее нет методов массивов
+                                                      //только for-ом можно пройти
+        [...titles].forEach((item) => {               //но вот так можно превратить ее в массив
+          item.setAttribute('style', 'background: green');  // и жизнь налаживается
+        })
+/*    		for (let i = 0; i < titles.length; i++){    //ну или фором
+    			let title = titles[i];
+    			//console.log(title);
+    			title.setAttribute('style', 'background: green')
+    		}*/
+    	}
+    /*
+    * this.renderQuestions()
+    * */
+    this.questions.forEach(question => {
+      const li = this.newEl('li');
+      const questionHeader = this.newEl('h3');
+      questionHeader.textContent = question.questionName;
+
+      const answers = this.newEl('ul');
+
+      question.answers.forEach((answer, answerIndex) => {
+        //answers.appendChild(this.renderAnswer(answer, answerIndex));
+        answers.innerHTML += this.renderAnswer(answer, answerIndex);
+      });
+
+      li.appendChild(questionHeader);
+      li.appendChild(answers);
+      questionsList.appendChild(li);
+    });
+
+    main.appendChild(testName);
+    main.appendChild(questionsList);
+
+    main.appendChild(button);
+
+    document.body.appendChild(main);
+  },
+
+
+  renderAnswer(answer, answerIndex) {
+/*    const li = this.newEl('li');
+    const label = this.newEl('label');
+    const uniqId = `uniq_${Math.random()}_${answerIndex}`;
+    label.setAttribute('for', uniqId);
+    label.textContent = answer;
+
+    const input = this.newEl('input');
+    input.setAttribute('type', 'checkbox');
+    input.setAttribute('id', uniqId);
+
+    li.appendChild(input);
+    li.appendChild(label);
+    return li;*/
+
+  //-----перепишем на innerHTML-----------------------------
+    const uniqId = `uniq_${Math.random()}_${answerIndex}`;
+
+    return `<li>
+                <input type="checkbox" id="${uniqId}"></input>
+                <label for="${uniqId}">${answer}</label>
+            </li>`;
+  },
+
+  newEl(elName) {
+    return document.createElement(elName);
+  }
+};
+
+app.render();
+
+//----------------CLASSWORK 16---------------------------
+const main = document.querySelector('main');
+const span = document.createElement('span');
+
+span.textContent = 'SPAN';
+
+document.body.insertBefore(span, main);
+
+
+//-----------------------
+//добавить кнопку 
+//по клику на кнопку перед каждым ответом вставить something
+let newButton = document.createElement('button');
+newButton.textContent = 'NEW BUTTON';
+newButton.style.cssText = 'display:block; margin: 30px';
+
+main.appendChild(newButton);
+
+/*
+* Все вопросы в DOM
+* проходимся по каждому вопросу
+* questions[DOMIndexQuestion]
+* labelIndex
+*
+* */
+// label - 'answer 1.2'
+// question.correctAnswers.includes(label) -- CORRECT
+
+const findCorrectAnswer = answerToValidate => {
+  let correctAnswers = questions.map(question =>
+    question.correctAnswersIndexes.map(answerIndex => {
+      return question.answers[answerIndex];
+    })
+  );
+  // correctAnswersIndexes: [1] before
+  // correctAnswersIndexes: ['answer 1.2'] after
+
+  return correctAnswers.some(answer => {
+    return answer.includes(answerToValidate);
+  });
+}; 
+
+newButton.onclick = () => {
+  //по клику на кнопку перед каждым ответом вставить something
+  let ul_s = document.querySelectorAll('ul');//3
+
+  [...ul_s].forEach((item) => {
+
+      let li_s = item.querySelectorAll('li');
+
+      [...li_s].forEach((value) => {
+        let something = document.createElement('span');
+        something.textContent = 'something';
+        item.insertBefore(something, value);
+      })
+
+  })
+
+  //по клику на кнопку возле каждого инпута вставить correct или incorrect 
+  //на основании значения correctAnswers из массива questions:
+
+     const labels = document.querySelectorAll('label');
+
+     [...labels].forEach(label => {
+        const newSpan = document.createElement('span');
+
+        const labelStatus = findCorrectAnswer(label.textContent)
+          ? 'CORRECT'
+          : 'INCORRECT';
+      newSpan.textContent = labelStatus;
+      label.parentElement.insertBefore(newSpan, label);
+        //console.log(findCorrectAnswer(label.textContent));
+     })
+
+
+    //----insertAdjacentHTML, insertAdjacentElement----------------------
+
+    const body = document.body;
+
+    main.insertAdjacentElement('afterBegin', newButton);
+
+    //-----innerHTML----------------------------------------------------
+    //берет или вставляет содержимое тега (то, что написано внутри тега, 
+    //включая вложенные теги, если они там есть)
+
+    //-----outerHTML----------------------------------------------------
+    //берет или вставляет содержимое тега (то, что написано внутри тега, 
+    //включая вложенные теги, если они там есть, и еще и сам себя покажет)
+
+    //добавьте к бади что-то через innerHTML
+
+    body.innerHTML += `<div>some inner html</div>`;
+
+    //--добавьте список ниже текста---------
+    const javaScriptOneLove = [
+      'Arrow',
+      'Closures',
+      'Classes'
+    ];
+
+    let createList = arr => {
+      const renderItems = arr.map(item => 
+         `<li>${item}</li>`
+        ).join('');
+
+      return `<ul>
+                ${renderItems}
+              </ul>`
+    }
+
+    body.innerHTML += createList(javaScriptOneLove);
+
+}//end of onclick function
+
diff --git a/js-core/homeworks/homework-16/index.html b/js-core/homeworks/homework-16/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Homework 16</title>
+</head>
+<body>
+	<h1>Homework 16</h1>
+
+<script type="text/javascript" src="main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-16/main.js b/js-core/homeworks/homework-16/main.js
@@ -0,0 +1,112 @@
+/*
+ 0 Алгоритмы
+ Реализуйте функцию которая будет превращать трехмерный массив
+ в двухмерный, а если массив двухмерный, тогда в трехмерный массив
+
+ ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ !
+ */
+
+solution = arr => {
+	let counter = 0;
+	let resultArray = [];
+
+	while (counter != arr[0].length) {
+
+		let smallArray = arr.map(item => { // [1, 'a']
+			return item[counter];
+		})
+
+		resultArray.push(smallArray);
+		counter++;
+	}
+
+	return resultArray;
+
+}
+
+//console.log(solution([ [1, 'a'], [2, 'b'], [3, 'c'] ])) //=> [ [1, 2, 3], [a, b, c] ];
+//console.log(solution([ [1, 3, 5], [2, 4, 6] ])) //=> [ [1, 2], [3, 4], [5, 6] ];
+//console.log(solution([[]]))// => []
+//console.log(solution([ [ [ ] ] ])) // = [ [] ]
+
+//----------------------------------------------------------------------
+/*
+/*
+<h1>Main</h1>/////
+<ul>
+  <h1>Catalog</h1>////
+  <li>
+    <ul>
+      <h1>Comp</h1>////
+      <ul>
+        <li>
+          <h1>Notebook</h1>
+          <h1>...</h1>
+        </li>
+      </ul>
+  </li>
+
+ Визуализируйте массив, если в коллекции есть свойство
+ children,
+ тогда создайте вложенный лист
+ name - свойство h1
+ children ul -> li
+ Используйте innerHTML
+ */
+
+const navigation = [
+  {name: 'Главная'},
+  {name: 'Каталог', //h1
+   children: [ //ul
+		      	{name: 'Компьютеры',//h1
+		        children: [ //li -> ul 
+		        		{name: 'Ноутбуки'}, //li h1
+		        		{name: 'Планшеты'} //li h1
+		        	]
+		      	}
+    		 ]
+  },
+  {name: 'Профиль'}
+];
+
+const visualArray = arr => {
+	arr.forEach(item => { 
+
+		for (let key in item) {
+
+			if (key == 'name') {
+				document.body.innerHTML += `<h1>${item.name}</h1>`;
+			};
+
+			if (key == 'children') {
+				const map = item[key].map(child => {
+
+					let res = '<ul>';
+
+					for (let key1 in child) {
+
+						if (key1 == 'name') {
+							res += `<h1>${child[key1]}</h1>`;
+						};
+
+						if (key1 == 'children') {
+							res += `<ul>
+										<li>${child[key1][0].name}</li>
+										<li>${child[key1][1].name}</li>
+									<ul>`
+						}
+
+					}
+					res += '</ul>';
+					return res;
+				})
+
+				document.body.innerHTML += map;
+			}
+
+		};
+
+	})
+};
+visualArray(navigation);
+