Introduction
Trong hướng dẫn này, chúng ta sẽ xem xét cách tạo một ứng dụng Crud bằng JavaScript. Chúng ta sẽ tạo một ứng dụng tên Todo. Nó tập trung nhiều hơn vào những người mới học javascript. Ứng dụng đơn giản là thứ phổ biến nhất để xây dựng khi học một ngôn ngữ lập trình mới. Chúng ta cùng bắt đầu:
Required
Bạn cần phải có kiến thức cơ bản Variables, Arrays, Function, and Objects trước khi bắt đầu theo bài hướng dẫn này.
Result
Ở trong hướng dẫn này bạn có thể làm được các việc sau:
- Thêm mới task
- Đánh dấu 1 task đã hoàn thành
- Delete một task đã được thêm mới thành công.
Creating UI
Chúng ta sẽ bắt đầu bằng cách xây dựng giao diện người dùng. Đầu tiên chúng ta cần tạo một file .hmtl
file mà chúng ta sẽ viết tất cả các mã html.
To Do List
Todo
What do you want to get done today?
//index.js
Trong đoạn mã trên là một thẻ meta
html
và một div
với class="container". Bên trong div
chúng ta có một thẻ
html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
1 và một thẻ html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
2. Thể html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
1 có các phần tử đầu vào. phần tywr đầu vào có html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
4 cái mà chúng ta sẽ dùng để nhận giá trị nhập vào của người dùng. Thẻ html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
2 nơi chúng ta hiển thị giá tri người dùng nhập vào sau khi nhấn button html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
6 Chúng ta sẽ tạo style cho html để ứng dụng. Tạo file .css và link nó đến phần thân của file .htmlhtml,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
Add a task
Chúng ta sẽ tạo 1 file .js và link nó đến phần thân của file .html File .js chúng ta sẽ viết mã sẽ kích hoạt thẻ đầu vào để gửi giá trị bất cứ khi nào người dùng thêm tác vụ
const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
Trong đoạn mã trên chúng ta đã khai báo một vài biến hằng số biên snayf có thể sử dụng ở bất kỳ đâu trong file .js Thuộc tính
html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
7 là một phương thức trả về thành phần mà có thuộc tính html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
8. Bạn có thể thấy rằng tất cả các mã chung ta tạo ra đều có một html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
8 cụ thể. const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
0 gửi giá trị sau khi người dùng nhấn button html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
6 const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
2 ngăn chặn việc reload lại trang khi người dùng nhấn button html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
6 để submit html,
body {
margin: 0;
padding: 0;
font-family: "Roboto", sans-serif;
--text-color: #333;
color: var[--text-color];
background-color: #e0f0fd;
}
.container {
text-align: center;
width: 40%;
margin: auto;
color: #181818;
min-height: 90vh;
margin-top: 2%;
}
.todo {
width: 100%;
padding-bottom: 15px;
background: #3366ff;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: #ffffff;
}
h2 {
margin-bottom: 20px;
font-size: 80px;
margin-top: 0;
padding-left: 10px;
}
input {
background: none;
outline: none;
border: none;
border-bottom: 2px solid #ffffff;
color: #ffffff;
padding: 8px;
font-size: 20px;
}
.list-todo {
height: 60vh;
background-color: #ffffff;
overflow-x: scroll;
}
#todo {
padding: 0 10px 0 10px;
}
#todo li {
list-style: none;
font-size: 16px;
width: 100%;
max-width: 100%;
display: flex;
--webkit-display: flex;
align-items: flex-start;
justify-content: space-between;
text-align: justify;
margin-bottom: 15px;
border-bottom: 1px solid #777777;
padding-bottom: 8px;
}
#todo li.completed {
text-decoration: line-through;
}
#todo li.uncompleted {
text-decoration: none;
color: black;
}
#todo li input {
margin-right: 10px;
}
#todo li button {
outline: none;
border: none;
border-radius: 200px;
margin-left: 10px;
background-color: #3366ff;
color: #ffffff;
width: 6%;
height: 5vh;
}
1 chúng ta sẽ call funtion addTodo[].Chúng ta sẽ tạo function addTodo[] chúng ta sẽ call nó mỗi khi người dùng thêm mới task. Trong function chúng ta đã khai báo một biến newTodo là hằng số được gnas giá trị là
const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
5. Biến này chỉ có truy cập trong function vì nó là biến cục bộ.Chúng ta sẽ lưu trữ mảng trong
const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
6 để chúng tôi vẫn có thể truy cập giá trị bất cứ lúc nào.Mark a task as completed
function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
Chúng ta đã tạo một hàm
const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
7 khác. Trong hàm const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
7, trước tiên chúng ta sẽ xóa thẻ đầu vào sau khi người dùng add task. Chúng ta cũng lấy giá trị mà chúng ta đã lưu trữ trong localStorage và lặp qua giá trị này. Tạo thẻ const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
9, function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
0, và sset input tyle là checkbox. Để check nó là checked hay không chúng ta sẽ thêm sự kiện kích hoạt khi checkbox được chọn. Kiểu giá trị đầu vào sẽ có giá trị là function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
1 khi chon nó sẽ trả về function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
2 và ngược lại trả về function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
3 và chúng ta sẽ lưu trữ chúng vào const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
6 function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
5 điều kiện chạy khi người dùng chọn checkbox hoặc bỏ chọn checkbook.Delete an already added task
// create text node
const text = document.createElement["p"];
text.innerText = todoList[i].text;
// create delete button
const button = document.createElement["button"];
button.innerText = "X";
button.addEventListener["click", function [] {
todoList.splice[i, 1];
localStorage.setItem["todos", JSON.stringify[todoList]];
render[];
}];
Tuy nhiên bên trong hàm
const form = document.getElementById["form"];
const input = document.getElementById["input"];
const button = document.getElementById["button"];
const todo = document.getElementById["todo"];
let todoList = [];
form.addEventListener["submit", function [e] {
e.preventDefault[];
addTodo[];
}];
function addTodo[] {
// get input
const newTodo = input.value;
// return if nothing was entered
if [!newTodo] return;
// add the new task to todo list
todoList.push[{
text: newTodo,
completed: false,
}];
// add the todo list to localstorage
localStorage.setItem["todos", JSON.stringify[todoList]];
// render todo list
render[];
}
7, chúng ta có một thẻ P để giữ văn bản và hiển thị lên sau khi người add task mới. Chúng ta tạo một thẻ button và thêm văn bản bên trong “x” nó và chúng tôi muốn khi người dùng nhấp vào nút, nó sẽ xóa một task đã hoàn thành hoặc bất kỳ task nào. Chúng ta đã thêm xử lý xự kiện để kích hoạt button "x" bất cứ khi nào sự kiện nhấp chuột được thực hiện. function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
7 xóa một tacsk vụ từ localStorage và sau đó, chúng t achạy lại hàm. item.appendChild[checkbox];
item.appendChild[text];
item.appendChild[button];
todo.appendChild[item];
input.value = null;
function render[] {
// clear the list
todo.innerHTML = null;
// get the todo list from localstorage
const todos = localStorage.getItem["todos"];
todoList = JSON.parse[todos] || [];
for [let i = 0; i < todoList.length; i++] {
const item = document.createElement["li"];
// create checkbox to update completed state
const checkbox = document.createElement["input"];
checkbox.type = "checkbox";
checkbox.addEventListener["click", function [e] {
todoList[i].completed = e.target.checked;
localStorage.setItem["todos", JSON.stringify[todoList]];
// check if todo item is completed and add appropriate class
if [todoList[i].completed] {
item.classList.add["completed"];
item.classList.remove["uncompleted"];
checkbox.checked = todoList[i].completed;
} else {
item.classList.add["uncompleted"];
item.classList.remove["completed"];
checkbox.checked = todoList[i].completed;
}
}];
}
}
8 nối tất cả các phần tử Html mà chúng tôi đã tạo vào DOM và cũng thu hồi sau đó có thứ tự như hình bên dưới.Conclusion
Trong bài viết này, chúng ta đã có thể xây dựng một ứng dụng to-do đơn giản cho phép người dùng thêm task, đánh dấu task đã hoàn thành và xóa các công task đã hoàn thành.
Tài liệu tham khảo.
//developer.mozilla.org/vi/docs/Web/JavaScript
//codesource.io/crud-application-with-javascript/