Xarid ro‘yxati va umumiy summa

Avval mazmunini tushunamiz

Holat — dastur eslab turadigan ma’lumot. Bu loyihada holat items ro‘yxatida saqlanadi. Ekranni shu ro‘yxatdan qayta chizamiz. Shunda o‘chirilgan yozuv jami summada qolib ketmaydi. Barcha narxlar butun so‘m, chegirma va soliq bu modelga kiritilmagan.

Tayyor natijani sinab ko‘ring

Bu ishlaydigan lokal namuna. Qiymat kiriting va natijani quyidagi tekshiruvlar bilan solishtiring. Hech qanday ma’lumot serverga yuborilmaydi.

Qadam bilan yaratamiz

1. Mahsulot va narx uchun ikkita yorliqli maydon yarating.
2. Nom bo‘sh emasligini, narx xavfsiz butun va manfiy emasligini tekshiring.
3. Yangi yozuvni items ga qo‘shing; render ekranni va jamini yangilaydi.
4. O‘chirish tugmasi o‘sha indeksdagi yozuvni olib tashlaydi va qayta chizadi.

To‘liq kod

Kodni index.html nomli faylga saqlang va brauzerda oching. Hech qanday paket o‘rnatilmaydi. Kod ustidagi tugma shu namunaning faylini saqlaydi.

<!doctype html><html lang="uz"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Xarid ro‘yxati va umumiy summa</title><style>body{font:18px/1.7 system-ui;padding:20px;color:#173c54}label{display:block;margin:12px 0}input,textarea{display:block;box-sizing:border-box;max-width:100%;width:100%;font:inherit;padding:9px;border:1px solid #8caec4;border-radius:8px}button{font:inherit;padding:9px 12px;border:1px solid #5486a7;border-radius:10px;background:#e4efff;color:#193f61;cursor:pointer}output{display:block;padding:15px;background:#e6f5ed;margin:18px 0;border-radius:12px}li{margin:10px 0}</style><main><h1>Xarid ro‘yxati va umumiy summa</h1><form id="form"><label>Mahsulot <input id="nom" maxlength="80"></label><label>Narx (butun so‘m) <input id="narx" inputmode="numeric"></label><button>Qo‘shish</button></form><p id="xabar" role="status"></p><ul id="royxat"></ul><output id="jami" aria-live="polite">Jami: 0 so‘m</output></main><script>const items = [];
const list = document.querySelector('#royxat');
function render() {
  list.replaceChildren();
  items.forEach((item, index) => {
    const li = document.createElement('li');
    li.textContent = `${item.nom}: ${item.narx} so‘m `;
    const del = document.createElement('button');
    del.type = 'button'; del.textContent = 'O‘chirish';
    del.setAttribute('aria-label', item.nom + ' ni o‘chirish');
    del.onclick = () => { items.splice(index, 1); render(); };
    li.append(del); list.append(li);
  });
  document.querySelector('#jami').textContent =
    `Jami: ${items.reduce((s, x) => s + x.narx, 0)} so‘m`;
}
document.querySelector('#form').onsubmit = event => {
  event.preventDefault();
  const nom = document.querySelector('#nom').value.trim();
  const raw = document.querySelector('#narx').value.trim();
  const narx = Number(raw);
  const total = items.reduce((s, x) => s + x.narx, 0);
  if (!nom || !raw || !Number.isSafeInteger(narx) || narx < 0 || !Number.isSafeInteger(total + narx)) {
    document.querySelector('#xabar').textContent = 'Nom va manfiy bo‘lmagan butun narx yozing. Juda katta summa kiritmang.'; return;
  }
  items.push({nom, narx}); render();
  document.querySelector('#xabar').textContent = 'Qo‘shildi.';
  event.target.reset(); document.querySelector('#nom').focus();
};</script></html>

O‘zingiz tekshiring

• Non 4000 va sut 12000 → jami 16000
• Nonni o‘chirish → jami 12000
• Bo‘sh nom, -1 yoki 2.5 narx → rad etiladi

Mustaqil rivojlantiring

Har mahsulotga miqdor qo‘shing. Jami narx × miqdor orqali hisoblansin. Bu misol sahifa yangilanganda saqlanmaydi; keyin localStorage qo‘shishni alohida o‘rganing.

Tartib: faylni saqlang → brauzerda oching → odatiy kirishni tekshiring → xato kirishni tekshiring → bitta yangi imkoniyat qo‘shing. Konsoldagi birinchi xabarni o‘qing; hamma kodni birdan almashtirmang.