const sum = document.querySelector('#sum'),
usd = document.querySelector('#usd')
sum.addEventListener('input', () => {
const request = new XMLHttpRequest()
request.open('GET', './js/current.json')
request.setRequestHeader('Content-Type', 'application/json')
request.send()
request.addEventListener('load', () => {
if (request.status === 200) {
const data = JSON.parse(request.response)
usd.value = (+sum.value / data.current.usd).toFixed(2)
} else {
usd.value = 'Something went wrong'
}
})
})const box = document.querySelector(".box");
async function fetchUser() {
try {
let res = await fetch("https://jsonplaceholder.typicode.com/users");
let resolve = await res.json();
resolve.forEach((info) => {
// console.log(info);
const card = document.createElement("div");
card.classList.add("card");
let h2 = document.createElement('h2')
let tel = document.createElement('a')
let city = document.createElement('p')
h2.innerHTML = `name: ${info.name}`
tel.innerHTML = `tel: ${info.phone}`
tel.setAttribute('href', `tel: ${info.phone}`)
city.innerHTML = `city: ${info.address.city}`
card.append(h2)
card.append(tel)
card.append(city)
box.append(card)
});
} catch (error) {
console.error(error);
}
}
fetchUser();fetch('https://dummyjson.com/products')
.then(res => res.json())
.then(console.log);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).