1. Introduction
JavaScript is undoubtedly a very important language in front-end development. It can be used not only for form validation and dynamic content updating, but also for implementing complex interactive effects and animations. Through JavaScript, web pages become more vivid and interactive. In this article, we will explain in detail how to use JavaScript for web development through a specific web design case, including preparation, basic theoretical knowledge, step-by-step explanation, FAQs, and results sharing.
2. Preparation
Before you start, you need to make sure of the following:
（1）development environment (computer): A text editor (e.g. VS Code) and a browser (e.g. Chrome).
（2）basics: Familiarity with the basics of HTML, CSS and JavaScript.
（3）development tool: Optional development tools such as Live Server (for live preview).
3. Basic theoretical knowledge
Before we get our hands dirty, let's review the theory.
（1）HTML: Used to define the structure and content of a web page.
（2）CSS: Used to control the style and layout of a web page.
（3）JavaScript: Used to realize dynamic effects and interactive functions of web pages.
In this case, we will implement a simple To-Do List. The user can add tasks via input boxes and can check off completed tasks.
4. Step-by-step details
4.1Creating HTML Structures
First, we need to create a basic HTML file with input boxes, buttons and lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" placeholder="Enter a new task">
<button >Add</button>
<ul ></ul>
</div>
<script src=""></script>
</body>
</html>
4.2Adding CSS Styles
Next, we write some basic CSS styles to make the page look nice.
/* */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
margin: 10px 0;
padding: 10px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
{
background-color: #d4edda;
text-decoration: line-through;
}
li button {
background-color: transparent;
border: none;
color: #dc3545;
cursor: pointer;
font-size: 1.2em;
}
li button:hover {
color: #c82333;
}
4.3Writing JavaScript Logic
Finally, we write the JavaScript code to add tasks, delete tasks, and mark tasks as completed.
//
('DOMContentLoaded', () => {
const taskInput = ('taskInput');
const addButton = ('addButton');
const taskList = ('taskList');
// Add Tasks
('click', () => {
const taskText = ();
if (taskText) {
const li = ('li');
= taskText;
// Add Delete Button
const deleteButton = ('button');
= 'Delete';
('click', () => {
(li);
});
// Add Done button
const completeButton = ('button');
= 'Complete';
= '10px';
('click', () => {
('completed');
});
(deleteButton);
(completeButton);
(li);
// Empty the input box
= '';
}
});
// 按下回车键Add Tasks
('keypress', (event) => {
if ( === 'Enter') {
();
}
});
});
5. Frequently Asked Questions
（1）How do I delete a list item?
In JavaScript, you can pass theremoveChild method to delete a list item. First, you need to get the list item element you want to delete, and then call its parent element'sremoveChild Methods.
（2）How do I mark a task as completed?
You can do this by toggling the list item'sclassList to realize it. When the Finish button is clicked, use the method to add or removecompleted Class.
（3）How do I implement pressing the Enter key to add a task?
You can listen to the input box'skeypress event that triggers a click event on the Add button when the Enter key is pressed.
6. Results case sharing
After completing the above steps, you should get a fully functional to-do list. Users can enter a task, click the Add button to add the task to the list, click the Delete button to remove the task, and click the Done button to mark the task as completed.
7. Case code example
Below is the complete code sample, including HTML, CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Content pasted here */
</style>
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" placeholder="Enter a new task">
<button >Add</button>
<ul ></ul>
</div>
<script>
// Content pasted here
</script>
</body>
</html>
8. Conclusion
Through this article, we have detailed how to implement a simple to-do list using JavaScript. From preparation, basic theoretical knowledge to step-by-step details, and then to FAQ and result case sharing, I believe you have mastered the basic method of how to use JavaScript for web development. This case not only demonstrates the power of JavaScript, but also provides you with a reference for practical application. I hope this article is helpful to you, and wish you go farther and farther on the road of front-end development!