Каталог диснеевских игрушек. Есть фильтрация по 6 параметрам, сортировка, поиск и добавление игрушек в корзину. Все настройки сохраняются при перезагрузки страницы. На заднем фоне воспроизводится заставка Disney, можно включить/отключить звук заставки.
Придумал тематику, создал дизайн и разработал каталог товаров с фильтрацией, поиском, сортировкой и всем остальным функционалом. Были выполнены все требования по проекту: функциональные, технические и по верстке.
Ключевые навыки: TypeScript, JavaScript модули, сортировка данных, фильтрация данных, реализация поиска
- TypeScript с ООП подходом
- noUiSlider библиотека
- SCSS
- BEM
- Eslint
- Webpack
Пример:
-
Главная страница содержит все товары магазина а также фильтры, строку поиска, поле для сортировки.
-
Карточка товара содержит его изображение, название, количество данного товара на складе, год выхода на рынок, цвет, производитель и т.д., находится ли товар в корзине.
-
Добавление товаров в корзину
- кликая по карточке с товаром или по кнопке на нем, товар можно добавлять в корзину или удалять. Карточки добавленных в корзину товаров внешне отличаются от остальных
- на странице отображается количество добавленных в корзину товаров. При попытке добавить в корзину больше 20 товаров, выводится всплывающее уведомление с текстом "Извините, все слоты заполнены"
-
Сортировка
- сортируются только те товары, которые в данный момент отображаются на странице
- сортировка товаров по названию в возрастающем и убывающем порядке
- сортировка товаров по году их выхода на рынок в возрастающем и убывающем порядке
-
Фильтры в указанном диапазоне
от и до- фильтры по количеству
- фильтры по году выпуска на рынок
- для фильтрации в указанном диапазоне используется range slider с двумя ползунками. При перемещении ползунков отображается их текущее значение, разный цвет слайдера до и после ползунка.
-
Фильтры по значению
- выбранные фильтры выделяются стилем
- фильтры по производителю
- фильтры по цвету
- фильтры по размеру
- можно отобразить только популярные товары
- можно отфильтровать товары по нескольким фильтрам одного типа
- для нескольких фильтров одного типа отображаются товары, которые соответствуют хоть одному выбранному фильтру. Например, можно отобразить Samsung и Apple; или белые, синие и красные товары; или товары с 2 и 3 камерами.
- eсли для выбранной Вами тематики интернет-магазина указанные выше фильтры неактуальны, Вы можете добавить свои фильтры в зависмости от категории товара.
-
Можно отфильтровать товары по нескольким фильтрам разного типа
Для нескольких фильтров разного типа отображаются только те товары, которые соответствуют всем выбранным фильтрам.
Например, можно отобразить только красные товары. Или популярные белые и красные товары впоступившие на рынок в 2010-2020 годах.Если товаров, соответствующих всем выбранным фильтрам нет, на странице выводится уведомление в человекочитаемом формате, например, "Извините, совпадений не обнаружено"
-
Сброс фильтров
- есть кнопка
resetдля сброса фильтров
Кнопкаresetсбрасывает только фильтры, не влияя на порядок сортировки или товары, добавленные в корзину.
После использования кнопкиresetфильтры остаются работоспособными - при сбросе фильтров кнопкой
reset, ползунки range slider сдвигаются к краям, значения ползунков возвращаются к первоначальным, range slider закрашивается одним цветом
- есть кнопка
-
Сохранение настроек в local storage
- выбранные пользователем фильтры, порядок сортировки, добавленные в корзину товары сохраняются при перезагрузке страницы
- есть кнопка сброса настроек, которая очищает local storage
-
Поиск
- при открытии приложения курсор находится в поле поиска
- автозаполнение поля поиска отключено (нет выпадающего списка с предыдущими запросами)
- есть placeholder
- в поле поиска есть крестик, позволяющий очистить поле поиска
- если нет совпадения последовательности букв в поисковом запросе с названием товара, выводится уведомление в человекочитаемом формате, например "Извините, совпадений не обнаружено"
- при вводе поискового запроса на странице остаются только те товары, в которых есть указанные в поиске буквы в указанном порядке. При этом не обязательно, чтобы буквы были в начале слова. Регистр символов при поиске не учитывается
Поиск ведётся только среди товаров, которые в данный момент отображаются на странице. - если очистить поле поиска, на странице отображаются товары, соответствующие всем выбранным фильтрам и настройкам сортировки
- внешний вид приложения соответствует предложенному образцу или является его улучшенной версией
- вёрстка адаптирована для планшета и десктопа. Корректность отображения приложения и отсутствие горизонтальной полосы прокрутки проверяется при ширине страницы от 1920рх до 768рх
- интерактивность элементов, с которыми пользователи могут взаимодействовать, изменение внешнего вида самого элемента и состояния курсора при наведении, использование разных стилей для активного и неактивного состояния элемента, плавные анимации
- в футере приложения есть ссылка на гитхаб автора, год создания приложения, логотип курса со ссылкой на курс
- карточки товаров добавляются динамически средствами JavaScript
- для написания кода приложения используйте TypeScript
- в конфигурационном файле TypeScript стоят флаги
"noImplicitAny": trueи"strict": true - разбейте код на модули
- для сборки кода используйте
webpack - используйте
eslintнастроеный для проверки TypeScript - можно использовать Bootstrap, Material Design, css-фреймворки, html и css препроцессоры
- не разрешается использовать jQuery, другие js-библиотеки и фреймворки, за исключением следующих случаев:
- можно использовать js-библиотеку для создания ползунка с двумя значениями для сортировки в указанном диапазоне, например, noUiSlider, или другую на ваш выбор
- можно использовать js-библиотеку для реализации плавного перемещения карточек в ходе сортировки, фильтрации, поиска
- можно использовать jQuery только для подключения используемых js-библиотек, если она необходима для их работы