Job requirements:
Basic needs: 85% of the
reference link http://www.todolist.cn/
1. The user input is added to the to-do item
2. todolist can be classified (to-do items and completed the group), the user will only be checked do item into a group has been completed, the completed may become unfinished
each can delete and edit the todolist 3.
4. there are clear button downward, and clear all the entries todolist
5. html, css, js, jquery prepared coding standard requirements: 15% 1. Code corresponding notes 2. the procedure is documented file (//github.com/csrftoken/vueDrfDemo README.md reference:: HTTPS) content 3. the program documentation must contain : functions implemented program, program start mode, the operating results of the program flowchart 4. programming (refer to: https: //www.processon.com/view/link/589eb841e4b0999184934329)
Program directory division:
css: style
JS: JS
ToDoList.html: Website
README.md: Documentation
Achieve results:
<!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>
css代码：
body { margin:0; padding:0; font-size:16px; background: #CDCDCD; } header { height:50px; background:#333; background:rgba(47,47,47,0.98); } section{ margin:0 auto; } label{ float:left; width:100px; line-height:50px; color:#DDD; font-size:24px; cursor:pointer; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } header input{ float:right; width:60%; height:24px; margin-top:12px; text-indent:10px; border-radius:5px; box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset; border:none } input:focus{outline-width:0} h2{ position:relative; } span{ position:absolute; top:2px; right:5px; display:inline-block; padding:0 5px; height:20px; border-radius:20px; background:#E6E6FA; line-height:22px; text-align:center; color:#666; font-size:14px; } ol,ul{ padding:0; list-style:none; } li input{ position:absolute; top:2px; left:10px; width:22px; height:22px; cursor:pointer; } p{ margin: 0; } li p input{ top:3px; left:40px; width:70%; height:20px; line-height:14px; text-indent:5px; font-size:14px; } li{ height:32px; line-height:32px; background: #fff; position:relative; margin-bottom: 10px; padding:0 45px; border-radius:3px; border-left: 5px solid #629A9C; box-shadow: 0 1px 2px rgba(0,0,0,0.07); } ol li{ cursor:move; } ul li{border-left: 5px solid #999; opacity: 0.5; } li a{ position:absolute; top:2px; right:5px; display:inline-block; width:14px; height:12px; border-radius:14px; border:6px double #FFF; background:#CCC; line-height:14px; text-align:center; color:#FFF; font-weight:bold; font-size:14px; cursor:pointer; } footer{color:#666; font-size:14px; text-align:center; } footer a{ color:#666; text-decoration:none; color:#999; } @media screen and (max-device-width: 620px) {section{ width:96%; padding:0 2%; } } /*响应式 大于620px的时候显示下面的css样式*/ @media screen and (min-width: 620px) {section{ width:600px; padding:0 10px; } }
js代码：
$(function(){ //数据渲染视图,数据驱动视图 //加载数据的方法 function loadData(){ var collection = localStorage.getItem('todo'); if (collection) { return JSON.parse(collection); }else{ return []; } } //保存数据的方法 function saveData(data){ localStorage.setItem('todo',JSON.stringify(data)); } //更新数据 function update(i,key,value){ var data = loadData(); //删除 // var i = parseInt($(this).attr('index')); var todo = data.splice(i,1)[0]; //done-->true todo[key] =value; //替换 data.splice(i,0,todo); saveData(data); load(); } //加载网页的数据 load(); function load(){ var todoCount = 0; var doneCount = 0; var doneStr =''; var todoStr =''; var todoList = loadData(); if (todoList && todoList.length>0) { //有数据 todoList.forEach(function(data,i){ if(data.done){ //已经完成 doneStr +=`<li> <input type="checkbox" index=${i} checked="checked"> <p id='p-${i}' index=${i}>${data.title}</p> <a href="javascript:;">-</a> </li>`; doneCount++; }else{ //正在进行 todoStr +=`<li> <input type="checkbox" index=${i}"> <p id='p-${i}' index=${i}>${data.title}</p> <a href="javascript:;">-</a> </li>`; todoCount++; } $('#donelist').html(doneStr); $('#todolist').html(todoStr); $('#todocount').html(todoCount); $('#donecount').html(doneCount); }) }else{ //无数据 $('#todolist').html(''); $('#donelist').html(''); $('#todocount').html(todoCount); $('#donecount').html(doneCount); } } //添加数据的方法 $('#title').keydown(function(event){ if(event.keyCode ===13){ //获取输入框的值 var val = $(this).val(); if(!val){ alert('please input~') }else{ var data = loadData(); data.unshift({ title:val, done:false, }); //清空input $(this).val(''); //更新一下数据 saveData(data); load(); } } }) //事件代理的方式 删除数据的方法 $('#todolist').on('click','a',function(){ var data = loadData(); var i =$(this).parent().index(); //在数组中删除 data.splice(i,1); saveData(data); load(); }) $('#donelist').on('click','a',function(){ var data = loadData(); var i =$(this).parent().index(); //在数组中删除 data.splice(i,1); saveData(data); load(); }) //更新数据 $('#todolist').on('change','input[type=checkbox]',function(){ //获取li的索引 var i = parseInt($(this).attr('index')); //更新数据 update(i,'done',true); }) //编辑操作 $('#todolist').on('click','p',function(){ // var i =$(this).parent().index(); var i = parseInt($(this).attr('index')); console.log(i);// var title = $(this).html(); var $p=$(this); $p.html(`<input type='text' id='input-${i}' value=${title}>`); //获取焦点 选中 $(`#input-${i}`)[0].setSelectionRange(0,$(`#input-${i}`).val().length); $(`#input-${i}`).focus(); //失去焦点 $(`#input-${i}`).blur(function(){ if ($(this).val().length===0) { $p.html(title); }else{ update(i,'title',$(this).val()); } }) }) })