Loyiha - localStorage yordamida hisoblagich (Counter)

Tiklash va saqlash xususiyatiga ega hisoblagich

Ushbu loyihada siz quyidagi tugmalarga ega hisoblagich qurasiz:

• Hisoblagichni oshirish (+)
• Hisoblagichni kamaytirish (-)
• Hisoblagichni nolga tushirish (Reset)
• Hisoblagichni saqlash (Save)
• Hisoblagichni yuklash (Load)

---

Loyiha ko'nikmalari

• JavaScript o'zgaruvchilari
• JavaScript funksiyalari
• JavaScript HTML DOM
• JavaScript hodisalari (onclick atributlari)
• JavaScript localStorage (hisoblagichni saqlash va tiklash uchun)

---

To'liq kod

HTML kodi

<h2>Hisoblagich</h2>

<p id="count" style="font-size:40px;">0</p>

<button onclick="increaseCount()">+</button>
<button onclick="decreaseCount()">-</button>
<button onclick="resetCount()">Reset</button>
<button onclick="saveCount()">Saqlash</button>
<button onclick="loadCount()">Yuklash</button>

<script>
  // JavaScript kodi. Pastga qarang.
</script>

JavaScript kodi

// Hisoblagichni e'lon qilish
let count = 0

// Hisoblagichni ekranda yangilash funksiyasi
function updateCount() {
  document.getElementById('count').innerHTML = count
}

// Hisoblagichni oshirish funksiyasi
function increaseCount() {
  count++
  updateCount()
}

// Hisoblagichni kamaytirish funksiyasi
function decreaseCount() {
  count--
  updateCount()
}

// Hisoblagichni nolga tushirish funksiyasi
function resetCount() {
  count = 0
  updateCount()
}

// Hisoblagichni saqlash funksiyasi
function saveCount() {
  localStorage.setItem('count', count)
}

// Hisoblagichni yuklash funksiyasi
function loadCount() {
  let saved = localStorage.getItem('count')
  if (saved !== null) {
    count = Number(saved)
  }
  updateCount()
}

---

1. HTML hosil qilish

• <h2> sarlavha elementini qo'shing.
• Raqamni ko'rsatuvchi <p> elementini qo'shing.
• 5 ta <button> (tugma) elementini qo'shing.
• Har bir tugmaga onclick atributini qo'shing.

---

2. Skript yaratish

• let count = 0 — hisoblagichni e'lon qiladi.
• function updateCount() {} — hisoblagichni yangilash uchun funksiya yaratadi.
• document.getElementById().innerHTML — hisoblagichni ekranda ko'rsatadi.

---

3. Oshirish funksiyasini qo'shish

• count++ — hisoblagichni bittaga oshiradi.
• updateCount() — yangilangan qiymatni ekranda ko'rsatadi.

---

4. Kamaytirish funksiyasini qo'shish

• count-- — hisoblagichni bittaga kamaytiradi.

---

5. Saqlash funksiyasini yaratish (Save)

• localStorage.setItem('count', count) — qiymatni brauzer xotirasida saqlaydi.

---

6. Yuklash funksiyasini yaratish (Load)

• localStorage.getItem('count') — qiymatni xotiradan oladi.
• Number(saved) — saqlangan matnni raqamga o'tkazadi.

Eslatma

localStorage qiymatlarni matn ko'rinishida saqlaydi, shuning uchun biz qiymatni raqamga qaytarish uchun Number() dan foydalanamiz.

---

Siz nimalarni o'rgandingiz?

• JavaScript yordamida HTML-ni qanday yangilashni.
• Tugma hodisalaridan (onclick) qanday foydalanishni.
• localStorage dan ma'lumotlarni saqlash va yuklashni.
• Kodni funksiyalar yordamida qanday tartibga solishni.

---

Mashqlar

1. Hisoblagichni 0 emas, balda 10 dan boshlanadigan qiling.
2. Hisoblagichning 0 dan pastga tushib ketishiga yo'l qo'ymang.
3. Sahifa ochilganda saqlangan hisoblagich qiymatini avtomatik yuklang.

---

Mashqlar yechimi

// Hisoblagichni e'lon qilish
let count = 10

// Sahifa ochilganda yuklash
loadCount()

function updateCount() {
  document.getElementById('count').innerHTML = count
}

function increaseCount() {
  count++
  updateCount()
}

function decreaseCount() {
  if (count > 0) {
    count--
    updateCount()
  }
}

function resetCount() {
  count = 10
  updateCount()
}

function saveCount() {
  localStorage.setItem('count', count)
}

function loadCount() {
  let saved = localStorage.getItem('count')
  if (saved !== null) {
    count = Number(saved)
  }
  updateCount()
}