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.
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
console.log('Postlar:', data);
})
.catch(error => {
console.error('Xatolik yuz berdi:', error);
});