Задание по модулю 2: Базовые операции, функции и операции с DOM (jq или vanilla)

reverse

Напишите функцию reverse, которая будет менять местами все ключи и значения в объекте:

var obj = {
    foo: 'bar',
    for: 'in',
}

reverse(obj) // возвращает {bar: 'foo', 'in': 'for' }

unique

Напишите функцию unique, которая будет удалять все повторы в массиве, включая совпадающие числа и числа в строках ("45" и 45 в примере ниже)

unique(["lorem", null, 5, "15", 45, null, "45", "lorem", {}, {}, 5, 15]) // должно вернуть ["lorem", null, 5, "15", 45, {}, {}]

chekboxlist

Написать функцию checkboxList, которая будет создавать несколько checkbox-ов с label с текстом. Каждый новый блок (checkbox и label) должен начинаться с новой строки в контейнере

var checkboxes = ['Пол', 'Высшее образование', 'Трудоустроен']

checkboxList("checksContainer",checkboxes); //создает три чекбокса с текстами из массива (пол, наличие высшего образование и трудоустроен или нет человек на текущий момент) один под другим в контейнере с id = checksContainer

modal

Сделать функцию, которая показывает модальное окно с контейнером, id которого передано в качестве параметра:

Примерное содержимое модального окна. Вы можете использовать любое другое (например картинку, если ваша модалка - это просморт картинок)

<div id='modal' style='display: none'> <!-- изначально окно спрятано, и показывается только в модалке -->
    ВВедите логин: <input type='text'><br/>
    ВВедите пароль: <input type='password'><br/>
    <input type='submit'>
</div>

modal('modal') //параметр - id div-а, который покажется в качестве содержимого модального окна

При запуске функции она должна:

создать полупрозрачный фоновый div размером с всю страницу. Используйте z-index
отцентровать и показать div с контентом модалки;
по клику на фоновый div удалять фоновый div и прятать div с контентом

recursiveTree

Напишите функцию, которая отрисовывает древовидное меню, используя li, ul или ol.

var tree = [1,[21,22],3,[41,[421,422]],5]

recursiveTree('treeContainer',tree)

код выше должен создавать следующее (или схожее) дерево в DOM (в элементе treeContainer):

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

module2_FE8.md 4.1 KB Permalink Riwayat Mentahan