JS loyihalari

Qayta o‘rnatish va saqlash imkoniyatiga ega hisoblagich

Ushbu loyihada siz quyidagi tugmalar bilan hisoblagich qurasiz:

Hisoblagichni oshirish
Hisoblagichni kamaytiring
qayta o‘rnatish the counter
Hisoblagichni saqlang
Hisoblagichni yuklash

Loyiha ko‘nikmalari

JavaScript o‘zgaruvchilari
JavaScript Functionlar
JavaScript HTML DOM (Document Object Model)
JavaScript Events (onclick attributes)
JavaScript localStorage (hisoblagichni saqlash va tiklash uchun)

HTML kodi

<h2>Counter</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()">Save</button>
<button onclick="loadCount()">Load</button>

<script>
// JavaScript code. See below.
</script>

JavaScript kodi

// Declare the counter
let count = 0;

// Function to display the counter
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// Function to increase the counter
function increaseCount() {
  count++;
  updateCount();
}

// Function to decrease the counter
function decreaseCount() {
  count--;
  updateCount();
}

// Function to reset the counter
function resetCount() {
  count = 0;
  updateCount();
}

// Function to save the counter
function saveCount() {
  localStorage.setItem("count", count);
}

// Function to load the counter
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

O‘zingiz sinab ko‘ring »

1. HTML yarating

Add a <h2> header element
Sonni ko‘rsatuvchi <p> elementini qo‘shing
Add 5 <button> Elementlar
Har bir tugmaga onclick atributini qo‘shing

Misol

2. Skript yarating

let count = 0 declares a counter
Function updateCount() {} hisoblagichni yangilash uchun funksiya yaratadi
document.getElementById().innerHTML hisoblagichni ko‘rsatadi

Misol

3: Hisoblagichni oshirish funksiyasini qo‘shing

Function increaseCount() {} oshirish funksiyasini yaratadi
count++ increases the counter
updateCount() diplays the counter

Misol

// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}

4: Hisoblagichni kamaytirish funksiyasini qo‘shing

Function decreaseCount() {} kamaytirish funksiyasini yaratadi
count-- decreases the counter
updateCount() diplays the counter

Misol

// Function to decrease the counter
function decreaseCount() {
count--;
updateCount();
}

5: Hisoblagichni qayta o‘rnatish funksiyasini qo‘shing

Function resetCount() {} qayta o‘rnatish funksiyasini yaratadi
count = 0 hisoblagichni tiklaydi
updateCount() diplays the counter

Misol

function resetCount() {
count = 0;
updateCount();
}

6: Hisoblagichni saqlash funksiyasini yarating

Function saveCount() {} saqlash funksiyasini yaratadi
localStorage.setItem() saves the value.

Misol

function saveCount() {
localStorage.setItem("count", count);
}

7: Hisoblagichni yuklash funksiyasini yarating

Function loadCount() {} yuklash funksiyasini yaratadi
localStorage.getItem() gets the value
Number(saved) saqlangan raqamlarga o‘zgartiradi va qiymatni ko‘rsatadi.
updateCount() qiymatni ko‘rsatadi.

Misol

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

localStorage qiymatlarni matn sifatida saqlaydi, shuning uchun biz foydalanamiz Qiymatni raqamga aylantirish uchun Number().

Siz nimani o‘rgandingiz?

JavaScript yordamida HTML’ni qanday yangilash
Tugma hodisalaridan (onclick) qanday foydalanish
LocalStorage dan qiymatlarni qanday saqlash va yuklash
Funksiyalar bilan kodingizni qanday tartibga solish kerak

Mashqlar

1-mashq

Hisoblagichni 0 o‘rniga 10 dan boshlang.

2-mashq

Hisoblagichning 0 dan pastga tushishining oldini oling.

3-mashq

Sahifa ochilganda saqlangan hisoblagich qiymatini avtomatik ravishda yuklang.

Solutions

// Declare the counter
let count = 10;

// Load the counter when the page opens
loadCount();

// Function to display the counter
function updateCount() {
  document.getElementById("count").innerHTML = count;
}

// Function to increase the counter
function increaseCount() {
  count++;
  updateCount();
}

// Function to decrease the counter
function decreaseCount() {
  if (count > 0) {
    count--;
    updateCount();
  }
}
// Function to reset the counter
function resetCount() {
  count = 10;
  updateCount();
}

// Function to save the counter
function saveCount() {
  localStorage.setItem("count", count);
}

// Function to load the counter
function loadCount() {
  let saved = localStorage.getItem("count");
  if (saved !== null) {
    count = Number(saved);
  }
  updateCount();
}

O‘zingiz sinab ko‘ring »

Qiymatni saqlashga harakat qiling, sahifani qayta yuklang va avtomatik yuklanishini tekshiring.

JavaScript loyihalari

JavaScript Counter LocalStorage-da tiklash va saqlash bilan hisoblagich loyihasi.
JavaScript hodisa tinglovchisi (Event Listener)
onclick o‘rniga hodisa tinglovchisidan foydalanadigan hisoblagich loyihasi.
JavaScript-to-do ro‘yxati Mahalliy xotirada massivda saqlangan bajariladigan ishlar ro‘yxati.
JavaScript Modal qalqib chiquvchi oynasi sahifaning yuqori qismida paydo bo‘ladigan modal qalqib chiquvchi oyna.
JavaScript’da formani tekshirish
Kiritilgan ma’lumotlarni tekshiradigan (validatsiya) HTML forma.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish