Hướng dẫn crud javascript - javascript thô thiển

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.

  
    
    
    
    
    
  
  
    

      

        
Todo
        
What do you want to get done today?
        

          
        
      

      

        

      
    

    http://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 .html

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

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.

https://developer.mozilla.org/vi/docs/Web/JavaScript

https://codesource.io/crud-application-with-javascript/