JavaScript项目实战：构建一个简单的Web应用

本文链接：https://blog.youkuaiyun.com/2301_82242963/article/details/145763354

学习编程的最终目标是能够将所学知识应用到实际项目中。在本篇文章中，我们将通过构建一个简单的Web应用——一个待办事项列表（Todo List），来巩固JavaScript的基础知识和ES6+特性。这个项目将涵盖HTML、CSS和JavaScript的基础知识，并展示如何将它们组合在一起。

项目规划：需求分析

在开始编写代码之前，我们需要明确项目的需求。对于一个待办事项列表应用，基本功能包括：

添加待办事项。
删除待办事项。
显示所有待办事项。
清空所有待办事项。

HTML结构

首先，我们需要定义HTML结构，为应用提供一个基本的骨架。

HTML复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Todo List</h1>
        <input type="text" id="todoInput" placeholder="Add a new task">
        <button id="addButton">Add</button>
        <ul id="todoList"></ul>
        <button id="clearButton">Clear All</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们为应用添加一些基本的样式，使其看起来更美观。

css复制

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    border: none;
    background: #007BFF;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background: #0056b3;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background: #f9f9f9;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

li.completed {
    text-decoration: line-through;
    color: #888;
}

JavaScript逻辑

最后，我们使用JavaScript为应用添加交互逻辑。

JavaScript复制

// script.js
document.addEventListener("DOMContentLoaded", () => {
    const todoInput = document.getElementById("todoInput");
    const addButton = document.getElementById("addButton");
    const todoList = document.getElementById("todoList");
    const clearButton = document.getElementById("clearButton");

    addButton.addEventListener("click", () => {
        const task = todoInput.value.trim();
        if (task) {
            const li = document.createElement("li");
            li.textContent = task;
            li.addEventListener("click", () => {
                li.classList.toggle("completed");
            });
            todoList.appendChild(li);
            todoInput.value = "";
        }
    });

    clearButton.addEventListener("click", () => {
        todoList.innerHTML = "";
    });
});

调试、测试和优化

完成代码后，我们需要进行调试和测试，确保应用能够正常工作。可以尝试以下操作：

添加多个待办事项。
点击待办事项，标记为完成或未完成。
点击“Clear All”按钮，清空所有待办事项。

在测试过程中，可能会发现一些问题，例如输入为空时添加待办事项。针对这些问题，可以添加适当的错误处理逻辑，优化用户体验。

总结

通过构建一个简单的待办事项列表应用，我们巩固了HTML、CSS和JavaScript的基础知识，并展示了如何将它们组合在一起。项目实战不仅帮助我们更好地理解编程概念，还培养了我们解决实际问题的能力。在未来的编程学习中，建议多尝试构建自己的项目，将所学知识应用到实际场景中。这样，你将能够更快地提升编程技能，成为一名优秀的JavaScript开发者。