MohirDox

Ko'rinishi

Loyiha - To-Do ro'yxati (Rejalar ro'yxati) ​

Ushbu loyihada siz To-Do ro'yxatini qurasiz. Siz vazifalarni qo'shishingiz, o'chirishingiz va barchasini tozalashingiz mumkin. Vazifalar brauzerning localStorage xotirasida saqlanadi.

Siz nimalarni o'rganasiz? ​

  • Elementlarni massivda saqlashni
  • Massivdan elementlarni o'chirishni
  • JavaScript yordamida ro'yxatni ekranda ko'rsatishni
  • localStorage yordamida ma'lumotlarni saqlash va yuklashni

1. HTML hosil qilish ​

Avval quyidagilarga ega HTML sahifasini yarating:

  • id="task" bo'lgan kiritish maydoni
  • addTask() funksiyasini chaqiradigan tugma
  • id="list" bo'lgan tartiblanmagan ro'yxat (<ul>)
  • clearAll() funksiyasini chaqiradigan tozalash tugmasi
html
<!DOCTYPE html>
<html>
  <body>
    <h2>To-Do ro'yxati</h2>

    <input id="task" placeholder="Yangi vazifa" />
    <button onclick="addTask()">Qo'shish</button>

    <ul id="list"></ul>

    <button onclick="clearAll()">Barchasini tozalash</button>

    <script>
      // Vazifalar massivi
      let tasks = []
    </script>
  </body>
</html>

2. Ko'rsatish funksiyasini qo'shish ​

displayTasks() funksiyasi ro'yxatni yangilab ekranda ko'rsatadi:

js
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
}

Eslatma

Ro'yxat o'zgargan har safar displayTasks() funksiyasi chaqirilishi kerak.

3. Vazifa qo'shish funksiyasi ​

js
function addTask() {
  let taskInput = document.getElementById('task')
  let text = taskInput.value
  if (text === '') {
    return
  }
  tasks.push(text)
  taskInput.value = ''
  saveTasks()
  displayTasks()
}

4. Vazifani o'chirish funksiyasi ​

Vazifani indeksi bo'yicha o'chirish:

js
function removeTask(i) {
  tasks.splice(i, 1)
  saveTasks()
  displayTasks()
}

Eslatma

Massivning splice(i, 1) metodi i pozitsiyasidan 1 ta elementni o'chiradi.

5. Saqlash va Yuklash funksiyalari ​

localStorage massivlarni to'g'ridan-to'g'ri saqlay olmaydi, shuning uchun biz ularni matnga o'tkazamiz.

js
// Vazifalarni saqlash
function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks))
}

// Vazifalarni yuklash
function loadTasks() {
  let saved = localStorage.getItem('tasks')
  if (saved !== null) {
    tasks = JSON.parse(saved)
  }
}

To'liq JavaScript kodi ​

js
let 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 addTask() {
  let taskInput = document.getElementById('task')
  let text = taskInput.value
  if (text === '') return
  tasks.push(text)
  taskInput.value = ''
  saveTasks()
  displayTasks()
}

function removeTask(i) {
  tasks.splice(i, 1)
  saveTasks()
  displayTasks()
}

function clearAll() {
  tasks = []
  saveTasks()
  displayTasks()
}

function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks))
}

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

// Sahifa yuklanganda vazifalarni yuklash va ko'rsatish
loadTasks()
displayTasks()

Mashqlar ​

  1. Agar foydalanuvchi bo'sh vazifa qo'shmoqchi bo'lsa, ogohlantirish (alert) chiqaring.
  2. Foydalanuvchi "Enter" tugmasini bosganda ham vazifa qo'shiladigan qiling.
  3. Vazifa saqlanganda "Saqlandi!" degan xabar ko'rsating.

Bonus (Keyingi bosqich) ​

  • Vazifalarni bajarilgan deb belgilash (ustidan chiziq tortish)
  • Vazifalarni filtrlash: Hammasi / Faol / Bajarilgan
  • Vazifani tahrirlash (Edit) xususiyatini qo'shish