Pictures Art

Одностраничный сайт

Вёрстка данного многостраничного сайта уже существовала. Требовалось реализовать несколько функций с помощью JavaScript

Сайт представляет собой онлайн-магазин для продажи картин, нарисованных по вашему фото

Цель проекта - совершенствование знаний в разработке frontend приложений на JavaScript в парадигме функционального программирования

The goal of the project is to improve knowledge in the development of frontend JavaScript applications in the functional programming paradigm

Stack

Используемые технологии

• JavaScript
• HTML5
• SASS
• Fetch
• Prettier
• Gulp

Используемые библиотеки

• animate.css
• bootstrap.css

Сборка

gulp - базовая команда, которая запускает сборку для разработки, используя browser-sync

Функционал, реализованный в процессе разработки

1. Кастомный слайдер. Применяется несколько раз. При наведении мыши — останавливается автоматическое перелистывание
2. Несколько модальных окон с разной логикой взаимодействия
   1. Модалка, срабатывающая через определённое время с формой обратного звонка
   2. Модалка с промокодом. Кнопка в виде подарка, находится в правом верхнем углу и исчезает после взаимодействия
   3. Модалка с промокодом, которая срабатывает, если клиент не нажал на соответствующую кнопку в начале страницы
   4. Модалка, срабатывающая при клике на кнопки — Заказать дизайн портрета, Хочу так же, Заказать. В окнах есть форма с возможностью загрузить свой файл и оставить комментарий
3. Есть три вида форм
   1. Заказать дизайн
   2. Заказать обратный звонок
   3. Форма конфигуратор, с возможностью выбора размера, материала, доп. услуги, можно ввести промокод
4. Отправка формы реализованна с помощью метода Fetch. Есть спиннер загрузки и оповещения о результатах отправки — Ok, Fail

Результат

В процессе разработки, все задачи были выполнены. Поставленная цель достигнута