coding with ☕️
try { const res = await fetch('https://dummyjson.com/products');
Tushuntirish:
try { ... } – bu yerda xatoliklar yuz berishi mumkinligi uchun try-catch ishlatilgan.
await fetch(...) – internetdan https://dummyjson.com/products manzilidan ma’lumot olib keladi.
fetch – bu ma’lumot olish uchun ishlatiladigan funksiya (API chaqiruvi).
try { ... } – bu yerda xatoliklar yuz berishi mumkinligi uchun try-catch ishlatilgan.
await fetch(...) – internetdan https://dummyjson.com/products manzilidan ma’lumot olib keladi.
fetch – bu ma’lumot olish uchun ishlatiladigan funksiya (API chaqiruvi).
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.