Практика JavaScript DOM/Events

Задание 1: Создание виджета опроса на JavaScript

Первое задание сразу охватывает две больших темы: DOM и события в DOM.
Вам нужно написать скрипт, который добавляет опросы как в ВК (зайдите к себе на стену и попробуйте добавить опрос):

весь виджет (наша форма с полями) должен быть в div с уникальным
идентификатором или классом — для избежания конфликта с чужим кодом
CSS стили должны сопровождаться уникальными идентификатором или классом из
предыдущего пункта
должна быть максимум одна глобальная переменная
Решение должны быть в виду ссылки на codepen
Решение должно быть оформлено как блока с уникальным идентификатором — никаких полных HTML страниц
все HTML содержимое виджета должно быть в этом блоке
никаких <script > в codepen не нужно
все CSS стили должны быть написаны относительно уникального id/class
В «Добавить опрос», при нажатии на нее должна появляться форма с радиокнопками и вариантами из Ваших полей, а также
кнопка «ответить»
Дизайн строгий минималистический (не нужно добавлять изображения, лишнее CSS-оформление)

Задание 2: Cоздать плагин автотегов на JavaScript

Создать плагин автотегов, например как тут (но без jQuery): http://www.jqueryscript.net/demo/Colorfy-Tags-Mentions-In-An-Editable-Content-jQuery-autotag/

реализовать скрипт, который выполняет ту же работу
нельзя использовать сторонние библиотеки
можно писать текст в одном textarea, а результат форматировать в другом HTML элементе
виджет должен размещаться в <div class=»specEditor»></div>
все стили должны указываться относительно указанного класса

Задание 3: Создать lightbox

Создать лайтбокс с возможностью перехода от одного изображения к другому. По аналогии с http://lokeshdhakar.com/projects/lightbox2/

плагин должен работать корректно при любом соотношении сторон экрана
маленьких и большие изображения должны отличаться исходным размером и весом (нельзя один файл одновременно использовать для thumbnail и увеличенного изображения)

Задание 4: Добавление строки в таблицу

Создать форму и таблицу. Написать скрипт, добавляющий содержимое формы в таблицу в виде строки

Форма добавления должна размещаться над или под таблицей
Дизайн строгий минималистический (не нужно добавлять изображения, лишнее CSS-оформление)

Задание 5: Фильтрация строк таблицы

Создать форму и таблицу. У формы должно быть столько же полей, сколько колонок у таблицы. Фильтровать строки таблицы по данным, вводимым в форму.

Сортировка должна вестись одновременно по нескольким полям: при вводе в два поля, строка должна содержать результат соответствующий двум условиям

Задание 6: Удаление строки таблицы

Добавить в таблицу возможность удаления строки по нажатию. Примечание: после реализации добавить анимацию (плавное растворение перед удалением)

Задание 7: Построение дерева чекбоксов

Реализовать дерево чекбоксов, см пример

Задание 8: Создание подсказки при поиске

Создать скрипт, который при вводе в input[type=text] выходит результат поиска по массиву с текстовыми элементами. Примечание: визуально это должно выглядеть, как делает Яндекс.

При каждом нажатии в input, из заранее заданного массива нужно показывать ограниченный набор слов, совпадающих с вводом
При клике — выбранная подсказка должна устанавливаться в input и более ничего

<ul id="sort">
<li>Lorem.</li>
<li>Quisquam!</li>
<li>Eveniet?</li>
<li>Odio.</li>
<li>Voluptatibus.</li>
</ul>

Нужно применить плагин так, чтобы пункты списка были отсортированы по алфавиту (или в обратном порядке).

htmllab