Первое задание сразу охватывает две больших темы: DOM и события в DOM.
Вам нужно написать скрипт, который добавляет опросы как в ВК (зайдите к себе на стену и попробуйте добавить опрос):
- весь виджет (наша форма с полями) должен быть в div с уникальным
идентификатором или классом — для избежания конфликта с чужим кодом
- CSS стили должны сопровождаться уникальными идентификатором или классом из
предыдущего пункта
- должна быть максимум одна глобальная переменная
- Решение должны быть в виду ссылки на codepen
- Решение должно быть оформлено как блока с уникальным идентификатором — никаких полных HTML страниц
- все HTML содержимое виджета должно быть в этом блоке
- никаких <script > в codepen не нужно
- все CSS стили должны быть написаны относительно уникального id/class
- В «Добавить опрос», при нажатии на нее должна появляться форма с радиокнопками и вариантами из Ваших полей, а также
кнопка «ответить»
- Дизайн строгий минималистический (не нужно добавлять изображения, лишнее CSS-оформление)
Создать плагин автотегов, например как тут (но без jQuery): http://www.jqueryscript.net/demo/Colorfy-Tags-Mentions-In-An-Editable-Content-jQuery-autotag/
- реализовать скрипт, который выполняет ту же работу
- нельзя использовать сторонние библиотеки
- можно писать текст в одном textarea, а результат форматировать в другом HTML элементе
- виджет должен размещаться в <div class=»specEditor»></div>
- все стили должны указываться относительно указанного класса
Создать лайтбокс с возможностью перехода от одного изображения к другому. По аналогии с http://lokeshdhakar.com/projects/lightbox2/
- плагин должен работать корректно при любом соотношении сторон экрана
- маленьких и большие изображения должны отличаться исходным размером и весом (нельзя один файл одновременно использовать для thumbnail и увеличенного изображения)
Создать форму и таблицу. Написать скрипт, добавляющий содержимое формы в таблицу в виде строки
- Форма добавления должна размещаться над или под таблицей
- Дизайн строгий минималистический (не нужно добавлять изображения, лишнее CSS-оформление)
Создать форму и таблицу. У формы должно быть столько же полей, сколько колонок у таблицы. Фильтровать строки таблицы по данным, вводимым в форму.
- Сортировка должна вестись одновременно по нескольким полям: при вводе в два поля, строка должна содержать результат соответствующий двум условиям
Добавить в таблицу возможность удаления строки по нажатию. Примечание: после реализации добавить анимацию (плавное растворение перед удалением)
Реализовать дерево чекбоксов, см пример
Создать скрипт, который при вводе в input[type=text] выходит результат поиска по массиву с текстовыми элементами. Примечание: визуально это должно выглядеть, как делает Яндекс.
- При каждом нажатии в input, из заранее заданного массива нужно показывать ограниченный набор слов, совпадающих с вводом
- При клике — выбранная подсказка должна устанавливаться в input и более ничего
Реализовать зависимые списки. Примечание: https://youtu.be/ojx67tQmDF8
Создать скрипт учитывающий список дел (todo лист). Дела можно добавлять, удалять, помечать выполненными или снимать отметку о выполнении.
Сортировка html списка по алфавиту. Например есть список
<ul id="sort">
<li>Lorem.</li>
<li>Quisquam!</li>
<li>Eveniet?</li>
<li>Odio.</li>
<li>Voluptatibus.</li>
</ul>
Нужно применить плагин так, чтобы пункты списка были отсортированы по алфавиту (или в обратном порядке).