Website "Cyber Technology"
This project implements an online store of modern electronics "Cyber-Technology" with the following main features:
Main page (index.html):
Header with logo, navigation, theme switcher (light/dark), login and cart buttons.
Main banner with a call to go to the catalog.
Dynamic list of product categories.
"Best Sellers" block with popular products.
Product catalog with filtering by categories and search.
Modal windows for:
login
registration
profile viewing
product details viewing
cart
order placement
password change
order history viewing
Catalog and categories:
Categories and products are stored in CATEGORIES and PRODUCTS arrays.
Display of categories and products is implemented dynamically via renderCategories, renderBestsellers, renderCatalog functions.
Filtering the catalog by categories and search query.
Cart:
Adding/removing products.
Calculating total amount.
Saving cart in localStorage.
Order placement via contact form.
Viewing recent orders in user profile.
Authentication and profile:
Simple login/registration with password verification.
Saving user data in localStorage.
Ability to edit profile, change password, view order history.
Interface:
Responsive layout (CSS, media queries).
Theme switching (light/dark).
Modal windows for user interaction.
Notifications about actions (added to cart, cart cleared, successful order, etc.).
Code structure:
Code divided into modules:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
All interaction logic with DOM, localStorage, modal windows, cart, catalog, and user is implemented in plain JavaScript.
The project is fully front-end (no backend):
All data is stored locally in the browser using localStorage.
Main page (index.html):
Header with logo, navigation, theme switcher (light/dark), login and cart buttons.
Main banner with a call to go to the catalog.
Dynamic list of product categories.
"Best Sellers" block with popular products.
Product catalog with filtering by categories and search.
Modal windows for:
login
registration
profile viewing
product details viewing
cart
order placement
password change
order history viewing
Catalog and categories:
Categories and products are stored in CATEGORIES and PRODUCTS arrays.
Display of categories and products is implemented dynamically via renderCategories, renderBestsellers, renderCatalog functions.
Filtering the catalog by categories and search query.
Cart:
Adding/removing products.
Calculating total amount.
Saving cart in localStorage.
Order placement via contact form.
Viewing recent orders in user profile.
Authentication and profile:
Simple login/registration with password verification.
Saving user data in localStorage.
Ability to edit profile, change password, view order history.
Interface:
Responsive layout (CSS, media queries).
Theme switching (light/dark).
Modal windows for user interaction.
Notifications about actions (added to cart, cart cleared, successful order, etc.).
Code structure:
Code divided into modules:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
All interaction logic with DOM, localStorage, modal windows, cart, catalog, and user is implemented in plain JavaScript.
The project is fully front-end (no backend):
All data is stored locally in the browser using localStorage.