/testCase-siteOfHeadphones

Тестовая таска от Neoflex

Primary LanguageCSS

Тестовый кейс от Neostudy

Задание:

  • Необходимо разработать две страницы интернет-магазина аудио аксессуаров. Первая страница – каталог товаров, вторая – корзина с приобретенными товарами.
  • При нажатии на «Купить» в карточке на первой странице счетчик товаров рядом с иконкой корзины должен увеличиваться.
  • При изменении количества товаров в корзине, сумма должна изменяться.
  • Обязательным условием является хранение данных о каждом товаре в виде элемента массива и подстановка данных в карточки товара из полученных данных этого массива.
  • Для передачи информации о выбранных в корзину позиций можно использовать SessionStorage.

Использовано:

  • ванильный js;
  • html5;
  • css3;
  • JSDoc;
  • минимальный адаптив через media;
  • интерактив кликабельных элементов;
  • работа кнопки "купить", "+" и "-" для увеличения и уменьшения количества товаров в корзине, а также кнопка удаления позиции из корзины;
  • sessionStorage для хранения данных.

Что было бы неплохо доделать:

  • css раскидать по БЭМ. Классы старался писать уже по БЭМ (мб где-то и пропустил чего). Поэтому просто раскидать, но смысла особого нет.
  • функционал работы с карточками вынести в отдельный класс и работу со счётчиками на странице в отдельный класс. Но это потребует ощутимого по времени рефакторинга.
  • разделить существующие функции на более мелкие. Но это будет оправдано лишь после реализации разделения на классы.

P.S

  • вероятно есть косяки в верстке, с точки зрения семантики и простоты разметки
  • вероятно есть косяки в стилях - можно было сделать проще
  • не очень нравится работа с sessionStorage, возможно стоило поискать альтернативы, но навскидку был только localStorage