introduction
In our daily work and life, we often need to deal with all kinds of to-do items. A fully functional and convenient to-do application can greatly improve our efficiency. Today, we will use JavaScript together to implement such an application from scratch. In this process, we will learn how to use JavaScript to operate the DOM, how to implement local storage, and how to design and implement a front-end application with complex functions.
Functional Requirements
Our to-do app will have the following features:
Users can enter new to-do items and add them to the list.
Users can set priority (high, medium, low) for each to-do item.
Users can mark the to-do item as completed or not completed.
Users can delete to-do items.
The application can persistently store user's to-do items, and even if the page is refreshed, data will not be lost.
Technology stack
HTML: The user interface used to build applications.
CSS: User interface for beautifying applications.
JavaScript: Used to implement various functions of applications.
Implementation process
HTML structure
First, we need to use HTML to build the basic structure of the application. Includes an input box for entering new to-dos, a button for adding to-dos, and a list for displaying all to-dos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do application</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<h1>To-do application</h1>
<input type="text" placeholder="Enter a new to-do">
<button >Add to</button>
<ul ></ul>
</div>
<script src=""></script>
</body>
</html>CSS Style
Then, we use CSS to beautify the user interface of the application. Only some key styles are displayed here, and the complete styles can be designed according to your preferences.
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
li {
list-style: none;
padding: 10px;
background-color: #F8F9FA;
margin-bottom: 10px;
}
.completed {
text-decoration: line-through;
opacity: 0.6;
}
JavaScript implementation
Finally, we use JavaScript to implement various functions of the application.
// Get the DOM elementconst newTodoInput = ('newTodoInput');
const addTodoButton = ('addTodoButton');
const todoList = ('todoList');
// Define the to-do objectclass Todo {
constructor(text, priority, completed = false) {
= text;
= priority;
= completed;
}
}
// Add to do('click', () => {
const text = ();
if (text) {
// Assume that the priority is Medium by default const todo = new Todo(text, 'middle');
addTodoToList(todo);
saveTodosToLocalStorage();
= '';
}
});
// Add to do items to the listfunction addTodoToList(todo) {
const listItem = ('li');
= `${} [${}]`;
('todo-item');
// Add a complete button const completeButton = ('button');
= 'Finish';
('click', () => {
= true;
('completed');
saveTodosToLocalStorage();
});
(completeButton);
// Add delete button const deleteButton = ('button');
= 'delete';
('click', () => {
(listItem);
removeTodoFromLocalStorage(todo);
});
(deleteButton);
(listItem);
}
// Load to do items from local storagefunction loadTodosFromLocalStorage() {
const savedTodos = (('todos'));
if (savedTodos) {
(todoData => {
const todo = new Todo(, , );
addTodoToList(todo);
});
}
}
// Save to-do items to local storagefunction saveTodosToLocalStorage() {
const todosData = ().map(listItem => {
const todoText = ('[')[0].trim();
const todoPriority = ('[')[1].split(']')[0];
const todoCompleted = ('completed');
return { text: todoText, priority: todoPriority, completed: todoCompleted };
});
('todos', (todosData));
}
// Remove to-do from local storagefunction removeTodoFromLocalStorage(todo) {
const todosData = (('todos'));
const updatedTodosData = (todoData => !== );
('todos', (updatedTodosData));
// The list needs to be reloaded here to ensure that the interface and data are synchronized = '';
loadTodosFromLocalStorage();
}
// Initialize the applicationloadTodosFromLocalStorage();
Code analysis:
We first define a Todo class to represent to-do items. Each to-do has a text content, a priority, and a flag indicating whether it is completed.
We have added a click event listener to the Add button. When the user clicks the Add button, we create a new Todo object and add it to the list. At the same time, we will save the to-do items to local storage.
In the addTodoToList function, we create a new list item and add it to the to-do list. At the same time, we also added a complete button and a delete button for each list item.
We use local storage to persist the storage of users' to-dos. The loadTodosFromLocalStorage function is used to load todos from local storage, the saveTodosToLocalStorage function is used to save todos to local storage, and the removeTodoFromLocalStorage function is used to delete todos from local storage.
When initializing the application, we call the loadTodosFromLocalStorage function to ensure that the user's to-do items can be loaded from local storage into the interface.
Summarize
Through the above steps, we successfully implemented a feature-rich to-do application using JavaScript. In this process, we not only learned how to operate the DOM using JavaScript, but also how to implement local storage and how to design and implement a front-end application with complex functions.
This is the end of this article about using JS to implement a feature-rich to-do application. For more related JS to-do content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!