Aplikasi To-do Yang Ingat

1.5 jamPemulaJavaScriptDOMEventsArrayslocalStorage

Hasil

Senarai to-do di mana anda boleh tambah tugasan, tandakan siap, padam, tapis All / Active / Completed, lihat berapa yang tinggal — dan semuanya masih ada selepas halaman dimuat semula.

Objektif pembelajaran

Simpan state aplikasi dalam satu array dan lukis semula DOM daripadanya dengan function render()
Cipta elemen dengan document.createElement dan pasang event listener padanya
Guna filter, find dan push untuk mengemas kini dan membuat pertanyaan pada array objek
Simpan data secara kekal dengan localStorage, JSON.stringify dan JSON.parse

Prasyarat

Asas JavaScript: variable, function, array, objek dan addEventListener — lihat trek JavaScript
Selesa membaca borang HTML ringkas (projek Kalkulator Tip & Pembahagi Bil ialah latihan yang baik)

Tingkah laku yang dijangka

Taip tugasan dan tekan Enter (atau Add) akan menambahnya ke senarai dan mengosongkan input. Tugasan kosong diabaikan.
Tanda kotak semak tugasan akan memotongnya; nyahtanda akan memulihkannya. Butang Delete membuangnya.
All / Active / Completed memaparkan tugasan yang sepadan, dan “N items left” sentiasa betul.
Selepas refresh, setiap tugasan (dan status siapnya) masih ada.

Hampir setiap aplikasi yang anda akan bina mengikut kitaran yang sama: sesuatu berlaku → kemas kini state → lukis semula skrin. Senarai to-do ialah aplikasi paling kecil yang menunjukkan kitaran ini dengan jelas, sebab itulah setiap developer pernah membinanya.

JavaScript

let todos = [
  { id: "a1", text: "Beli susu", done: false },
  { id: "b2", text: "Siapkan assignment", done: true },
];

// event → change the array → render() redraws everything from it

Array itulah kebenarannya. Senarai pada skrin cuma gambaran daripadanya.

Method array

// baris yang dijalankan
const nums = [1, 2, 3, 4, 5];

nums

1[0]
2[1]
3[2]
4[3]
5[4]

const nums = [1, 2, 3, 4, 5];. Array ialah senarai tersusun. Setiap nilai ada indeks, bermula dari 0.

indeks

push dan pop mengubah (mutate) array asal. map dan filter tidak pernah mengubahnya — ia memulangkan array baharu. Nilai dikekalkan kecil supaya muat di skrin.

Anda akan banyak menggunakan filter (padam, paparan tapisan) dan find (togol) dalam projek ini.

Pratonton meniru localStorage bagi setiap projek, dan ia disimpan antara setiap semakan — jadi item yang anda tambah semasa menguji mungkin masih ada nanti. Itu tandanya ciri ini berfungsi!

Peringkat

Jadikan borang berfungsi:

1. Dengar event submit borang dan panggil event.preventDefault(). 2. Baca input.value.trim(). Jika kosong, berhenti. 3. Push objek seperti { id, text, done: false } ke dalam todos. 4. Kosongkan input dan panggil render().

Kemudian tulis render(): kosongkan senarai (list.innerHTML = "") dan cipta satu <li> bagi setiap to-do dengan teks di dalam <span>. Guna textContent untuk teks — jangan sekali-kali innerHTML untuk input pengguna.

Semakan

Submit menambah <li> dengan teks itu
To-do disimpan dalam array todos
Input dikosongkan selepas menambah
Input kosong diabaikan

Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Saya boleh tunjuk satu tempat di mana state saya disimpan dan satu function yang melukisnyaTo-do yang mengandungi <b>hello</b> memaparkan teks itu sebagaimana adanya, bukan huruf tebal — saya guna textContentSaya refresh halaman dan to-do saya (termasuk yang sudah siap) kembaliKotak semak dan butang Delete ada label yang jelas untuk pembaca skrin (contohnya aria-label)

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.