Ở bài viết trước mình đã sử dụng React JS để xây dựng ứng dụng To Do List. Hôm này mình sẽ sử dụng Javascript thuần để xây dựng ứng dụng ToDoList. Dự định của mình là sẽ xây dựng một series bài viết về việc xây dựng ứng dụng To Do List bằng các công nghệ khác nhau chạy trên nền tảng khác nhau. Ví dụ :

ToDoList App là gì ?

ToDoList App là một ứng dụng  quản lý danh sách các công việc cần được thưc hiện. Đây là ứng dụng đầu tiên mình làm khi mình học bất cứ 1 công nghệ nào mới như Flutter, React, Vue, Node,... Bài viết này mình sẽ xây dựng ứng dụng ToDoList bằng React JS.

Preview ToDoList App

Code HTML :

Code CSS :

Giao diện trên điện thoại :



Giao diện trên desktop :



Cấu trúc project :

Khai báo các constants :

Khởi tạo giá trị cho toDoList:

Ta sử dụng event onload được đặt trong thẻ body để thực hiện việc khởi tạo giá trị cho toDoList. Giá trị khởi tạo được lấy ở localStorage ( nơi lưu các toDoList mà bạn đã thêm trước đó ). Kiến thức về event onload : https://www.w3schools.com/jsref/event_onload.asp

Các hàm thực hiện việc thêm 1 toDo khi có sử kiện click button addToDo:

Hàm nhận biết sự kiện nhấn Enter để thực hiện việc thêm mới 1 toDo:

Hàm cập nhật dataToDoList lưu vào localStorage :

Hàm thực hiện việc thêm mới 1 toDo vào toDoList và lưu vào localStorage:

Hàm thực hiện việc thêm mới 1 Li Element toDo :

Hàm xử lý việc xóa 1 toDo :

Hàm xử lý việc thay đổi trạng thái của 1 toDo :

Chi tiết các File trong Project

index.html :

style.css :

script.js :

Source Code : 

https://github.com/trandinhthangdev/todolist-javascript

Demo :  ...