WHACK THEM ALL: https://garfy2.github.io/ahj-whack_goblin/
Вы решили доделать игру с гоблинами, поэтому нужно реализовать оставшуюся логику.
Нужно доделать игру с гоблинами, реализовав следующую логику:
- Гоблин появляется в рандомной точке (набор точек фиксирован) ровно на 1 секунду
- Если пользователь успел за это время кликнуть на этой точке (попробуйте сделать custom-курсор в виде молотка), то:
- пользователю засчитывается +1 балл
- гоблин пропадает из ячейки
- Если пользователь пропустил 5 появлений гоблинов, то игра завершается.
Попробуйте реализовать всё не в виде единого скрипта, а разбив приложение на классы, каждый из которых ответственен за опредённую логику.
Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через CI.
В качестве результата пришлите проверяющему ссылку на ваш GitHub-проект. Не забудьте установить бейджик сборки.
Вы разрабатываете трекер задач, в котором есть возможность отображать назначенные пользователю задачи. Выглядеть это должно примерно так, как на экране:
Пользователь может фильтровать и добавлять (вот так вот решили проектировщики и заказчик приложения) задачи с помощью поля ввода. Некоторые задачи можно закреплять ("pin").
- Добавлять задачи можно при следующих условиях: в поле ввода есть текст и пользователь нажал "Enter" (если текста нет, но пользователь всё равно нажал "Enter" должно выводиться сообщение об ошибке - предложите, как это сделать (ни в коем случае не alert и не console.*))
- При добавлении задачи задача добавляется в блок "All Tasks", а поле ввода очищается
- Когда закреплённых задач нет, в блоке "Pinned" должен отображаться текст "No pinned tasks"
- Когда закреплённые задачи есть, они отображаются в блоке "Pinned" и не участвуют в процедуре фильтрации:
- их отображение никак не зависит от состояния фильтра
- они не отображаются в блоке "All Tasks"
- При пустом поле ввода в блоке "All Tasks" отображаются все задачи с учётом условий предыдущего пункта (т.е. все, кроме "Pinned")
- При изменении поля ввода содержимое блока "All Tasks" автоматически пересчитывается - отображаются только те задачи, название которых начинается с того, что введено в поле ввода (без учёта регистра)
- Если значению поля ввода не удовлетворяет ни одна из задач, то в блоке "All Tasks" отображается текст "No tasks found"
- При выставлении переключателя (круглая иконка справа) задача из блока "All Tasks" попадает в "Pinned"
- При снятии переключателя (круглая иконка справа) задача из блока "Pinned" попадает в блок "All Tasks" (при этом учитывайте состояние фильтра)
Все задачи должны храниться в едином массиве в памяти JS. Каждая задача должна из себя представлять объект класса "Task" (который вы разработаете сами). Перестройка DOM-дерева должна происходить на основании объектов, хранящихся в памяти.
Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через CI.
В качестве результата пришлите проверяющему ссылку на ваш GitHub-проект. Не забудьте установить бейджик сборки.
Важно: эта задача не является обязательной
Вам необходимо реализовать легковесный "менеджер изображений" - на самом деле это будет приложение, которое разрешает пользователю вводить "Название изображения" и "URL" к нему.
Важная достаточно вещь, Заказчик хочет, чтобы если ссылка неверная - т.е. по этой ссылке нет валидного изображения, то добавления объекта не происходило. Подумайте как это сделать. Подсказка: у вас есть механизм событий и вполне возможно, что для элемента img есть события, которые вам в этом помогут.
Важно: вам не нужно валидировать посимвольно сам URL, смотреть есть ли расширение в конце и т.д.!
Приложение должно выглядеть следующим образом:
Функциональность:
- Добавлять можно как по кнопке "Добавить" так и по клавише Enter (подумайте, как это реализовать)
- Если URL картинки валидный (т.е. там есть картинка) должно происходить создание блока (см. три блока внизу) для добавленной картинки. Соответственно, в блоке - картинка и элемент для удаления картинки
- Если URL картинки не валидный, добавления происходить не должно, вместо этого под полем "Ссылка на изображение" должна появляться надпись "Неверный URL изображения"
- После добавления поля должны очищаться
Старайтесь разделить своё приложение на классы, каждый из которых отвечал бы за свою часть функциональности.
Всё должно собираться через Webpack (включая картинки и стили) и выкладываться на Github Pages через CI.
В качестве результата пришлите проверяющему ссылку на ваш GitHub-проект. Не забудьте установить бейджик сборки.