EasyCode-JavaScriptReact-v1 · olgakuzminagithub · Jul 23, 2018 · OlegLustenko · Jul 24, 2018 · OlegLustenko
diff --git a/js-core/homeworks/homework-16/index.html b/js-core/homeworks/homework-16/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Homework-16 Приложение</title>
+ <style>
+ li {
+ list-style: none;
+ }
+ </style>
+</head>
+<body>
+
+
+<!--<script src="src/appTest.js"></script>-->
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-16/src/appTest.js b/js-core/homeworks/homework-16/src/appTest.js
@@ -0,0 +1,109 @@
+/* ТЕСТ */
+
+/*
+* Добавьте реальных вопросов про JavaScript с вариантами
+* ответов
+* */
+
+// 3. При нажатии на кнопку если были выбраны правильные ответы,
+// отображайте "ПРАВИЛЬНО" или не правильно
+// или отображайте значек X или галочку, возле вопроса
+
+
+const questions = [
+ {
+ questionName: 'question 1',
+ answers: ['answer 1_1', 'answer 1_2', 'answer 1_3'],
+ correctAnswersIndexes: [1]
+ },
+ {
+ questionName: 'question 2',
+ answers: ['answer 2_1', 'answer 2_2', 'answer 2_3'],
+ correctAnswersIndexes: [2]
+ },
+ {
+ questionName: 'question 3',
+ answers: ['answer 3_1', 'answer 3_2', 'answer 3_3'],
+ correctAnswersIndexes: [1, 2]
+ }
+];
+
+
+const findCorrectAnswer = answerToValidate => {
+ let correctAnswers = questions.map(question =>
+ question.correctAnswersIndexes.map(answerIndex => {
+ return question.answers[answerIndex];
+ })
+ );
+
+ return correctAnswers.some(answer => {
+ return answer.includes(answerToValidate);
+ });
+};
+
+const app = {
+ questions,
+ testName: 'Тест по программированию',
+ buttonName: 'Проверить',
+ render() {
+ const main = this.newEl('main');
+ const testName = this.newEl('h1');
+ testName.textContent = this.testName;
+ const questionsList = this.newEl('ol');
+ 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.innerHTML += this.renderAnswer(answer, answerIndex);
+ });
+
+ li.appendChild(questionHeader);
+ li.appendChild(answers);
+ questionsList.appendChild(li);
+ });
+
+ main.appendChild(testName);
+ main.appendChild(questionsList);
+ document.body.appendChild(main);
+ const button = this.newEl('button');
+ button.textContent = this.buttonName;
+ main.appendChild(button);
+ },
+ renderAnswer(answer, answerIndex) {
+ const uniqId = `uniq_${Math.random()}_${answerIndex}`;
+ return `
+ <li>
+ <input type="checkbox" id="${uniqId}">
+ <label for="${uniqId}">${answer}</label>
+ </li>
+ `
+ },
+ newEl(elName) {
+ return document.createElement(elName);
+ }
+};
+
+app.render();
+
+
+
+const newButton = document.createElement('button');
+newButton.textContent = 'Узнать ответы';
+document.body.appendChild(newButton);
+newButton.onclick = function () {
+ const allAnswer = document.body.querySelectorAll('label');
+ [...allAnswer].forEach( answer => {
+ const span = document.createElement('span');
+ let yourAnswer = answer.textContent;
+ let labelStatus = findCorrectAnswer(yourAnswer) ? 'CORRECT' : 'INCORRECT';
+ span.textContent = labelStatus;
+ answer.parentElement.insertBefore(span, answer);
+
+ });
+ console.log(allAnswer);
+
+};
+
+
diff --git a/js-core/homeworks/homework-16/src/main.js b/js-core/homeworks/homework-16/src/main.js
@@ -0,0 +1,100 @@
+/*
+ 0 Алгоритмы
+ Реализуйте функцию которая будет превращать трехмерный массив
+ в двухмерный, а если массив двухмерный, тогда в трехмерный массив
+ // solution([ [1, 'a'], [2, 'b'], [3, 'c'] ]) => [ [1, 2, 3], [a, b, c] ]
+ // solution([ [1, 3, 5], [2, 4, 6] ]) => [ [1, 2], [3, 4], [5, 6] ]
+ // solution([[]]) => []
+ [ [ [ ] ] ] = [ [] ]
+ ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ !
+ */
+//
+
+/*yt получилось */
+
+const solution = arr => {
+ let newArr = [];
+
+ for ( let i = 0; i < arr.length; i++) {
+ let elem = arr[i];
+ for (let j = 0; j < elem.length-1; j++) {
+ newArr[i] = elem[j];
+ }
+ }
+};
+
+solution([ [1, 'a'], [2, 'b'], [3, 'c'] ]);
+solution([ [1, 3, 5], [2, 4, 6] ]);
+solution([[]]);
+
+
+const navigation = [
+ {name: 'Главная'},
+ {
+ name: 'Каталог',
+ children: [
+ {
+ name: 'Компьютеры',
+ children: [
+ {
+ name: 'Ноутбуки',
+ children: [{name: 'Apple'}, {name: 'HP'}]
+ },
+ {name: 'Планшеты'}
+ ]
+ },
+ {
+ name: 'Телевизоры',
+ children: [{name: '4k'}, {name: 'samrt-tv'}]
+ },
+ ]
+ },
+ {name: 'Профиль'}
+];
+
+/*
+ Визуализируйте массив, если в коллекции есть свойство
+ children,
+ тогда создайте вложенный лист
+ name - свойство h1
+ children ul -> li
+ Используйте innerHTML
+ */
+
+/*
+<h1>Main</h1>
+<ul>
+ <h1>Catalog</h1>
+ <li>
+ <ul>
+ <h1>Comp</h1>
+ <ul>
+ <li>
+ <h1>Notebook</h1>
+ <h1>...</h1>
+ </li>
+ </ul>
+ </li>
+*/
+
+const visualArray = arr => {
+ return `
+ ${arr.map(elem => {
+ if (elem.children) {
+ let arr = elem.children;
+ return `
+ <h1>${elem.name}</h1>
+ <li>
+ <ul>
+ ${visualArray(arr)}
+ </ul>
+ </li>
+ `
+ } else {
+ return`<h1>${elem.name}</h1>`
+ }
+ }).join('')}`
+
+};
+
+document.body.innerHTML += visualArray(navigation);