EasyCode-JavaScriptReact-v1 · olgakuzminagithub · Jul 17, 2018
diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Homework-14 верстка</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="test">
+    <h1>Тест по программированию</h1>
+    <form method="post" action="">
+        <fieldset>
+            <label>1. Вопрос №1</label><br>
+            <input type="checkbox" name="option1" value="a1">Вариант ответа №1<br>
+            <input type="checkbox" name="option2" value="a2">Вариант ответа №2<br>
+            <input type="checkbox" name="option3" value="a3">Вариант ответа №3<br>
+        </fieldset>
+        <fieldset>
+            <label>2. Вопрос №2</label><br>
+            <input type="checkbox" name="option1" value="a1">Вариант ответа №1<br>
+            <input type="checkbox" name="option2" value="a2">Вариант ответа №2<br>
+            <input type="checkbox" name="option3" value="a3">Вариант ответа №3<br>
+        </fieldset>
+        <fieldset>
+            <label>3. Вопрос №3</label><br>
+            <input type="checkbox" name="option1" value="a1">Вариант ответа №1<br>
+            <input type="checkbox" name="option2" value="a2">Вариант ответа №2<br>
+            <input type="checkbox" name="option3" value="a3">Вариант ответа №3<br>
+        </fieldset>
+        <button>Проверить мои результаты</button>
+    </form>
+</div>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-14/index2.html b/js-core/homeworks/homework-14/index2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Homework-14</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-14/src/main.js b/js-core/homeworks/homework-14/src/main.js
@@ -0,0 +1,97 @@
+/*
+TASK 0. Найдите числа которые повторяются нечетное количество раз
+в массиве
+  solution([12, 23, 34, 12, 12, 23, 12, 45]) -> [34 45]
+  solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,]) -> [4 100 5000]
+  solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9]) -> [6 5 9 21]
+  solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42]) -> [8 16 23 42]
+  solution([2, 2, 44, 44]) => []
+*/
+
+
+const someWebpackModule = `module.exports = {
+    context: %%HOMEDIR%,
+    entry: {
+        app: "%%HOMEDIR%%/%%APP_DIR%%/%%APPNAME%%.js"
+    },
+    output: {
+        path: %%HOMEDIR%% + '/app',
+        filename: "dist/[%%APPNAME%%].js",
+        library: '[%%APPNAME%%]'
+    }
+   }`;
+
+/* TASK - 1
+Распарсите строку и замените
+ %%HOMEDIR%% -> './JavaScript-Basic'
+ %%APP_DIR%% -> 'fixtures/src'
+ %%APPNAME%% -> 'app.js'
+ Вам нужно написать функцию которая в зависимости от разных параметров
+ будет изменять заданные значения на необходимые вам
+ Сделайте несколько вызовов данной функции
+ *
+ * */
+
+
+
+
+/*
+ TASK - 2
+ Сделайте разметку как скриншоте используя HTML
+ вам необходимо использовать тэги(!)
+*/
+
+
+
+
+/*
+TASK 3
+ JavaScript =>
+  Создать объект с методами, которые будут динамически генерировать DOM
+  Это будет тест, который мы будем разрабатывать в следующих заданиях.
+  Сейчас вам нужно только динамически создать html,
+  методы должны храниться в одном объекте.
+  Изначально на странице должен быть только <body>,
+  вызывая методы объекта нужно создать dom-элементы
+*/
+
+// app.render();
+
+class App {
+    constructor () {
+        this.title = 'Тест по программированию';
+        this.labelContent = ['Вопрос №1', 'Вопрос №2', 'Вопрос №3'];
+        this.inputContent = [
+            ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'],
+            ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'],
+            ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'],
+        ]
+    }
+    render() {
+        const div = document.createElement('div');
+        div.setAttribute('class', 'test');
+        const h1 = document.createElement('h1');
+        h1.textContent = this.title;
+        div.appendChild(h1);
+        const form = document.createElement('form');
+        div.appendChild(form);
+        for (let i = 0; i < this.labelContent.length; i++) {
+            const fieldset = document.createElement('fieldset');
+            const label = document.createElement('label');
+            label.textContent = this.labelContent[i];
+            fieldset.appendChild(label);
+            for ( let j = 0; j < this.inputContent[i].length; j ++) {
+                const input = document.createElement('input');
+                input.textContent = this.inputContent[i][j];
+                input.setAttribute('type', 'checkbox');
+                fieldset.appendChild(input);
+            }
+            form.appendChild(fieldset);
+        }
+        document.body.appendChild(div);
+    }
+
+}
+
+const app = new App();
+app.render();
diff --git a/js-core/homeworks/homework-14/style.css b/js-core/homeworks/homework-14/style.css
diff --git a/js-core/homeworks/homework-14/style.css.map b/js-core/homeworks/homework-14/style.css.map
diff --git a/js-core/homeworks/homework-14/style.scss b/js-core/homeworks/homework-14/style.scss
@@ -0,0 +1,53 @@
+* {
+  border: none;
+}
+
+body {
+  background: grey;
+  .test {
+    width: 60%;
+    height: 100%;
+    border: 1px solid black;
+    background: white;
+    margin: auto;
+    padding-top: 20px;
+    padding-bottom: 40px;
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+
+    h1 {
+      width: 100%;
+      text-align: center;
+      font-size: 18px;
+      color: black;
+      margin: 40px;
+    }
+    form {
+      width: 80%;
+      margin: auto;
+      fieldset {
+        margin-bottom: 30px;
+      }
+      label {
+        display: block;
+        margin-bottom: 10px;
+      }
+      input {
+        padding-left: 10px;
+        box-sizing: border-box;
+      }
+      button {
+        display: block;
+        width: auto;
+        height: 40px;
+        padding: 0 20px;
+        border: 1px solid black;
+        background: cornflowerblue;
+        margin: auto;
+        font-size: 16px;
+      }
+    }
+
+  }
+}