Веб страница магазина мебели с использованием HTML5/CSS/Javascript, которая содержит набор карточек "товаров", разбитых по категориям.
Страница содержит:
-
закрепленное сверху меню с названиями категорий. При прокрутке страницы меню остается на месте. При клике на название категории осуществляется переход к ней на странице. Значки категорий анимированы свойством rotate;
-
Закрепленная кнопка для возврата наверх страницы (отображается только после прокрутки) расположена в правом нижнем углу экрана;
-
Внизу страницы отображены названия категорий в виде неупорядоченного списка. При клике на название категории осуществляется переход к ней на странице;
-
В верхнем меню расположена кнопка переключения темы (темная/светлая). При переключении цвет фона и текста изменяются:
- смена цвета фона/кнопок,
- svg картинки в лого,
- корзины,
- цвет шрифта
-
Карточки “товаров” переносятся на новую строку, если не умещаются в одной строке, количество в категории от 10 штук (разное количество в категориях);
-
Поле для получения обратного звонка от менеджера. Поле ввода для комментария (можно указать произвольный текст не более 2000 символов). После прохождения валидации формы на заполненность, форма обновляется и пользователь видит другой блок информации;
-
Карточки товаров генерируются из js файла
Карточки содержат:
- изображение,
- подпись к изображению,
- цену товара,
- артикул,
- возможность добавить один/несколько товаров в корзину при помощи input / "+"/"-"
- дату добавления на сайт (выводится через функцию, которая преобразует дату): *<день недели>, <номер недели> неделя <месяц> <год> года => Среда, 3 неделя Декабря 2021 года
- Карточка корзины:
- добавлению желаемого кол-ва товаров при помощи input / "+"/"-"
- при повторном добавлении товара - он не дублируется, а увеличивается счётчик
- корзина всегда зафиксирована рядом с иконкой корзины, а при достижения максимальной высоты появляется скролл
- условия бесплатной доставки от 50 000
- итоговая стоимость пересчитываяся с условиями доставки
- при уменьшении счётчика в корзине до 0 - товар удаляется
- застилизованные радио кнопки для выбора способа оплаты. Только после выбора одной из их кнопка оформления заказа становится доступной
- при нажатии "Закрыть" форма скрывается
- При нажатии на "оформить заказ" пользователь переходит на новую страницу с успешным заказом
Дополнительно реализовано:
- файлы стилей и скриптов подключены отдельно
- анимация переходов
Репозиторий проекта: https://github.com/AlinaK96/Furniture
Посмотреть онлайн: https://alinak96.github.io/Furniture/
