Online-Store - Интернет магазин

https://azozulya.github.io/online-store/

Необходимо создать интернет-магазин произвольной тематики(например: техника, автозапчасти, спорт товары и т.д.), где товары будут иметь следующий функционал: фильтрация, сортировка, поиск, добавление в корзину.

Функционал приложения

1. Главная страница содержит все товары магазина а также фильтры, строку поиска, поле для сортировки.
2. Карточка товара содержит его изображение, название, количество данного товара на складе, год выхода на рынок, цвет, производитель и т.д., находится ли товар в корзине Карточки товаров добавляются динамически средствами JavaScript
3. Добавление товаров в корзину
   • кликая по карточке с товаром или по кнопке на нем, товар можно добавлять в корзину или удалять. Карточки добавленных в корзину товаров внешне отличаются от остальных
   • на странице отображается количество добавленных в корзину товаров. При попытке добавить в корзину больше 20 товаров, выводится всплывающее уведомление с текстом "Извините, все слоты заполнены"
4. Сортировка Сортируются только те товары, которые в данный момент отображаются на странице
   • сортировка товаров по названию в возрастающем и убывающем порядке
   • сортировка товаров по году их выхода на рынок в возрастающем и убывающем порядке
5. Фильтры в указанном диапазоне от и до
   • фильтры по количеству
   • фильтры по году выпуска на рынок
   • для фильтрации в указанном диапазоне используется range slider с двумя ползунками. При перемещении ползунков отображается их текущее значение, разный цвет слайдера до и после ползунка Range slider можно создать на основе input[type=range] - пример или использовать для этой цели библиотеку noUiSlider, или другую на ваш выбор
6. Фильтры по значению Выбранные фильтры выделяются стилем.
   • фильтры по производителю
   • фильтры по цвету
   • фильтры по размеру (в случае с Демо - по количеству камер)
   • можно отобразить только популярные товары
   • можно отфильтровать товары по нескольким фильтрам одного типа Если для выбранной Вами тематики интернет-магазина указанные выше фильтры неактуальны, Вы можете добавить свои фильтры в зависмости от категории товара. Для нескольких фильтров одного типа отображаются товары, которые соответствуют хоть одному выбранному фильтру. Например, можно отобразить Samsung и Apple; или белые, синие и красные товары; или товары с 2 и 3 камерами.
7. Можно отфильтровать товары по нескольким фильтрам разного типа
   Для нескольких фильтров разного типа отображаются только те товары, которые соответствуют всем выбранным фильтрам.
   Например, можно отобразить только красные товары. Или популярные белые и красные товары впоступившие на рынок в 2010-2020 годах.
   Если товаров, соответствующих всем выбранным фильтрам нет, на странице выводится уведомление в человекочитаемом формате, например, "Извините, совпадений не обнаружено"
8. Сброс фильтров
   • есть кнопка reset для сброса фильтров Кнопка reset сбрасывает только фильтры, не влияя на порядок сортировки или товары, добавленные в избранное.
     После использования кнопки reset фильтры остаются работоспособными
   • при сбросе фильтров кнопкой reset, ползунки range slider сдвигаются к краям, значения ползунков возвращаются к первоначальным, range slider закрашивается одним цветом
9. Сохранение настроек в local storage
   • выбранные пользователем фильтры, порядок сортировки, добавленные в избранное товары сохраняются при перезагрузке страницы
   • eсть кнопка сброса настроек, которая очищает local storage
10. Поиск

• при открытии приложения курсор находится в поле поиска
• автозаполнение поля поиска отключено (нет выпадающего списка с предыдущими запросами)
• есть placeholder
• в поле поиска есть крестик, позволяющий очистить поле поиска
• если нет совпадения последовательности букв в поисковом запросе с названием товара, выводится уведомление в человекочитаемом формате, например "Извините, совпадений не обнаружено"
• при вводе поискового запроса на странице остаются только те товары, в которых есть указанные в поиске буквы в указанном порядке. При этом не обязательно, чтобы буквы были в начале слова. Регистр символов при поиске не учитывается Поиск ведётся только среди товаров, которые в данный момент отображаются на странице.
• если очистить поле поиска, на странице отображаются товары, соответствующие всем выбранным фильтрам и настройкам сортировки

Пример исходных данных для товаров Вы можете редактировать исходные данные или полностью изменить их с целью улучшения качества созданного приложения

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

• TypeScript
• Modules in JavaScript
• Webpack
• сортировка данных
• фильтрация данных
• реализация поиска

Технические требования

• для написания кода приложения используйте TypeScript
• разбейте код на модули
• для сборки кода используйте webpack
• используйте eslint настроеный для проверки TypeScript
• работа приложения проверяется в браузере Google Chrome последней версии
• можно использовать bootstrap, material design, css-фреймворки, html и css препроцессоры
• не разрешается использовать jQuery, другие js-библиотеки и фреймворки, за исключением следующих случаев:
  • можно использовать js-библиотеку для создания ползунка с двумя значениями для сортировки в указанном диапазоне, например, noUiSlider, или другую на ваш выбор
  • можно использовать js-библиотеку для реализации дополнительного функционала - плавного перемещения карточек в ходе сортировки, фильтрации, поиска, например, Shuffle, или другую на ваш выбор
  • можно использовать jQuery только для подключения используемых js-библиотек, если она необходима для их работы

Требования к вёрстке

• вёрстка адаптирована для планшета и десктопа. Корректность отображения приложения и отсутствие горизонтальной полосы прокрутки проверяется при ширине страницы от 1920рх до 768рх
• интерактивность элементов, с которыми пользователи могут взаимодействовать, изменение внешнего вида самого элемента и состояния курсора при наведении, использование разных стилей для активного и неактивного состояния элемента, плавные анимации
• в футере приложения есть ссылка на гитхаб автора, год создания приложения

Материалы

• Официальная документация TypeScript
• Руководство по TypeScript
• Практическое руководство по TypeScript для разработчиков
• TypeScript. Полный курс
• TypeScript - Быстрый Курс за 70 минут

Вебинары RS School

• JS/FE 2021Q3 Typescript Basics
• Typescript 26.05.21 (part 1)
• Typescript 28.05.21 (part 2)

Штрафы

1. Используется тип Any
2. Код не полностью покрыт типами
3. В конфигурационном файле TypeScript не стоят обязательные флаги "noImplicitAny": true и "strict": true
4. В конфигурационном файле ESLint не включено правило no-explicit-any