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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

Задание 9: Зависимые списки

Реализовать зависимые списки. Примечание: https://youtu.be/ojx67tQmDF8

Задание 10: ToDo лист

Создать скрипт учитывающий список дел (todo лист). Дела можно добавлять, удалять, помечать выполненными или снимать отметку о выполнении.

Задание 11: Сортировка HTML списка

Сортировка html списка по алфавиту. Например есть список

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

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