JS vazifalar ro‘yxati

Vazifalar ro‘yxati (To-Do)

Ushbu loyihada siz Vazifalar ro‘yxatini tuzasiz.

Siz vazifalarni qo‘shasiz, o‘chirasiz va barcha vazifalarni tozalaysiz.

Vazifalar localStorage-da massivda saqlanadi.

Nimalarni o‘rganasiz

Elementlarni massivda qanday saqlash kerak
Massivdan elementlarni qanday olib tashlash mumkin
JavaScript yordamida ro‘yxatni qanday ko‘rsatish
localStorage yordamida ma’lumotlarni qanday saqlash va yuklash mumkin

Birinchi: HTML yarating

Avval quyidagilarga ega HTML sahifa yarating:

id="task" bo‘lgan kiritish maydoni
addTask()’ni chaqirish uchun tugma
id="list" bo‘lgan tartiblanmagan ro‘yxat
clearAll()’ni chaqirish uchun tugma

Misol

<!DOCTYPE html>
<html>
<body>
<h2>To-Do List</h2>

<input id="task" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<button onclick="clearAll()">Clear All</button>

<script>
// Create a task Array
let tasks = [];
</script>

</body>
</html>

O‘zingiz sinab ko‘ring »

Ko‘rsatish funksiyasini qo‘shing

Misol

displayTasks() funksiyasi ro‘yxatni yangilaydi va ko‘rsatadi.

// Function to display the list
function displayTasks() {
  let html = "";
  for (let i = 0; i < tasks.length; i++) {
    html += "<li>" + tasks[i] +
    " <button onclick='removeTask(" + i + ")'>x</button></li>";
  }
  document.getElementById("list").innerHTML = html;
}

Ro‘yxat o‘zgarganda displayTasks() funksiyasi chaqirilishi kerak.

Vazifa qo‘shish funksiyasini qo‘shing

Misol

// Function to Add a task
function addTask() {
  let taskInput = document.getElementById("task");
  let text = taskInput.value;
  if (text === "") {
    return;
  }
  tasks.push(text);
  taskInput.value = "";
  saveTasks();
  displayTasks();
}

Vazifani o‘chirish funksiyasini qo‘shing

Misol

Vazifani indeks bo‘yicha o‘chirish:

// Function to Remove a task
function removeTask(i) {
  tasks.splice(i, 1);
  saveTasks();
  displayTasks();
}

Array metodi splice(i, 1) i-pozitsiyadagi 1 ta elementni o‘chiradi.

Hammasini tozalash funksiyasini qo‘shing

Misol

Hammasini o‘chirish:

// Function to Clear all tasks
function clearAll() {
  tasks = [];
  saveTasks();
  displayTasks();
}

Vazifani saqlash funksiyasi

Misol

localStorage’da saqlash:

// Function to Save tasks
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}

Massivlarni localStorage’da saqlash uchun ularni JSON.stringify() yordamida matnga aylantiramiz.

Vazifalarni yuklash funksiyasi

Misol

Vazifalarni localStorage’dan yuklash:

function loadTasks() {
  let saved = localStorage.getItem("tasks");
  if (saved !== null) {
    tasks = JSON.parse(saved);
  }
}

Massivlarni yuklash uchun ularni JSON.parse() yordamida qayta massivga aylantiramiz.

Yakuniy loyiha

Yakuniy HTML

Yakuniy JavaScript

// Create a task Array
let tasks = [];

// Function to Display tasks
function displayTasks() {
  let html = "";
  for (let i = 0; i < tasks.length; i++) {
    html += "<li>" + tasks[i] +
    " <button onclick='removeTask(" + i + ")'>x</button></li>";
  }
  document.getElementById("list").innerHTML = html;
}

// Function to Add a task
function addTask() {
  let taskInput = document.getElementById("task");
  let text = taskInput.value;
  if (text === "") {
    return;
  }
  tasks.push(text);
  taskInput.value = "";
  saveTasks();
  displayTasks();
}

// Function to Remove a task
function removeTask(i) {
  tasks.splice(i, 1);
  saveTasks();
  displayTasks();
}

// Function to Clear all tasks
function clearAll() {
  tasks = [];
  saveTasks();
  displayTasks();
}

// Function to Save tasks
function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Function to Load tasks
function loadTasks() {
  let saved = localStorage.getItem("tasks");
  if (saved !== null) {
    tasks = JSON.parse(saved);
  }
}

// Load and display tasks when page loads
loadTasks();
displayTasks()

O‘zingiz sinab ko‘ring »

Mashqlar

1-mashq

Foydalanuvchi bo‘sh vazifa qo‘shmoqchi bo‘lsa, ogohlantirish (alert) ko‘rsating.

2-mashq

Foydalanuvchiga vazifa qo‘shish uchun Enter tugmasini bosishga ruxsat bering.

3-mashq

Har bir o‘zgarishdan keyin vazifalarni avtomatik ravishda saqlang (allaqachon bajarilgan).

Saqlash paytida ko‘rsatiladigan "Saved!" xabarini qo‘shing.

Bonus topshiriqlar (darajani oshiring)

Loyihani yaxshilashga harakat qiling:

Vazifalarni bajarilgan deb belgilang (✔)
Vazifalarni filtrlang: Barchasi / Faol / Bajarilgan
"Vazifani tahrirlash" funksiyasini qo‘shing
Vazifalarni alifbo tartibida saralang

JavaScript loyihalari

JavaScript hisoblagich (Counter)
localStorage’da tiklash va saqlash imkoniyatiga ega hisoblagich loyihasi.
JavaScript hodisa tinglovchisi (Event Listener)
onclick o‘rniga hodisa tinglovchisidan foydalanadigan hisoblagich loyihasi.
JavaScript vazifalar ro‘yxati (To-Do List)
localStorage’dagi massivda saqlanadigan vazifalar ro‘yxati.
JavaScript modal qalqib chiquvchi oyna
Sahifa ustida 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