insane-idea / christmas-task

Christmas task

Watch deploy

---

Предыстория

У вашей бабушки скопилось большое количество ёлочных игрушек. Она попросила вас помочь их разобрать, чтобы выбрать те, которыми будет наряжать ёлку в этом году.
Зная, как бережно бабушка относится к этим игрушкам, вы отнеслись к её просьбе очень внимательно.
Вы составили опись всех имеющихся игрушек, указав для каждой её название, количество экземпляров, год покупки, форму (шар, фигурка, снежинка и т.д.), цвет, размер, отдельно отметили любимые бабушкины игрушки.
Теперь вам предстоит создать приложение, которое позволит отсортировать игрушки по названию и количеству экземпляров, найти игрушку по названию, сгруппировать игрушки по видам, добавлять игрушки в избранное и удалять из него, а также с интерактивной страницей, на которой выбранными игрушками можно украсить новогоднюю ёлку.

Ключевые навыки:

• TypeScript
• Modules in JavaScript
• Webpack
• SPA
• сортировка данных
• фильтрация данных (по значению, диапазону, нескольким фильтрам)
• добавление в избранное
• анимация, аудио

Функционал приложения (страница "Игрушки")

1. Страница с игрушками содержит карточки всех игрушек а также фильтры, строку поиска, поле для сортировки.
2. Карточка игрушки содержит её изображение, название, текстом или условным значком обозначено количество экземпляров, год покупки, форма, цвет, размер, является ли игрушка любимой
   Карточки игрушек добавляются динамически средствами JavaScript
3. Добавление игрушек в избранное
   • кликая по карточке с игрушкой или по кнопке на ней игрушку можно добавлять в избранное или удалять из избранного. Карточки добавленных в избранное игрушек внешне отличаются от остальных
   • на странице отображается количество добавленных в избранное игрушек. При попытке добавить в избранное больше 20 игрушек, выводится всплывающее уведомление с текстом "Извините, все слоты заполнены"
4. Сортировка
   Сортируются только те игрушки, которые в данный момент отображаются на странице
   • сортировка игрушек по названию в возрастающем и спадающем порядке
   • сортировка игрушек по году их приобретения в возрастающем и спадающем порядке
5. Фильтры в указанном диапазоне от и до
   • фильтры по количеству экземпляров
   • фильтры по году покупки
   • для фильтрации в указанном диапазоне используется range slider с двумя ползунками. При перемещении ползунков отображается их текущее значение, разный цвет слайдера до и после ползунка
6. Фильтры по значению
   Выбранные фильтры выделяются стилем.
   • фильтры по форме
   • фильтры по цвету
   • фильтры по размеру
   • можно отобразить только любимые игрушки
   • можно отфильтровать игрушки по нескольким фильтрам одного типа
     Для нескольких фильтров одного типа отображаются игрушки, которые соответствуют хоть одному выбранному фильтру. Например, можно отобразить снежинки и колокольчики; или белые, синие и красные игрушки; или большие и средние.
7. Можно отфильтровать игрушки по нескольким фильтрам разного типа
   Для нескольких фильтров разного типа отображаются только те игрушки, которые соответствуют всем выбранным фильтрам.
   Например, можно отобразить только синие шары. Или любимые белые и красные игрушки купленные в 1940-1960 годах.
8. Дополнительный функционал на выбор
   • в процессе сортировки, фильтрации, поиска карточки с изображениями игрушек плавно меняют своё положение

Функционал приложения (страница "Ёлка")

1. Вёрстка страниц приложения и навигация между ними
   • стартовая страница содержит название приложения и кнопку "Начать игру" или аналогичную. Выполняются требования к вёрстке
   • на странице с ёлкой есть меню с настройками, слоты с добавленными в избранное игрушками, ёлка. Выполняются требования к вёрстке
   • в header приложения есть навигация, которая позволяет с каждой страницы приложения перейти на две другие страницы
2. Меню с настройками
   У пользователя есть возможность:
   • выбрать один из нескольких (минимум 8) фонов
   • выбрать одну из нескольких (минимум 4) ёлок
   • включить/отключить падающий снег
   • включить/отключить новогоднюю музыку
3. Гирлянда (not implemented yet)
   • Гирлянда реализуется средствами css без использования изображений
   • Гирлянда на ёлку добавляется динамически средствами JavaScript
     У пользователя есть возможность:
   • добавить на ёлку мерцающую разноцветную гирлянду
   • выбрать один из нескольких (минимум 4) цветов лампочек гирлянды или оставить её разноцветной
   • внешний вид гирлянды соответствует предложенному образцу или является его улучшенной версией
4. Игрушки в избранном (half implemented)
   • в слотах находятся игрушки, которые были добавлены в избранное на странице с игрушками
   • если в избранное не была добавлена ни одна игрушка, в слотах отображаются первые 20 игрушек коллекции исходных данных
   • игрушки из слотов с игрушками можно перетянуть на ёлку используя drag and drop
   • если в процессе перетягивания игрушку отпускают за пределами ёлки, она возвращается в свой слот
   • повешенные на ёлку игрушки можно перетягивать в пределах ёлки
   • повешенные на ёлку игрушки можно снимать с ёлки, при этом они возвращаются в свой слот
   • возле слота с каждой игрушкой указывается количество игрушек в слоте равное количеству экземпляров игрушки в массиве с исходными данными
   • когда игрушку "вешают на ёлку" количество игрушек в слоте уменьшается, когда игрушку "снимают с ёлки", количество игрушек в слоте увеличивается, когда все экземпляры игрушки помещаются на ёлку, отображается пустой слот

Проверка задания ментором

1. Репозиторий
   • pull request выполнен в соответствии с требованиями
   • ведётся история коммитов, названия коммитов даются согласно гайдлайну
2. Качество кода
   • приложение написано на TypeScript.
     • используется Everyday Types
     • используются Generics
     • использование Object Types
     • использование Classes
     • использование Function
     • нигде не используется тип Any
     • ESLinter настроен на TypeScript (используется плагин typescript-eslint/recommended) и отсутствуют ошибки
     • В конфигурационном файле TypeScript стоят флаги "noImplicitAny": true и "strict": true
     • webpack настроен и работает с TypeScript
   • код разбит на модули
   • карточки игрушек добавляются динамически средствами JavaScript
   • у ментора нет замечаний к качеству кода, либо все замечания ментора исправлены
3. Оформление и функционал приложения
   • у ментора нет замечаний к внешнему виду и функционалу приложения, либо все замечания ментора исправлены