const title = document.createElement("h2");
title.textContent = product.title;
const price = document.createElement("p");
price.textContent = `Price: $${product.price}`;
const desc = document.createElement("p");
desc.textContent = product.description;Xulosa (nimalar qilindi):
.box konteyner tanlab olindi.
fetch() orqali API'dan mahsulotlar olindi.
Har bir mahsulot uchun karta yaratildi:
Rasm
Nomi
Narxi
Tavsifi
Bu karta sahifaga chiqarildi.
.box konteyner tanlab olindi.
fetch() orqali API'dan mahsulotlar olindi.
Har bir mahsulot uchun karta yaratildi:
Rasm
Nomi
Narxi
Tavsifi
Bu karta sahifaga chiqarildi.
coding with ☕️
const box = document.querySelector(".box");
document.querySelector(".box") – HTML sahifasida .box classli elementni tanlaydi.
const box – bu elementni box nomli o‘zgaruvchiga saqlaydi.
Endi biz JavaScript orqali shu .box element ichiga boshqa elementlar qo‘shamiz.
const box – bu elementni box nomli o‘zgaruvchiga saqlaydi.
Endi biz JavaScript orqali shu .box element ichiga boshqa elementlar qo‘shamiz.
coding with ☕️
async function fetchProducts() {
Bu fetchProducts nomli asinxron (asynchronous) funksiyani e'lon qilayapti.
async kalit so‘zi bu funksiyada await dan foydalanish mumkinligini bildiradi.
🧠 Asinxron degani — kod bajarilishi davomida to‘xtab qolmaydi, vaqt talab qiladigan ishlar (masalan: ma’lumot olish) orqa fonda bajariladi.
async kalit so‘zi bu funksiyada await dan foydalanish mumkinligini bildiradi.
🧠 Asinxron degani — kod bajarilishi davomida to‘xtab qolmaydi, vaqt talab qiladigan ishlar (masalan: ma’lumot olish) orqa fonda bajariladi.
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;