项目实战 - WDPHP云市场

搭建一个TodoList应用是一个很好的练习项目，可以帮助你熟悉JavaScript的基础知识和DOM操作。下面是一个简单的教程，帮助你完成这个项目：

创建HTML文件首先，创建一个HTML文件，用于显示TodoList应用的界面。在文件中添加一个输入框用于输入待办事项，并添加一个按钮用于添加待办事项。同时，在页面中添加一个空的ul元素用于显示待办事项列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList App</title>
</head>
<body>
    <h1>TodoList App</h1>
    <input type="text" id="todoInput">
    <button id="addTodoBtn">Add Todo</button>
    <ul id="todoList"></ul>

    <script src="app.js"></script>
</body>
</html>

创建JavaScript文件在同一目录下创建一个名为app.js的JavaScript文件，用于编写TodoList应用的逻辑。在该文件中，我们需要实现以下功能：

获取输入框和按钮的元素
监听按钮的点击事件
在点击按钮时，创建一个新的li元素，并将输入框中的值添加到li元素中
将新创建的li元素添加到ul元素中

const todoInput = document.getElementById('todoInput');
const addTodoBtn = document.getElementById('addTodoBtn');
const todoList = document.getElementById('todoList');

addTodoBtn.addEventListener('click', () => {
    const todoText = todoInput.value;
    if (todoText.trim() !== '') {
        const todoItem = document.createElement('li');
        todoItem.textContent = todoText;
        todoList.appendChild(todoItem);
        todoInput.value = '';
    }
});

运行项目将HTML文件和JavaScript文件保存在同一目录下，并在浏览器中打开HTML文件，你就可以看到一个简单的TodoList应用了。你可以输入待办事项，并点击添加按钮将其添加到待办事项列表中。

这是一个非常简单的TodoList应用，你可以根据自己的需求进行扩展和改进。你可以添加删除待办事项、标记已完成的待办事项等功能，来进一步完善这个项目。希望这个教程对你有所帮助，祝你顺利完成这个项目！