1 line
3.6 KiB
JavaScript
1 line
3.6 KiB
JavaScript
|
var data=localStorage.getItem("todoList")?JSON.parse(localStorage.getItem("todoList")):{todo:[],completed:[]},removeSVG="<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 22 22\" style=\"enable-background:new 0 0 22 22;\" xml:space=\"preserve\"><rect class=\"noFill\" width=\"22\" height=\"22\"/><g><g><path class=\"fill\" d=\"M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z\"/></g><g><g><path class=\"fill\" d=\"M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z\"/></g><g><path class=\"fill\" d=\"M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z\"/></g><g><path class=\"fill\" d=\"M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z\"/></g></g></g></svg>",completeSVG="<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 22 22\" style=\"enable-background:new 0 0 22 22;\" xml:space=\"preserve\"><rect y=\"0\" class=\"noFill\" width=\"22\" height=\"22\"/><g><path class=\"fill\" d=\"M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z\"/></g></svg>";renderTodoList(),document.getElementById("add").addEventListener("click",function(){var a=document.getElementById("item").value;a&&addItem(a)}),document.getElementById("item").addEventListener("keydown",function(a){var b=this.value;("Enter"===a.code||"NumpadEnter"===a.code)&&b&&addItem(b)});function addItem(a){addItemToDOM(a),document.getElementById("item").value="",data.todo.push(a),dataObjectUpdated()}function renderTodoList(){if(data.todo.length||data.completed.length){for(var a,b=0;b<data.todo.length;b++)a=data.todo[b],addItemToDOM(a);for(var a,c=0;c<data.completed.length;c++)a=data.completed[c],addItemToDOM(a,!0)}}function dataObjectUpdated(){localStorage.setItem("todoList",JSON.stringify(data))}function removeItem(){var a=this.parentNode.parentNode,b=a.parentNode,c=b.id,d=a.innerText;"todo"===c?data.todo.splice(data.todo.indexOf(d),1):data.completed.splice(data.completed.indexOf(d),1),dataObjectUpdated(),b.removeChild(a)}function completeItem(){var a=this.parentNode.parentNode,b=a.parentNode,c=b.id,d=a.innerText;"todo"===c?(data.todo.splice(data.todo.indexOf(d),1),data.completed.push(d)):(data.completed.splice(data.completed.indexOf(d),1),data.todo.push(d)),dataObjectUpdated();var e="todo"===c?document.getElementById("completed"):document.getElementById("todo");b.removeChild(a),e.insertBefore(a,e.childNodes[0])}function addItemToDOM(a,b){var c=b?document.getElementById("completed"):document.getElementById("todo"),d=document.createElement("li");d.innerText=a;var e=document.createElement("div");e.classList.add("buttons");var f=document.createElement("button");f.classList.add("remove"),f.innerHTML=removeSVG,f.addEventListener("click",removeItem);var g=document.createElement("button");g.classList.add("complete"),g.innerHTML=completeSVG,g.addEventListener("click",completeItem),e.appendChild(f),e.appendChild(g),d.appendChild(e),c.insertBefore(d,c.childNodes[0])}
|