EasyCode-JavaScriptReact-v1 · horidon · Jul 22, 2018 · Jul 22, 2018
diff --git a/js-core/homeworks/homework-16/hw-16/index.html b/js-core/homeworks/homework-16/hw-16/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home work 16</title>
+</head>
+<body>
+
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-16/hw-16/src/main.js b/js-core/homeworks/homework-16/hw-16/src/main.js
@@ -0,0 +1,163 @@
+/*
+ 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([[]]) => []
+ [ [ [ ] ] ] = [ [] ]
+ ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ !
+ */
+
+const solution = arr => {
+    if(arr.length === 2) {
+        let output = [];
+
+        const firstPart = arr.reduce((newArr, childArr) => {
+            newArr.push(childArr[0]);
+            return newArr;
+        }, []);
+
+        const secondPart = arr.reduce((newArr, childArr) => {
+            newArr.push(childArr[1]);
+            return newArr;
+        }, []);
+
+        const thirdPart = arr.reduce((newArr, childArr) => {
+            newArr.push(childArr[2]);
+            return newArr;
+        }, []);
+
+        output.push(firstPart);
+        output.push(secondPart);
+        output.push(thirdPart);
+
+        return output;
+    }
+
+    if(arr.length === 3) {
+        let output = [];
+
+        const firstPart = arr.reduce((newArr, childArr) => {
+            newArr.push(childArr[0]);
+            return newArr;
+        }, []);
+
+        const secondPart = arr.reduce((newArr, childArr) => {
+            newArr.push(childArr[1]);
+            return newArr;
+        }, []);
+
+        output.push(firstPart);
+        output.push(secondPart);
+
+        return output;
+    }
+};
+
+console.log(solution([[1, 3, 5], [2, 4, 6]]));
+console.log(solution([[1, 'a'], [2, 'b'], [3, 'c']]));
+
+const navigation = [
+  {name: 'Главная'},
+  {
+    name: 'Каталог',
+    children: [
+      {
+        name: 'Компьютеры',
+        children: [{name: 'Ноутбуки'}, {name: 'Планшеты'}]
+      }
+    ]
+  },
+  {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 `
+            <h1>${arr[0].name}</h1>
+            <ul>
+            <h1>${arr[1].name}</h1>
+            <li>
+                <ul>
+                <h1>${arr[1].children[0].name}</h1>
+                <ul>
+                    <li>
+                    <h1>${arr[1].children[0].children[0].name}</h1>
+                    <h1>${arr[1].children[0].children[1].name}</h1>
+                    </li>
+                </ul>
+            </li>
+    `;
+};
+
+const testNavigation = visualArray(navigation);
+
+document.body.innerHTML += testNavigation;
+
+/*  ПРИЛОЖЕНИЕ  */
+// Добавьте скрипт который будет рисовать всю страницу с таблицей.
+// https://github.com/aleksandra-maslennikova/telephone-book
+// innerHTML должно быть максимум
+
+/* ТЕСТ */
+
+/*
+* Добавьте реальных вопросов про JavaScript с вариантами
+* ответов
+* */
+
+// 3. При нажатии на кнопку если были выбраны правильные ответы,
+// отображайте "ПРАВИЛЬНО" или не правильно
+// или отображайте значек X или галочку, возле вопроса
+
+
+
+/* @SUPER-FRONT */
+
+/*
+* 4. По нажатию на кнопку(проверить) отобразится "модальное" окно в котором отобразится
+* весь тест с отображенными правильными ответами(обозначьте их) и неправильными(тоже обозначьте)
+* Отобразите количество правильных и неправильных ответов
+* счетчик
+* У модального окна будет 2 кнопки "пересдать" и "отправить"
+* *
+* Если все ответы правильные, кнопка пересдать не активна
+* disabled
+*
+* По нажатию отправить, модальное окно закрывается и на экране надпись "ваши ответы успешно
+* отправлены"
+*
+* --- Если все ответы правильные отобразите картинку
+*
+* По нажатию на пересдать - появляется снова наш тест сначала
+*
+* @Super-FRONT @ 2
+* При загрузке странице добавьте таймер отсчета с милисекундами -> В модальном окне отобразите
+* количество затраченного времени на тест
+*
+* */
diff --git a/js-core/homeworks/homework-16/test-of-progamming/img/winner.gif b/js-core/homeworks/homework-16/test-of-progamming/img/winner.gif
diff --git a/js-core/homeworks/homework-16/test-of-progamming/index.html b/js-core/homeworks/homework-16/test-of-progamming/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Test Of Programming</title>
+    <style>
+        *{
+            margin: 0;
+        }
+        ul {
+            list-style: none;
+        }
+        main {
+            width: 600px;
+            margin: 0 auto;
+        }
+        .send-answers{
+            cursor: pointer;
+        }
+        .active{
+            font-size: 50px;
+        }
+        .correct{
+            color: green;
+        }
+        .wrong{
+            color: crimson;
+        }
+        #timer{
+            position: relative;
+            top: 20px;
+            left: 20px;
+        }
+
+  </style>
+  <link rel="stylesheet" href="modal.css">
+</head>
+<body>
+    <div id="timer">
+        <span id="minutes">0</span>
+        <span id="seconds">: 0</span>
+        <span id="miliseconds">: 0</span>
+    </div>
+
+    <script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-16/test-of-progamming/modal.css b/js-core/homeworks/homework-16/test-of-progamming/modal.css
@@ -0,0 +1,40 @@
+.modal.open{
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    display: flex;
+}
+
+.modal{
+    display: none;
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    justify-content: center;
+    align-items: flex-start;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 2;
+    padding: 10vh 0;
+}
+
+.modal .container{
+    background-color: white;
+    border-radius: .25rem;
+    width: 50vw;
+    padding: 2rem;
+}
+
+.modal .close-button{
+    font-size: 300%;
+    color: white;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    position: absolute;
+    top: .3rem;
+    right: 0.5rem;
+}
+
+.modal-title{
+    margin-bottom: 20px;
+}