PLANTIFY — E-Commerce Product Catalog

Frontend imtihon vazifasi: Plantify — Plant Shop Landing Page dizayni asosida qurilgan mahsulotlar katalogi.

Demo

Loyihani ishga tushirish uchun index.html faylini brauzerda oching yoki istalgan static server bilan ko'taring:

# masalan:
npx serve .
# yoki VS Code "Live Server" extension

Texnologiyalar

• HTML5 — semantik markup
• CSS3 — custom properties, Grid/Flexbox, responsive dizayn (framework ishlatilmagan)
• JavaScript (ES6+) — vanilla, kutubxonasiz
• Fetch API — ma'lumotlar faqat fetch orqali olinadi

API

Ma'lumotlar manbasi: https://jsonbek.uz/api/products

Har bir mahsulot: id, title, price, description, rate, origin, available, image.

Funksionallik

1. Mahsulotlarni yuklash

• Sahifa ochilganda mahsulotlar API orqali yuklanadi
• Yuklanish paytida loading (spinner) ko'rsatiladi
• Xatolik yuz bersa foydalanuvchiga xabar va "Try again" tugmasi chiqadi

2. Mahsulotlar ro'yxati

Har bir kartada: rasm, nomi, narxi, reyting (★) va kategoriya (origin) ko'rsatiladi. Sotuvda yo'q mahsulotlar "Sold out" belgisi bilan chiqadi va savatga qo'shib bo'lmaydi. Dizayndagi qidiruv paneli mahsulotlarni nomi yoki kategoriyasi bo'yicha jonli filtrlaydi.

3. Like funksiyasi

• Har bir kartadagi yurakcha orqali mahsulotni yoqtirish mumkin
• Holat localStorage da saqlanadi — sahifa yangilanganda yo'qolmaydi
• Header'dagi yurakcha yonida yoqtirilganlar soni ko'rinadi

4. Korzinka

• "Add to Cart" tugmasi mahsulotni savatga qo'shadi
• Bir mahsulot qayta qo'shilsa quantity oshadi
• Savatdagi umumiy soni header'dagi badge'da ko'rinadi
• Savat localStorage da saqlanadi

5. Korzinka sahifasi (cart.html)

• Savatdagi barcha mahsulotlar ro'yxati
• Quantity + / − tugmalari (0 ga tushsa mahsulot o'chadi)
• Mahsulotni o'chirish (×) va savatni tozalash
• Umumiy summa va mahsulotlar soni avtomatik hisoblanadi

Responsive

• Desktop — 4 ustunli grid
• Tablet — 3/2 ustun
• Mobile — 1 ustun, burger-menyu

Loyiha tuzilishi

├── index.html        # Katalog (landing) sahifasi
├── cart.html         # Korzinka sahifasi
├── assets/           # Dizayndan olingan rasmlar (logo, hero, banner, map)
├── css/
│   └── style.css     # Barcha stillar
└── js/
    ├── api.js        # Fetch API bilan ishlash
    ├── store.js      # localStorage (likes + cart)
    ├── ui.js         # Umumiy UI helperlar
    ├── catalog.js    # Katalog sahifasi logikasi (qidiruv bilan)
    └── cart.js       # Korzinka sahifasi logikasi