JavaScript（四）——实现ToDoList

使用JS实现Todo功能,

原创

已于 2024-03-22 08:54:42 修改 · 912 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #学习

于 2023-06-06 16:39:51 首次发布

本篇文章将向大家介绍利用JS实现ToDo部分功能

实现的功能如下：
1、将用户输入的内容添加到任务中。
2、添加的内容可以删除。
3、可以将完成的实现在前面打勾。

思路梳理

1、输入内容点击添加添加到下面
2、点击删除弹出是否确认删除，点击确认删除可以删除此条任务，点击取消可以取消

代码实现

<div class="container">
    <h1 class="header">Todo List</h1>
    <form class="todo-form" id="todoForm">
        <input type="text" class="todo-input" placeholder="Add a new todo" id="todoInput">
        <button type="submit" class="todo-button">Add</button>
    </form>
    <ul class="todo-list" id="todoList"