原生JS实现todo-list小项目

最新推荐文章于 2024-09-18 23:52:53 发布

Miever

最新推荐文章于 2024-09-18 23:52:53 发布

阅读量1.4k

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/Miever/article/details/103890249

版权

这篇博客介绍了一个使用原生JavaScript实现的todo-list小项目，旨在锻炼和提升JavaScript的相关技能，包括DOM操作、事件处理和数据处理。项目参考了vue-todo-list的界面，并提供了GitHub链接供查看完整代码。在数据存储方面，作者采用了setInterval()函数而非浏览器存储机制。

摘要由CSDN通过智能技术生成

原生JS实现todo-list小项目

该项目旨在练习和巩固JS的相应知识点，功能有但不仅限于基本DOM操作，事件触发，数据基本处理等。

功能及界面参考：https://nourabusoud.github.io/vue-todo-list/

项目地址：https://github.com/Miever1/todo-list-js

基本效果如图：

具体功能实现

数据存储没有用到浏览器存储，而是运用setInterval()函数。

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Todo list - Miever</title>
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/fonts.css">
</head>

<body>
    <div id='app'>
        <h1>Daily To-Do list manager</h1>
        <div class="todo-warpper">
            <h2>
                <span id="getDay">1</span><br>
                <span id="getDate">2</span>
            </h2>
            <div class="info-box">
                <input id="input-todo" type="text" placeholder="Take the garbage out">
                <button id="btn-add">+</button>
            </div>
            <div>
                <p class="status-free">
                    <img src="./images/beer celebration.svg" alt="">
                    Time to chill! You have no todos.
                </p>
            </div>
            <div>
                <p class="status-busy"></p>
                <ul class="todo-list" id="todolist"></ul>
            </div>
            <div>
                <p class="status"></p>
                <ul class="todo-list archived" id="archived"></ul>
            </div>
            <div class="control-buttons">
                <span id="showComplete-btn">Show Complete</span>
                <s