Hướng dẫn này cung cấp một bài tập cho người mới JavaScript bằng cách mô tả cách tạo một Ứng dụng danh sách Todo đơn giản bằng ngôn ngữ

Bạn đang xem: để làm danh sách hướng dẫn ứng dụng web

Một số mọi người cho rằng việc xây dựng một ứng dụng danh sách việc cần làm là một hoạt động nhàm chán vì đã có rất nhiều thứ tồn tại nhưng tôi nghĩ đây vẫn là một bài tập tuyệt vời để học các khái niệm hữu ích có thể áp dụng rộng rãi trong nhiều ngữ cảnh lập trình.

Nếu bạn không hoàn toàn bị tắt bởi ý tưởng xây dựng một việc làm khác
ứng dụng danh sách và bạn còn tương đối mới đối với phát triển JavaScript và Front-end,
hướng dẫn này là dành cho bạn. Đây là bản trình diễn trực tiếp
về những gì bạn sẽ xây dựng.

GIF của ứng dụng cuối cùng

Xem bản trình diễn trực tiếp .

Điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn có kiến ​​thức cơ bản về JavaScript.
Về cơ bản, bạn cần biết biến, mảng, hàm và đối tượng là gì,
nhưng bạn không cần phải có kinh nghiệm trước với việc xây dựng JavaScript
ứng dụng.

Bắt đầu

Ứng dụng danh sách việc cần làm mà chúng tôi sẽ xây dựng trong hướng dẫn này sẽ khá cơ bản. Một người dùng có thể
thêm một công việc, đánh dấu một công việc là đã hoàn thành và xóa một công việc đã được thêm vào. Ốm
giải thích cách xây dựng từng tính năng, nhưng bạn phải làm theo bằng cách nhập
và chạy mã của bạn để tận dụng tối đa hướng dẫn này.

Tôi khuyên bạn nên sử dụng JSFiddle khi làm việc này
hướng dẫn, nhưng hãy thoải mái sử dụng các sân chơi mã khác hoặc trình soạn thảo văn bản cục bộ của bạn
nếu bạn thích. Không cần thêm quảng cáo, hãy lấy phần đánh dấu và kiểu cho ứng dụng
trên JSFiddle . Nếu bạn đang sử dụng
JSFiddle, bạn có thể nhấn nút Fork để tạo một trò chơi mới của riêng bạn.

Thêm việc cần làm

Điều đầu tiên chúng ta cần làm là thiết lập một mảng mà chúng ta sẽ đặt danh sách việc cần làm
mặt hàng. Mỗi mục việc cần làm sẽ là một đối tượng có ba thuộc tính: text , một chuỗi
chứa bất kỳ thứ gì người dùng nhập vào văn bản nhập, đã kiểm tra , một boolean
điều này giúp chúng tôi biết liệu một nhiệm vụ đã được đánh dấu là đã hoàn thành hay chưa và id ,
mã định danh duy nhất cho mặt hàng.

Sau khi một nhiệm vụ mới được thêm vào, chúng tôi sẽ tạo một đối tượng việc cần làm mới, đẩy nó vào
mảng và hiển thị giá trị của thuộc tính text trên màn hình. Khi một việc làm là
được đánh dấu là đã hoàn thành, chúng tôi sẽ chuyển thuộc tính đã kiểm tra thành true và khi
người dùng xóa một việc cần làm, chúng tôi sẽ định vị mục việc cần làm trong mảng bằng cách sử dụng id của nó và
loại bỏ nó.

Hãy bắt đầu bằng cách thêm một việc cần làm vào danh sách của chúng tôi. Để làm như vậy, chúng ta cần lắng nghe
sự kiện submit trên phần tử biểu mẫu, rồi gọi một addTodo () mới
hoạt động khi biểu mẫu được gửi.

Cập nhật ngăn JavaScript trên JSFiddle để trông giống như sau:

  

// Đây là mảng sẽ chứa các mục trong danh sách việc cần làm

let

todoItems

=

[];

// Hàm này sẽ tạo một đối tượng todo mới dựa trên

// văn bản đã được nhập vào mục nhập văn bản và đẩy văn bản đó vào

// mảng `todoItems`

function

addTodo

(

text

)

{

const

todo

=

{

text

,

đã kiểm tra

:

false

,

id

:

Ngày

.

bây giờ

(),

};

todoItems

.

push

(

việc làm

);

bảng điều khiển

.

log

(

todoItems

);

}

// Chọn phần tử biểu mẫu

const

form

=

tài liệu

.

querySelector

(

'. js-form'

);

// Thêm trình xử lý sự kiện gửi

form

.

addEventListener

(

'submit'

,

sự kiện

= & gt;

{

// ngăn làm mới trang khi gửi biểu mẫu

event

.

PreventDefault

();

// chọn kiểu nhập văn bản

const

đầu vào

=

tài liệu

.

querySelector

(

'. js-todo-input'

);

// Nhận giá trị của đầu vào và loại bỏ khoảng trắng

const

text

=

đầu vào

.

giá trị

.

trim

();

if

(

text

! ==

''

)

{

addTodo

(

text

); < / p>

input

.

value

=

''

;

input

.

focus

();

}

});

Theo mặc định, khi gửi biểu mẫu, trình duyệt sẽ cố gắng gửi biểu mẫu đó đến
máy chủ sẽ làm mới trang. Để ngăn điều đó xảy ra, chúng ta có thể
dừng hành vi mặc định bằng cách lắng nghe sự kiện submit trên biểu mẫu và
sử dụng event.preventDefault () .

Tiếp theo, chúng tôi chọn kiểu nhập văn bản và
cắt
giá trị của nó để loại bỏ khoảng trắng từ đầu và cuối chuỗi, và
sau đó lưu nó vào một biến mới có tên là text . Nếu biến text không
bằng một chuỗi trống, chúng tôi chuyển văn bản vào hàm addTodo ()
được xác định ở trên trình nghe sự kiện.

  

const

việc làm

< p class = "o"> =

{

text

,

đã kiểm tra

:

false

,

id

:

Ngày

.

bây giờ

(),

};

Trong hàm, chúng tôi tạo một đối tượng mới cho tác vụ và thêm các thuộc tính
Tôi đã đề cập trước đó. Thuộc tính text được đặt thành đối số hàm,
đã kiểm tra được khởi tạo thành false id được khởi tạo thành số
mili giây đã trôi qua kể từ ngày 1 tháng 1 năm 1970. id này sẽ là duy nhất cho mỗi
todo item trừ khi bạn có thể thêm nhiều hơn một nhiệm vụ trong một phần nghìn giây, điều này tôi không làm
nghĩ là có thể.

  

todoItems

.

< p class = "nx"> push

(

todo

);

bảng điều khiển

.

log

(

todoItems

);

Cuối cùng, tác vụ được đẩy sang mảng todoItems và mảng được ghi vào
Bàn điều khiển. Trong trình xử lý sự kiện biểu mẫu sau addTodo (text) , giá trị của
đầu vào văn bản được xóa bằng cách đặt nó thành một chuỗi trống và nó cũng được tập trung để
mà người dùng có thể thêm nhiều mục vào danh sách mà không cần phải tập trung vào
nhập đi nhập lại nhiều lần.

Thêm một vài mục việc cần làm và xem mảng todoItems trong bảng điều khiển trình duyệt của bạn. Bạn
sẽ thấy rằng mỗi mục việc cần làm được đại diện bởi một đối tượng trong mảng. Nếu bạn
bằng cách sử dụng JSFiddle, bạn có thể cần kiểm tra bảng điều khiển tích hợp do JSFiddle cung cấp.

Bảng điều khiển hiển thị mảng đối tượng việc làm

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Hiển thị các mục việc cần làm

Khi một mục việc cần làm mới được thêm vào mảng todoItems , chúng tôi muốn ứng dụng trở thành
được cập nhật với mục hiển thị trên màn hình. Chúng ta có thể làm điều này khá dễ dàng bằng cách
nối phần tử li mới cho mỗi mục vào phần tử .js-todo-list trong
DOM.

Để đạt được điều này, hãy thêm một hàm renderTodo () mới bên trên addTodo () :

  

function

renderTodo

< p class = "p"> (

todo

)

{

// Chọn phần tử đầu tiên có lớp `js-todo-list`

const

danh sách

=

tài liệu

.

querySelector

(

'. js-todo-list'

);

// Sử dụng toán tử bậc ba để kiểm tra xem `todo.checked` có đúng không

// nếu vậy, hãy gán 'done' cho `isChecked`. Nếu không, hãy chỉ định một chuỗi trống

const

isChecked

=

todo

.

đã kiểm tra

?

'xong'

:

''

< p class = "p">;

// Tạo một phần tử `li` và gán nó cho` node`

const

nút

=

tài liệu

.

createElement

(

" li "

);

// Đặt thuộc tính lớp

nút

.

setAttribute

(

'class'

,

`todo-item

$ {

isChecked

}

`

);

// Đặt thuộc tính khóa dữ liệu thành id của việc cần làm

nút

.

setAttribute

(

'data-key'

,

todo

.

id

);

// Đặt nội dung của phần tử `li` đã tạo ở trên

nút

.

innerHTML

=

`

& lt; input id = "

$ {

việc làm

< p class = "p">.

id

}

"type =" hộp kiểm "/ & gt;

& lt; label for = "

$ {

việc làm

< p class = "p">.

id

}

"class =" đánh dấu js-tick "& gt; & lt; / label & gt;

& lt; span & gt;

$ {

việc làm

.

text

}

& lt; / span & gt;

& lt; button class = "delete-todo js-delete-todo" & gt;

& lt; svg & gt; & lt; use href = "# delete-icon" & gt; & lt; / use & gt; & lt; / svg & gt;

& lt; / button & gt;

`

;

// Nối phần tử vào DOM làm phần tử con cuối cùng của

// phần tử được tham chiếu bởi biến `list`

danh sách

.

nối thêm

(

nút

);

}

Hàm renderTodo () nhận một đối tượng todo làm đối tượng duy nhất tham số. Nó
tạo nút DOM li bằng cách sử dụng
Phương thức document.createElement . Trên dòng tiếp theo, thuộc tính class được đặt
tới todo-item $ {isChecked} . Giá trị của isChecked sẽ là một chuỗi trống nếu
thuộc tính đã kiểm tra trong đối tượng todo false . Nếu không, nó sẽ
‘xong’. Bạn sẽ thấy tác dụng của lớp ‘đã hoàn thành’ này trong phần tiếp theo.

Tiếp theo, thuộc tính data-key cũng được đặt trên phần tử li . Nó được đặt thành
thuộc tính id của đối tượng todo và sẽ được sử dụng để định vị một
mục việc cần làm trong DOM ở phần sau của hướng dẫn. Tiếp theo
rằng nội dung của phần tử li được đặt bằng phương thức innerHTML
cuối cùng, phần tử li được chèn làm phần tử con cuối cùng của .js-todo-list
phần tử.

Thay đổi dòng console.log (todoItems) trong addTodo () thành renderTodo (todo) as
được hiển thị bên dưới để hàm renderTodo () được gọi mỗi khi một việc cần làm mới
mục được thêm vào.

  

function

addTodo

< p class = "p"> (

text

)

{

const

todo

=

{

text

,

đã kiểm tra

:

false

,

id

:

Ngày

.

bây giờ

(),

};

todoItems

.

push

(

việc làm

);

renderTodo

(

todo

); < / p>

}

Hãy dùng thử bằng cách thêm một vài món đồ cần làm. Tất cả chúng sẽ hiển thị trên trang.

Hình ảnh các mục việc làm được thêm vào danh sách

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Đánh dấu công việc là đã hoàn thành

Hãy thêm khả năng đánh dấu một nhiệm vụ là đã hoàn thành. Để làm được như vậy, chúng ta cần lắng nghe
cho sự kiện nhấp chuột vào hộp kiểm và bật thuộc tính đã kiểm tra
mục việc cần làm tương ứng.

Thêm mã sau vào cuối ngăn JavaScript để phát hiện việc cần làm
mục đang được kiểm tra:

  

// Chọn toàn bộ danh sách

const

danh sách

=

tài liệu

.

querySelector

(

'. js-todo-list'

);

// Thêm trình nghe sự kiện nhấp chuột vào danh sách và con của nó

danh sách

.

addEventListener

(

'click'

,

sự kiện

= & gt;

{

if

(

event

.

target

.

classList

.

chứa

(

'js-tick'

))

{

const

itemKey

=

event

.

target

.

parentElement

.

tập dữ liệu

.

phím

;

toggleDone

(

itemKey

); < / p>

}

});

Thay vì lắng nghe các nhấp chuột vào các phần tử hộp kiểm riêng lẻ, chúng tôi
lắng nghe các nhấp chuột trên toàn bộ vùng chứa danh sách. Khi một sự kiện nhấp chuột xảy ra trên
danh sách, việc kiểm tra được thực hiện để đảm bảo rằng phần tử được nhấp là
hộp kiểm. Nếu vậy, giá trị của data-key trên phần tử mẹ của hộp kiểm là
được trích xuất và chuyển đến một hàm toggleDone () mới (hiển thị bên dưới), hàm này sẽ
được đặt bên dưới hàm addTodo () .

  

function

toggleDone

< p class = "p"> (

khóa

)

{

// findIndex là một phương thức mảng trả về vị trí của một phần tử

// trong mảng.

const

index

=

todoItems

.

findIndex

(

item

= & gt;

item

.

id

===

Số

(

khóa

));

// Định vị mục việc cần làm trong mảng todoItems và đặt nó đã được kiểm tra

// thuộc tính ngược lại. Điều đó có nghĩa là, `true` sẽ trở thành` false` và ngược lại

// ngược lại.

todoItems

[

index

].

đã kiểm tra

=

!

todoItems

[

index

].

đã kiểm tra

;

renderTodo

(

todoItems

[

index

]);

}

Hàm này nhận khóa của mục danh sách đã được chọn hoặc bỏ chọn
và tìm mục nhập tương ứng trong mảng todoItems bằng cách sử dụng
findIndex
phương pháp. Khi chúng tôi có chỉ mục của mục việc cần làm, chúng tôi cần định vị nó trong
mảng todoItems sử dụng ký hiệu dấu ngoặc. Giá trị của thuộc tính đã kiểm tra trên
sau đó, mục việc cần làm được đặt thành giá trị ngược lại.

Cuối cùng, hàm renderTodo () được gọi với đối tượng todo được truyền vào.
Nếu bạn chạy mã ngay bây giờ và thử kiểm tra một mục, nó sẽ trùng lặp việc cần làm
thay vì đánh dấu mục hiện có.

Để khắc phục điều này, trước tiên, chúng tôi cần kiểm tra xem mục việc cần làm hiện tại có tồn tại trong DOM hay không và thay thế nó bằng nút cập nhật nếu có.
Thay đổi hàm renderTodo () của bạn như hình dưới đây:

  

function

renderTodo

< p class = "p"> (

todo

)

{

const

danh sách

=

tài liệu

.

querySelector

(

' .js-todo-list '

);

// chọn mục việc cần làm hiện tại trong DOM

const

item

=

document

.

querySelector

(

` [data-key = '

$ {

todo

.

id

}

'] `

) ;

const

isChecked

=

todo

.

đã kiểm tra

?

' xong '

:

' '

;

const

nút

=

tài liệu

.

createElement

(

" li "

);

node

.

setAttribute

(

'class'

,

`todo-item

$ {

isChecked

}

`

< p class = "p">);

node

.

setAttribute

(

'data-key'

,

todo

.

id

);

node

.

innerHTML

=

`

& lt; input id = "

$ {

việc làm

< p class = "p">.

id

}

"type =" hộp kiểm "/ & gt;

& lt; label for = "

$ {

việc làm

< p class = "p">.

id

}

"class =" đánh dấu js-tick "& gt; & lt; / label & gt;

& lt; span & gt;

$ {

việc làm

.

text

}

& lt; / span & gt;

& lt; button class = "delete-todo js-delete-todo" & gt;

& lt; svg & gt; & lt; use href = "# delete-icon" & gt; & lt; / use & gt; & lt; / svg & gt;

& lt; / button & gt;

`

;

// Nếu mục đã tồn tại trong DOM

if

(

mục

)

{

// thay thế nó

danh sách

.

ReplaceChild

(

node

,

mục

);

}

else

{

// nếu không thì nối nó vào cuối danh sách

danh sách

.

nối thêm

(

nút

);

}

}

Đầu tiên, mục việc cần làm hiện tại được chọn. Nếu nó tồn tại trong DOM, phần tử sẽ được trả về và sau đó được thay thế. Nếu
mục không tồn tại (như trường hợp của các mục mới), nó sẽ được thêm vào
ở cuối danh sách.

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Xóa các việc cần làm

Tương tự như cách chúng tôi triển khai tính năng cuối cùng, chúng tôi sẽ lắng nghe các nhấp chuột vào
phần tử .js-delete-todo , sau đó lấy khóa của cha mẹ và chuyển nó đi
đến một hàm deleteTodo mới sẽ xóa đối tượng todo tương ứng
trong mảng todoItems gửi mục todo tới renderTodo () để xóa khỏi
DOM.

Đầu tiên, hãy phát hiện khi nào nút xóa được nhấp:

  

const

danh sách

< p class = "o"> =

tài liệu

.

querySelector

(

'. js-todo-list'

);

list

.

addEventListener

(

'click'

,

sự kiện

= & gt;

{

if

(

event

.

target

.

classList

.

chứa

(

'js-tick'

))

{

const

itemKey

=

event

.

target

.

parentElement

.

tập dữ liệu

.

phím

;

toggleDone

(

itemKey

); < / p>

}

// thêm khối `if` này

if

(

sự kiện

.

target

.

classList

.

chứa

(

'js-delete-todo'

))

{

const

itemKey

=

event

.

target

.

parentElement

.

tập dữ liệu

.

phím

;

deleteTodo

(

itemKey

); < / p>

}

});

Tiếp theo, tạo hàm deleteTodo () bên dưới toggleDone () như hình dưới đây:

  

function

deleteTodo

< p class = "p"> (

khóa

)

{

// tìm đối tượng todo tương ứng trong mảng todoItems

const

index

=

todoItems

.

findIndex

(

item

= & gt;

item

.

id

===

Số

(

khóa

));

// Tạo một đối tượng mới với các thuộc tính của mục việc cần làm hiện tại

// và thuộc tính `delete` được đặt thành true

const

todo

=

{

đã xóa

:

true

,

...

todoItems

[

index

]

};

// xóa mục việc cần làm khỏi mảng bằng cách lọc nó ra

todoItems

=

todoItems

.

filter

(

item

= & gt;

item

.

id

! ==

Số

(

key

));

renderTodo

(

todo

); < / p>

}

Hàm renderTodo () cũng cần được cập nhật như sau:

  

function

renderTodo

< p class = "p"> (

todo

)

{

const

danh sách

=

tài liệu

.

querySelector

(

' .js-todo-list '

);

const

item

=

document

.

querySelector

(

` [data-key = '

$ {

todo

.

id

}

'] `

) ;

// thêm khối if này

if

(

việc cần làm

.

đã xóa

)

{

// xóa mục khỏi DOM

item

.

xóa

();

quay lại

}

const

isChecked

=

todo

.

đã kiểm tra

?

' xong '

:

' '

;

const

nút

=

tài liệu

.

createElement

(

" li "

);

node

.

setAttribute

(

'class'

,

`todo-item

$ {

isChecked

}

`

< p class = "p">);

node

.

setAttribute

(

'data-key'

,

todo

.

id

);

node

.

innerHTML

=

`

& lt; input id = "

$ {

việc làm

< p class = "p">.

id

}

"type =" hộp kiểm "/ & gt;

& lt; label for = "

$ {

việc làm

.

id

}

" class = "tick js-tick "& gt; & lt; / label & gt;

& lt; span & gt;

$ {

việc làm

.

text

}

& lt; / span & gt;

& lt; button class = "delete-todo js-delete-todo" & gt;

& lt; svg & gt; & lt; use href = "# delete-icon" & gt; & lt; / use & gt; & lt; / svg & gt;

& lt; / button & gt;

`

;

if

(

item

)

{

list

.

ReplaceChild

(

nút

,

mục

) ;

}

else

{

list

.

append

(

nút

);

}

}

Bây giờ, bạn có thể xóa công việc bằng cách nhấp vào nút xóa.

Xóa việc làm GIF

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Thêm lời nhắc trạng thái trống

Trạng thái trống xảy ra khi không có dữ liệu nào để hiển thị trong ứng dụng. Ví dụ,
khi người dùng chưa thêm việc cần làm (lần sử dụng đầu tiên) hoặc khi người dùng đã xóa
danh sách. Điều quan trọng là phải tính đến trạng thái này khi thiết kế
ứng dụng.

Nhiều ứng dụng sử dụng trạng thái trống để hiển thị lời nhắc cho người dùng biết phải làm gì.
Dưới đây là một ví dụ thực tế về lời nhắc trạng thái trống tốt trông như thế nào:

Trạng thái trống trượt

Khi không có nhiệm vụ nào để hiển thị, chúng tôi sẽ thêm lời nhắc khuyến khích người dùng
để thêm một nhiệm vụ mới. Tính năng này có thể được triển khai chỉ với HTML và CSS.

Chúng tôi sẽ tận dụng bộ chọn CSS : rỗng để
chỉ hiển thị lời nhắc có điều kiện nếu không có mục nào trong danh sách.

Thêm mã sau cho lời nhắc trạng thái trống trong ngăn HTML như được hiển thị
dưới đây:

  

& lt;

main

& gt;

& lt;

div

class

= < / p>

"container"

& gt;

& lt;

h1

class

= < / p>

"app-title"

& gt;

todos

& lt; /

h1

& gt;

& lt;

ul

class

= < / p>

"todo-list js-todo-list"

& gt; & lt; /

ul

& gt;

& lt;! - thêm trạng thái trống vào đây - & gt;

& lt;

div

class

= < / p>

"rỗng-trạng thái"

& gt;

& lt;

svg

class

= < / p>

"checklist-icon"

& gt; & lt;

sử dụng

< p class = "na"> href

=

"# checklist-icon"

& gt; & lt; /

sử dụng

& gt; & lt; /

svg < / p>

& gt;

& lt;

h2

class

= < / p>

"blank-state__title"

& gt;

Thêm việc cần làm đầu tiên của bạn

& lt; / < / p>

h2

& gt;

& lt;

p

class

= < / p>

"blank-state__description"

& gt;

Bạn muốn hoàn thành công việc gì hôm nay?

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt;! - end - & gt;

& lt;

form

class

= < / p>

"todo-form js-form"

& gt;

& lt;

input

tự động lấy nét

gõ < / p>

=

"text"

aria-label

=

"Nhập mục việc cần làm mới"

trình giữ chỗ

=

"Ví dụ: Xây dựng ứng dụng web"

class

=

< p class = "s"> "js-todo-input"

& gt;

& lt; /

form

& gt;

& lt; /

div

& gt;

& lt; /

chính

& gt;

& lt;! - phần còn lại của mã - & gt;

Sau đó, thêm một số kiểu cho trạng thái trống trong CSS của bạn:

  

/ * Thêm kiểu này bên dưới tất cả các kiểu khác * /

.

trạng thái trống

{

flex-direction

:

column

;

align-items

:

center

;

justify-content

:

center

;

display

:

flex

;

}

.

checklist-icon

{

margin-bottom

:

20

px

;

}

.

blank-state__title

,

.

blank-state__description

{

margin-bottom

:

20

px

;

}

Mặc dù điều này có vẻ ổn, nhưng vấn đề là thông báo vẫn tồn tại ngay cả khi
nhiệm vụ đã được thêm vào danh sách. Hành vi dự kiến ​​là để nhắc nhở
biến mất sau khi một việc làm đã được thêm vào và chỉ xuất hiện lại khi không còn nữa
các nhiệm vụ cần hiển thị.

Lời nhắc trạng thái trống không bị ẩn khi tác vụ được thêm

Một chút CSS này sẽ cung cấp cho chúng tôi những gì chúng tôi muốn:

  

/ * Thay đổi `display: flex` thành` display: none` * /

.

trạng thái trống

{

flex-direction

:

column

;

align-items

:

center

;

justify-content

:

center

;

display

:

không

;

}

/ * Thêm kiểu này bên dưới các kiểu khác * /

.

todo-list

:

trống

{

display

:

không

;

}

.

todo-list

:

trống

+

.

trạng thái trống

{

display

:

flex

;

}

Phần tử .empty-state bị ẩn khỏi chế độ xem theo mặc định với display: none
và chỉ xuất hiện khi .todo-list trống. Chúng tôi đang sử dụng
: rỗng bộ chọn để
phát hiện khi nào .todo-list trống và bộ chọn anh chị em ( + ) để nhắm mục tiêu
.empty-state và chỉ áp dụng display: flex khi .todo-list trống.

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Một lỗi nhỏ

Một vấn đề tôi gặp phải khi thực hiện hướng dẫn này là trạng thái trống
sẽ không trở lại chế độ xem khi tất cả các tác vụ hiện có bị xóa.

Ảnh GIF lỗi trạng thái trống

Rõ ràng, một số khoảng trắng vẫn tồn tại trong phần tử .todo-list ngay cả sau khi
các phần tử li con của nó đã bị xóa, vì vậy nó không được coi là trống
và các kiểu được xác định bằng bộ chọn : blank không hoạt động. Để khắc phục lỗi này
vấn đề, chúng tôi cần xóa bất kỳ khoảng trắng nào khỏi phần tử trong JavaScript của chúng tôi
mã số. Sửa đổi hàm renderTodo () như sau:

  

if

(

< p class = "nx"> todo

.

đã xóa

)

{

item

.

remove

();

// thêm dòng này để xóa khoảng trắng khỏi vùng chứa danh sách

// khi `todoItems` trống

if

(

todoItems

.

length

===

0

)

danh sách

.

innerHTML

=

''

;

quay lại

}

Đoạn mã trên giải quyết được vấn đề và ứng dụng hiện hoạt động như mong đợi.

GIF của ứng dụng cuối cùng

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Duy trì trạng thái ứng dụng

Ứng dụng danh sách việc cần làm của chúng tôi đã hoàn thiện khá nhiều vào thời điểm này, nhưng chúng ta hãy thêm một ứng dụng nữa
để làm cho mọi thứ thú vị và thực tế hơn một chút. Hiện tại, một lần
trang được làm mới, tất cả các mục việc cần làm sẽ bị xóa. Hãy ngăn chặn điều này bằng cách
duy trì trạng thái ứng dụng cho trình duyệt
lưu trữ cục bộ .

Thêm dòng này vào đầu hàm renderTodo () của bạn:

  

localStorage

.

< p class = "nx"> setItem

(

'todoItemsRef'

, < / p>

JSON

.

stringify

(

todoItems

));

JSFiddle từ chối quyền truy cập vào localStorage của cửa sổ, vì vậy bạn phải chạy mã cục bộ để kiểm tra phần này của hướng dẫn.

Chỉ các chuỗi có thể được lưu trữ trong localStorage, vì vậy chúng tôi cần chuyển đổi
Mảng todoItems tới một chuỗi JSON trước khi chuyển nó vào setItem
phương pháp này sẽ thêm một mục dữ liệu mới theo khóa được chỉ định.

Mỗi khi hàm renderTodo () được gọi, giá trị của todoItemsRef trong
localStorage sẽ được thay thế bằng giá trị hiện tại của todoItems
mảng. Bằng cách này, mảng và tham chiếu localStorage tương ứng được giữ
đồng bộ.

Bạn có thể kiểm tra điều này bằng cách mở các công cụ dành cho nhà phát triển trình duyệt của mình, điều hướng đến
tab Ứng dụng và theo dõi phần Bộ nhớ cục bộ . Nếu bạn không
sử dụng Chrome, các công cụ dành cho nhà phát triển có thể được tổ chức theo cách khác.

Công cụ dành cho nhà phát triển Chrome hiển thị phần bộ nhớ cục bộ

Bước cuối cùng là hiển thị mọi mục trong danh sách việc cần làm hiện có khi trang
nạp vào. Thêm đoạn mã sau vào cuối ngăn JavaScript:

  

document

.

< p class = "nx"> addEventListener

(

'DOMContentLoaded'

, < / p>

()

= & gt;

{

const

ref

=

localStorage

.

getItem

(

' todoItemsRef '

);

if

(

ref

)

{

todoItems

=

JSON

.

phân tích cú pháp

(

ref

) ;

todoItems

.

forEach

(

t

= & gt;

{

renderTodo

(

t

); < / p>

});

}

});

Khi sự kiện DOMContentLoaded được kích hoạt, chúng tôi tiến hành truy xuất giá trị của
todoItemsRef từ localStorage. Nếu nó tồn tại, phương thức JSON.parse
được sử dụng để chuyển đổi chuỗi JSON trở lại dạng mảng ban đầu và lưu nó vào
todoItems .

Sau đó, renderTodo () được gọi cho mỗi đối tượng todo có trong
mảng. Điều này khiến mọi mục việc cần làm đã lưu sẽ được hiển thị ngay khi trang
tải.

Hãy xả hơi và xem
mã hoàn chỉnh
ở cuối bước này.

Kết luận

Trong hướng dẫn này, chúng tôi đã xây dựng thành công một ứng dụng danh sách việc cần làm cho phép
người dùng để thêm các nhiệm vụ mới, đánh dấu một nhiệm vụ là đã hoàn thành và xóa các nhiệm vụ cũ. Chúng tôi cũng
đã thảo luận về tầm quan trọng của việc tính toán các trạng thái trống khi thiết kế một
ứng dụng, sau đó tiếp tục nói về một vấn đề tiềm ẩn khi sử dụng
Bộ chọn : trống và cách khắc phục.

Cuối cùng, chúng tôi đã thảo luận về việc duy trì trạng thái ứng dụng cho trình duyệt của
localStorage và cách khắc phục những hạn chế của nó bằng cách sử dụng JSON.stringify
JSON.parse . Nếu một phần hoặc đoạn mã không rõ ràng đối với bạn, vui lòng
để lại bình luận bên dưới và tôi sẽ liên hệ lại với bạn sớm nhất có thể.

Cảm ơn bạn đã đọc và chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề để làm danh sách hướng dẫn ứng dụng web

Tự học HTML và code ra cái web đơn giản trong 15 phút

alt

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2021-06-07
  • Đánh giá: 4 ⭐ ( 3714 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như đã hứa với các bạn, mình sẽ dần dần ra mắt các vlog trong series "Trở thành Phun Sờ Nắc sau 3 tiếng".
    Vlog đầu tiên sẽ hướng dẫn các bạn một ngôn ngữ hết sức cơ bản để xây dựng trang web - HTML (Đọc là Hát Tê Mờ Lờ hoặc Ét Tê Em Eo đều được nhé).
    Tụi mình cũng sẽ code một trang web siêu siêu đơn giản nha.

    Danh sách khoá học của Cybersoft: https://bit.ly/codedao-cyber
    Tư vấn khoá học free Cybersoft: https://fb.com/lophocviet
    Nhớ nói được anh Hoàng giới thiệu để được nhận ưu đãi nhé hihi.

    Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Học xong các bạn có thể xem thêm các phần sau:
    - Học HTML trong 15 phút: https://youtu.be/jSyH0HxKQPY
    - Học CSS trong 15 phút: https://youtu.be/DUwx3IdXupU
    - Học JS trong 15 phút https://youtu.be/watch?v=ZIgDYEZl1VE
    - Kết hợp HTML CSS JS https://youtu.be/watch?v=JL2o5qixOPI
    - Code 4 dự án HTML CSS JS https://youtu.be/watch?v=YtYcYRsODmI

    Timestamp:
    00:00 Bắt đầu vlog
    01:30 Giới thiệu ngôn ngữ HTML
    04:20 Bắt đầu viết code HTML, các tag hiển thị thông tin
    09:40 HTML Form, lấy thông tin từ người dùng
    11:25 Tự code web giới thiệu bản thân
    13:30 Giới thiệu CSS kì sau

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer - lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

    html code_cung_code_dao hoc_html_15_phut

HƯỚNG DẪN THIẾT KẾ WEB-APP: 12 BƯỚC CƠ BẢN

  • Tác giả: co-well.vn
  • Đánh giá: 4 ⭐ ( 7907 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, CO-WELL Asia sẽ mang đến hướng dẫn thiết kế web-app để bạn có thể dễ dàng hình dung được quy trình tạo nên loại phần mềm này.

Danh sách việc cần làm khi bắt đầu sử dụng Sapo Web

  • Tác giả: support.sapo.vn
  • Đánh giá: 5 ⭐ ( 9316 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để bắt đầu xây dựng nội dung cho một website bán hàng trước tiên bạn sẽ cần thực hiện các bước để thiết lập được thông tin và cấu hình cơ bản giúp cửa hàng có thể hoạt động và bán hàng.

[Thực hành] Ứng dụng quản lý danh sách khách hàng

  • Tác giả: hocspringmvc.net
  • Đánh giá: 3 ⭐ ( 8443 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn xây dựng ứng dụng web với asp.net core mới nhất 2020

  • Tác giả: xaydungweb.vn
  • Đánh giá: 4 ⭐ ( 3412 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xây dựng ứng dụng web với asp.net core là một trong những keyword được search nhiều nhất trên Google về chủ đề xây dựng ứng dụng web với asp.net core. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn xây dựng ứng dụng web với asp.net core mới nhất 2020.

Ứng dụng web là gì? Những ứng dụng lướt web nhanh nhất

  • Tác giả: www.bkns.vn
  • Đánh giá: 4 ⭐ ( 6222 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ứng dụng web không còn quá xa lạ với người dùng hiện nay. BKNS sẽ gửi đến bạn thông tin về Ứng dụng web là gì? Những ứng dụng lướt web nhanh nhất

Thực hành xây dựng ứng dụng web PHP CRUD – 1

  • Tác giả: tuhocict.com
  • Đánh giá: 3 ⭐ ( 8845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Qua loạt bài học PHP từ đầu đến giờ bạn đã nắm được rất nhiều kiến thức mới. Giờ là lúc chúng ta vận dụng tổng hợp để giải quyết một bài toán quản lý (hơi

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Độ dài mảng Python - python kiểm tra độ dài mảng

By ads_php