module2 FE8

05Functions.md

@@ -478,11 +478,11 @@ var rectangle = {
     h: 100,
     color: "black",
 
-    draw: function(){
+    draw: function(/* this */){
         console.log("I'm drawing a rectangle with coordinates " + this.x + "x" + this.y + " and dimensions " + this.w + 'x' + this.h + " in " + this.color + " color");
     },
 
-    setColor: function(color){
+    setColor: function(/* this, */ color){
         this.color = color;
         this.draw();
     }

module2_FE8.md

@@ -0,0 +1,97 @@
+# Задание по модулю 2: Базовые операции, функции и операции с DOM (jq или vanilla)
+
+## reverse
+
+Напишите функцию `reverse`, которая будет менять местами все ключи и значения в объекте:
+
+```javascript
+var obj = {
+    foo: 'bar',
+    for: 'in',
+}
+
+reverse(obj) // возвращает {bar: 'foo', 'in': 'for' }
+```
+
+## unique
+
+Напишите функцию `unique`, которая будет удалять все повторы в массиве, включая совпадающие числа и числа в строках ("45" и 45 в примере ниже)
+
+```javascript
+unique(["lorem", null, 5, "15", 45, null, "45", "lorem", {}, {}, 5, 15]) // должно вернуть ["lorem", null, 5, "15", 45, {}, {}]
+```
+
+## chekboxlist
+
+Написать функцию checkboxList, которая будет создавать несколько `checkbox`-ов с `label` с текстом. Каждый новый блок (`checkbox` и `label`) должен начинаться с новой строки в контейнере 
+
+
+```javascript
+var checkboxes = ['Пол', 'Высшее образование', 'Трудоустроен']
+
+checkboxList("checksContainer",checkboxes); //создает три чекбокса с текстами из массива (пол, наличие высшего образование и трудоустроен или нет человек на текущий момент) один под другим в контейнере с id = checksContainer
+```
+
+## modal
+
+Сделать функцию, которая показывает модальное окно с контейнером, `id` которого передано в качестве параметра:
+
+Примерное содержимое модального окна. Вы можете использовать любое другое (например картинку, если ваша модалка - это просморт картинок)
+```html
+<div id='modal' style='display: none'> <!-- изначально окно спрятано, и показывается только в модалке -->
+    ВВедите логин: <input type='text'><br/>
+    ВВедите пароль: <input type='password'><br/>
+    <input type='submit'>
+</div>
+```
+
+```javascript
+modal('modal') //параметр - id div-а, который покажется в качестве содержимого модального окна
+```
+
+При запуске функции она должна:
+- создать полупрозрачный фоновый `div` размером с всю страницу. Используйте z-index
+- отцентровать и показать `div` с контентом модалки;
+- по клику на фоновый `div` удалять фоновый `div` и прятать `div` с контентом
+
+## recursiveTree
+
+Напишите функцию, которая отрисовывает древовидное меню, используя `li`, `ul` или `ol`.
+
+```javascript
+var tree = [1,[21,22],3,[41,[421,422]],5]
+
+recursiveTree('treeContainer',tree)
+```
+
+код выше должен создавать следующее (или схожее) дерево в **DOM** (в элементе treeContainer):
+
+```html
+<ul>
+    <li>1</li>
+    <li>
+        <ul>
+            <li>21</li>
+            <li>22</li>
+        </ul>
+    </li>
+    <li>3</li>
+    <li>
+        <ul>
+            <li>41</li>
+            <li>
+                <ul>
+                    <li>421</li>
+                    <li>422</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+    <li>5</li>
+</ul>
+```
+https://repl.it/I4EL
+
+При движении мыши над элементами списка должны подсвечиваться все предки элемента и он сам.
+Так же можете усложнить структуру `tree` и сделать дерево ссылок (URL и текст меню в объекте качестве узла дерева, 
+а не текст, как сейчас в `tree`)