javascript--Memory Pee Sign

This is a small web memory note, look like this.

first, how to use

You can use it to record your to-do list, first enter the name of the item you want to add in the taskbar, and click Add item to automatically join the to-do lists.

And then in the list of events. The event can be manipulated, and if it is done, click on the event name and the event will be crossed out (click again to remove the dash). Click on the small fork on the right side of the event and the event will be completely erased.

Second, if the realizationHTML structure:

<div id= "ToDoList" >   <div class= "Todolist-header" > 
CSS:
* {box-sizing:Border-box;}ul, Li, p{margin:0;padding:0;List-style:None;}#todoList{width:80%;Max-width:460px;margin:20px Auto;}. Todolist-header{Background-color:#c7eb62;padding:10px 30px 30px;Color:#434343;text-align:Center;}. Todolist-operation{position:relative;Padding-right:110px;}. Todolist-header input{width:100%;padding:10px;font-size:16px;vertical-align:Middle;}. Todolist-header button{position:Absolute; Right:0;Top:0;width:110px;Border:None;background:#d9d9d9;text-align:Center;font-size:16px;padding:10px;}. Todolist-header Button:hover{Background-color:#bbb;}. todolist-content Li{cursor:Pointer;position:relative;padding:12px 8px 12px 50px;background:#eee;font-size:18px;transition:0.2s;}. Todolist-content Li:hover{background:#ddd;}. Todolist-content li.checked{text-decoration:Line-through;}. Todolist-content Li.checked::before{content:"';position:Absolute;Border-color:#0eb312;Border-style:Solid;Border-width:0 4px 4px 0;Top:10px; Left:16px;Transform:Rotate (45deg);Height:16px;width:7px;}. todolist-content. Close{position:Absolute;Color:#000; Right:0;Top:0;padding:12px 15px 12px 15px;}. todolist-content. Close:hover{Background-color:#f44336;Color: White;}
Javascript(i) Add to-dos
The main process is: Click the Add Task button--Add the pre-set HTML template and the text in the input box into the event list. Finally, empty the text in the input box.
varAddTask = document.getElementById (' Js-add-task '));        varTaskinput = document.getElementById (' add-task-input ')); varTask = document.getelementsbyclassname (' Task '); varClose = Document.getelementsbyclassname (' Close '); varToDoList = Document.queryselector ('. Todolist-content ')); Addtask.onclick=function (){            if(TaskInput.value.length > 0){                varCont = ' <li class= ' task ' > ' + ' <p> ' + taskinput.value + ' </P> ' + ' <span class= ' close ' >x</span&gt ;‘; varElem = document.createelement (' li '); varNewelem =Todolist.appendchild (Elem); Newelem.outerhtml=cont; Taskinput.value= ' '; } Else{alert (' Please enter a task name '); }        };
(b) List of matters
There are two kinds of things that have been handled: 1, click Add Dash. 2. Click to cancel the dash.
Click on the event entry to determine the class attribute of the event item <li> element If it has been marked with checked, and if not, add a check mark.
Since the event object in the event handler uses the actual click Object (event.target), it causes the child elements of the <li> element to be clicked, adding an extra judgment if it is a child element (because <span> is also <li> child element, so make sure the target of the click Is <p>), find its parent element, and then execute the Click event.
Finally, judging click if it is <span>, then delete this event item.
Done!
Todolist.addeventlistener (' click ',function(event) {Switch(event.target.className) { Case' Task checked ': Event.target.setAttribute (' Class ', ' Task ');  Break;  Case' Task ': Event.target.setAttribute (' Class ', ' task checked ');  Break; }                        if(Event.target.nodeName = = ' P '){                Switch(event.target.parentNode.className) { Case' Task checked ':Event.target.parentNode.setAttribute (' class ', ' Task ');  Break;  Case' Task ': Event.target.parentNode.setAttribute (' Class ', ' task checked ');  Break; }            } Else if(Event.target.nodeName = = ' SPAN ') {                 This. RemoveChild (Event.target.parentNode); }        }, false);
 javascript--Memory Pee sign