Сайт "Кібер техніка"
Цей проєкт реалізує інтернет-магазин сучасної електроніки "Кібер-Техніка" з такими основними функціями:
Головна сторінка (index.html):
Хедер з логотипом, навігацією, перемикачем теми (світла/темна), кнопками входу та кошика.
Головний банер із закликом перейти до каталогу.
Динамічний список категорій товарів.
Блок "Хіти продажу" з популярними товарами.
Каталог товарів із фільтрацією за категоріями та пошуком.
Модальні вікна для:
входу
реєстрації
перегляду профілю
перегляду деталей товару
кошика
оформлення замовлення
зміни пароля
перегляду історії замовлень
Каталог і категорії:
Категорії та товари зберігаються у масивах CATEGORIES і PRODUCTS.
Відображення категорій та товарів реалізовано динамічно через функції renderCategories, renderBestsellers, renderCatalog.
Фільтрація каталогу за категоріями та пошуковим запитом.
Кошик:
Додавання/видалення товарів.
Розрахунок загальної суми.
Збереження кошика в localStorage.
Оформлення замовлення через контактну форму.
Перегляд останніх замовлень у профілі користувача.
Аутентифікація та профіль:
Простий вхід/реєстрація з перевіркою пароля.
Збереження даних користувача у localStorage.
Можливість редагування профілю, зміни пароля, перегляду історії замовлень.
Інтерфейс:
Адаптивна верстка (CSS, media-запити).
Перемикання теми (світла/темна).
Модальні вікна для взаємодії з користувачем.
Повідомлення про дії (додано в кошик, очищено кошик, успішне замовлення тощо).
Структура коду:
Код поділено на модулі:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
Уся логіка взаємодії з DOM, localStorage, модальними вікнами, кошиком, каталогом і користувачем реалізована на чистому JavaScript.
Проєкт є повністю фронтенд-реалізацією (без бекенду):
Усі дані зберігаються локально в браузері за допомогою localStorage.
Головна сторінка (index.html):
Хедер з логотипом, навігацією, перемикачем теми (світла/темна), кнопками входу та кошика.
Головний банер із закликом перейти до каталогу.
Динамічний список категорій товарів.
Блок "Хіти продажу" з популярними товарами.
Каталог товарів із фільтрацією за категоріями та пошуком.
Модальні вікна для:
входу
реєстрації
перегляду профілю
перегляду деталей товару
кошика
оформлення замовлення
зміни пароля
перегляду історії замовлень
Каталог і категорії:
Категорії та товари зберігаються у масивах CATEGORIES і PRODUCTS.
Відображення категорій та товарів реалізовано динамічно через функції renderCategories, renderBestsellers, renderCatalog.
Фільтрація каталогу за категоріями та пошуковим запитом.
Кошик:
Додавання/видалення товарів.
Розрахунок загальної суми.
Збереження кошика в localStorage.
Оформлення замовлення через контактну форму.
Перегляд останніх замовлень у профілі користувача.
Аутентифікація та профіль:
Простий вхід/реєстрація з перевіркою пароля.
Збереження даних користувача у localStorage.
Можливість редагування профілю, зміни пароля, перегляду історії замовлень.
Інтерфейс:
Адаптивна верстка (CSS, media-запити).
Перемикання теми (світла/темна).
Модальні вікна для взаємодії з користувачем.
Повідомлення про дії (додано в кошик, очищено кошик, успішне замовлення тощо).
Структура коду:
Код поділено на модулі:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
Уся логіка взаємодії з DOM, localStorage, модальними вікнами, кошиком, каталогом і користувачем реалізована на чистому JavaScript.
Проєкт є повністю фронтенд-реалізацією (без бекенду):
Усі дані зберігаються локально в браузері за допомогою localStorage.