Сучасний фронтенд-магазин авторських тортів, цукерок та випічки ручної роботи
SweetBox — це повноцінний фронтенд інтернет-магазину, розроблений на чистих HTML, CSS та JavaScript без зовнішніх бібліотек. Проект демонструє навички побудови модульних, масштабованих та доступних вебінтерфейсів.
p.s. Робив для навчання як роботу, але сайт вийшов непоганий тому вирішив залити
- 🛒 Динамічний кошик — додавання, видалення, зміна кількості товарів із збереженням в
localStorage - 🔍 Система фільтрів — пошук за назвою, фільтри за тегами (Веган / Без цукру / Без лактози) та ціновий діапазон
- 📦 Каталог товарів — 8 товарів з детальними описами, інгредієнтами та КБЖУ
- 📄 Сторінка товару — окрема сторінка з повним описом, інгредієнтами та схожими продуктами
- 📝 Форма замовлення — сторінка оформлення замовлення
- 📱 Адаптивний дизайн — коректне відображення на всіх пристроях (mobile-first)
- 🍔 Бургер-меню — навігація для мобільних пристроїв
- 🎞️ Scroll-анімації — плавна поява елементів при прокрутці (
IntersectionObserver) - 📑 Модульна JS-архітектура — логіка розбита на незалежні модулі
- 🧩 JS-компоненти — Header, Footer та модальні вікна генеруються динамічно
SweetBox_Project/
│
├── index.html # Головна сторінка (каталог + фільтри + hero)
├── product.html # Сторінка окремого товару
├── order.html # Сторінка оформлення замовлення
├── about.html # Сторінка «Про нас»
├── contacts.html # Сторінка контактів
├── 404.html # Сторінка помилки 404
│
├── css/
│ ├── style.css # Основні стилі (reset, змінні, layout, компоненти)
│ ├── new-styles.css # Додаткові стилі (фільтри, анімації, кошик)
│ └── product-page.css# Стилі для сторінки продукту
│
├── js/
│ ├── components.js # Генерація Header, Footer, модалок
│ ├── products-data.js# База даних товарів (масив об'єктів)
│ ├── cart.js # Логіка кошика + localStorage
│ ├── filters.js # Фільтрація та пошук товарів
│ ├── app.js # Головний модуль (ініціалізація + анімації)
│ └── script.js # Логіка сторінки товару / замовлення
│
└── img/
├── hero-cake.jpg # Головне зображення hero-секції
├── product1-8.jpg # Фото товарів
└── *.svg # Іконки (корзина, стрілка, листок, вантажівка, X)
Проект не потребує збірки, серверу або встановлення залежностей.
Відкрийте файл index.html у будь-якому сучасному браузері
# 1. Встановіть розширення Live Server у VS Code
# 2. Відкрийте папку проекту у VS Code
# 3. Клікніть правою кнопкою на index.html → "Open with Live Server"# Python 3
python -m http.server 8080
# Node.js (npx)
npx serve .| Файл | Відповідальність |
|---|---|
components.js |
Рендеринг глобальних компонентів (Header, Footer, Modal) |
products-data.js |
База даних товарів у вигляді масиву об'єктів |
cart.js |
State-management кошика, модальні вікна, localStorage |
filters.js |
Фільтрація за тегами, пошук, ціновий діапазон |
app.js |
Точка входу: ініціалізація всіх модулів, IntersectionObserver |
script.js |
Логіка сторінок товару та замовлення |
- ✅ Додавання товару до кошика
- ✅ Збільшення/зменшення кількості
- ✅ Видалення окремих позицій
- ✅ Підрахунок загальної суми
- ✅ Збереження стану між сесіями (
localStorage) - ✅ Анімація badge при оновленні
- HTML5 — семантична розмітка (nav, main, section, article, footer)
- CSS3 — Custom Properties (змінні), Flexbox, Grid, Media Queries, @keyframes
- Vanilla JavaScript — ES6+, Modules Pattern, IntersectionObserver API, localStorage API
- Google Fonts — Montserrat (async-завантаження)
- SVG — векторні іконки
| Сторінка | Файл | Опис |
|---|---|---|
| Головна | index.html |
Hero + Features + Каталог з фільтрами |
| Товар | product.html |
Детальна сторінка з інгредієнтами та КБЖУ |
| Замовлення | order.html |
Форма оформлення замовлення |
| Про нас | about.html |
Інформація про компанію |
| Контакти | contacts.html |
Контактна інформація |
| 404 | 404.html |
Сторінка помилки |
Цей проект поширюється під ліцензією MIT.