|
|
@@ -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`)
|
