Strona "Kiber technika"
Ten projekt realizuje nowoczesny sklep internetowy z elektroniką "Kiber-Technika" z następującymi głównymi funkcjami:
Strona główna (index.html):
Nagłówek z logo, nawigacją, przełącznikiem trybu (jasny/ciemny), przyciskami logowania i koszyka.
Główny baner z wezwaniem do przejścia do katalogu.
Dynamiczna lista kategorii produktów.
Sekcja "Hity sprzedaży" z popularnymi produktami.
Katalog produktów z filtrowaniem według kategorii i wyszukiwaniem.
Okna modalne do:
logowania
rejestracji
przeglądania profilu
przeglądania szczegółów produktu
koszyka
realizacji zamówienia
zmiany hasła
przeglądania historii zamówień
Katalog i kategorie:
Kategorie i produkty są przechowywane w tablicach CATEGORIES i PRODUCTS.
Wyświetlanie kategorii i produktów jest realizowane dynamicznie za pomocą funkcji renderCategories, renderBestsellers, renderCatalog.
Filtrowanie katalogu według kategorii i zapytania wyszukiwania.
Koszyk:
Dodawanie/usuwanie produktów.
Obliczanie łącznej kwoty.
Zapis koszyka w localStorage.
Realizacja zamówienia przez formularz kontaktowy.
Przeglądanie ostatnich zamówień w profilu użytkownika.
Autoryzacja i profil:
Proste logowanie/rejestracja z weryfikacją hasła.
Zapis danych użytkownika w localStorage.
Możliwość edycji profilu, zmiany hasła, przeglądania historii zamówień.
Interfejs:
Responsywne układanie (CSS, media-queries).
Przełączanie trybu (jasny/ciemny).
Okna modalne do interakcji z użytkownikiem.
Powiadomienia o działaniach (dodano do koszyka, wyczyszczono koszyk, pomyślne zamówienie itp.).
Struktura kodu:
Kod podzielony na moduły:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
Cała logika interakcji z DOM, localStorage, oknami modalnymi, koszykiem, katalogiem i użytkownikiem jest zaimplementowana w czystym JavaScript.
Projekt jest w pełni front-endową realizacją (bez backendu):
Wszystkie dane są przechowywane lokalnie w przeglądarce za pomocą localStorage.
Strona główna (index.html):
Nagłówek z logo, nawigacją, przełącznikiem trybu (jasny/ciemny), przyciskami logowania i koszyka.
Główny baner z wezwaniem do przejścia do katalogu.
Dynamiczna lista kategorii produktów.
Sekcja "Hity sprzedaży" z popularnymi produktami.
Katalog produktów z filtrowaniem według kategorii i wyszukiwaniem.
Okna modalne do:
logowania
rejestracji
przeglądania profilu
przeglądania szczegółów produktu
koszyka
realizacji zamówienia
zmiany hasła
przeglądania historii zamówień
Katalog i kategorie:
Kategorie i produkty są przechowywane w tablicach CATEGORIES i PRODUCTS.
Wyświetlanie kategorii i produktów jest realizowane dynamicznie za pomocą funkcji renderCategories, renderBestsellers, renderCatalog.
Filtrowanie katalogu według kategorii i zapytania wyszukiwania.
Koszyk:
Dodawanie/usuwanie produktów.
Obliczanie łącznej kwoty.
Zapis koszyka w localStorage.
Realizacja zamówienia przez formularz kontaktowy.
Przeglądanie ostatnich zamówień w profilu użytkownika.
Autoryzacja i profil:
Proste logowanie/rejestracja z weryfikacją hasła.
Zapis danych użytkownika w localStorage.
Możliwość edycji profilu, zmiany hasła, przeglądania historii zamówień.
Interfejs:
Responsywne układanie (CSS, media-queries).
Przełączanie trybu (jasny/ciemny).
Okna modalne do interakcji z użytkownikiem.
Powiadomienia o działaniach (dodano do koszyka, wyczyszczono koszyk, pomyślne zamówienie itp.).
Struktura kodu:
Kod podzielony na moduły:
cart.js,
catalog.js,
client.js,
core.js,
product.js,
shared.js.
Cała logika interakcji z DOM, localStorage, oknami modalnymi, koszykiem, katalogiem i użytkownikiem jest zaimplementowana w czystym JavaScript.
Projekt jest w pełni front-endową realizacją (bez backendu):
Wszystkie dane są przechowywane lokalnie w przeglądarce za pomocą localStorage.