Jquery开发&BootStrap 实现“todolist项目”

作业题目：实现“todolist项目”

作业需求:

基础需求：85%
参考链接http://www.todolist.cn/
1. 将用户输入添加至待办项
2. 可以对todolist进行分类（待办项和已完成组），用户勾选既将待办项分入已完成组，也可以将已完成变成未完成
3. todolist的每一项可删除和编辑
4. 下方有clear按钮，并清空所有todolist项
5. 使用html、css、js、jquery编写

编码规范需求：15%
1. 代码有相应的注释
2. 程序有文档说明文件（README.md参考：https://github.com/csrftoken/vueDrfDemo）
3. 程序的说明文档必须包含的内容：程序的实现的功能、程序的启动方式、程序的运行效果
4. 程序设计的流程图
(可以参考：https://www.processon.com/view/link/589eb841e4b0999184934329)

程序目录划分：

Jquery开发&BootStrap 实现“todolist项目”

css:样式
js:js
ToDoList.html：网站
README.md:说明文档

实现效果：

Jquery开发&BootStrap 实现“todolist项目”

总结：

体会到了数据渲染视图，数据驱动视图，需要多练习。

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>ToDoList-最简单的待办事项列表</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!--头部栏 -->
    <header>
        <section>
            <form action="javascript:void(0);" id="form">
                <label for="title">ToDoList</label>
                <input type="text" name="title" id="title" placeholder="添加ToDo">
            </form>
        </section>
    </header>
    
        
    <!-- 中间 -->
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <!-- 脚部栏 -->

    <footer>
        路飞学城todolist.cn <a href="javascript:;">clear</a>
    </footer>

    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    
    


</body>
</html>

View Code