coding with ☕️
const data = await res.json();
Olingan javob (res) JSON (ya’ni ma’lumotlar formatida) bo‘lganligi uchun res.json() qilib uni o‘qish oson formatga aylantiramiz.
data degan o‘zgaruvchida endi obyekt ko‘rinishidagi ma’lumotlar saqlanadi.
data degan o‘zgaruvchida endi obyekt ko‘rinishidagi ma’lumotlar saqlanadi.
coding with ☕️
data.products.forEach(product => {
Tushuntirish:
data.products – bu barcha mahsulotlar ro‘yxati (array).
forEach yordamida biz har bir mahsulot (product) ustida alohida ishlaymiz.
data.products – bu barcha mahsulotlar ro‘yxati (array).
forEach yordamida biz har bir mahsulot (product) ustida alohida ishlaymiz.
coding with ☕️
const card = document.createElement("div"); card.classList.add("card");
document.createElement("div") – yangi <div> elementi yaratadi.
classList.add("card") – bu divga card nomli class qo‘shiladi. 🧠 Bu card – mahsulot kartasi bo‘lib xizmat qiladi.
classList.add("card") – bu divga card nomli class qo‘shiladi. 🧠 Bu card – mahsulot kartasi bo‘lib xizmat qiladi.
coding with ☕️
const img = document.createElement("img"); img.src = product.thumbnail;
img elementi yaratiladi.
Uning src (manba) atributi mahsulotning thumbnail (kichik rasm) manzili bilan to‘ldiriladi.
Uning src (manba) atributi mahsulotning thumbnail (kichik rasm) manzili bilan to‘ldiriladi.
const title = document.createElement("h2");
title.textContent = product.title;
coding with ☕️
const title = document.createElement("h2"); title.textContent = product.title;
h2 sarlavha elementi yaratiladi.
textContent orqali mahsulot nomi yoziladi.
textContent orqali mahsulot nomi yoziladi.
const price = document.createElement("p");
price.textContent = `Price: $${product.price}`;
coding with ☕️
const price = document.createElement("p"); price.textContent = `Price: $${product.price}`;
p (paragraf) elementi yaratiladi.
Unga mahsulot narxi yoziladi, $ belgisi bilan.
Unga mahsulot narxi yoziladi, $ belgisi bilan.
const desc = document.createElement("p");
desc.textContent = product.description;
coding with ☕️
const desc = document.createElement("p"); desc.textContent = product.description;
Yana bir p elementi.
Bu yerda mahsulot tavsifi (description) yoziladi.
Bu yerda mahsulot tavsifi (description) yoziladi.
coding with ☕️
card.append(img, title, price, desc);
Hamma tayyor elementlar (rasm, nom, narx, tavsif) kartaning ichiga qo‘shiladi.
coding with ☕️
box.appendChild(card);
Tayyor kartani HTML sahifasidagi .box divi ichiga joylashtiramiz. 🧠 Har bir mahsulot uchun alohida karta chiqariladi!
coding with ☕️
} catch (err) { console.error("Error fetching products:", err); }
Agar yuqoridagi kodlarda xatolik yuz bersa (masalan, internet yo‘q bo‘lsa), bu joyda xatolik konsolga chiqariladi.
coding with ☕️
fetchProducts();
Yuqorida yozilgan funksiyani chaqiryapmiz.
Shunda mahsulotlar yuklanadi va ekranga chiqadi.
Shunda mahsulotlar yuklanadi va ekranga chiqadi.