Use native js to complete a todoList

Because at the interface, time is somewhat sufficient. Thinking about my shitty js, I plan to learn some js-related skills again

It is said that learning js, nine out of ten all start from todoList, of course, I also have to follow the crowd.

Create a new html file and sign it at will. The todo content is mainly stored in [localstorage] , which does not involve the database or anything, which is relatively simple.

I wrote a few boxes very casually, and also wrote css very casually. The html of
the frame part is as follows.

<div class = "main" >
     < div  class = "needToDo" > 
        < input  class = "inp "  type = "text"  id = "inp"  placeholder = "Please enter what you want to accomplish"  placeholder-class = " plas" /> 
        < button  type = "button"  class = "save"  id = "saveData" > save </ button >
    </div>
    <div class="saveContent">
        <ul class="saveUl" id="saveUl">
        </ul>
    </div>
</div>
<div class="finished">
    <p>
        <a class="clearAll" id="clearAll">Empty done </ a > 
    </ p > 
    < ul  class = "finishedUl"  id = "finishedUl" > 
    </ ul > 
</ div >

The upper part is unfinished and the lower part is completed.

The unfinished part has an input box and a confirm button.
Next write the function.
Added features:

saveData.addEventListener('click', function() {
     //Create a new li 
    var dom = document .createElement( 'li' );
     //The content in li is a checkbox check box, a content added by yourself. 
    dom.innerHTML = '<input type = "checkbox"  value=' + inp.value + ' />' +
     '<span>' + inp.value + '</span>' 
    // assembled After html, append to ul 
    //Add li to ul. Here is the applied method
    saveUl.appendChild(dom);
    arrs.push(inp.value)    //arrs here is the arrs obtained from localstorage 
    console .log(arrs)
     //Add the todo written by yourself to the arr array, and then save it in the storage. 
    localStorage.setItem( 'unfinished' , arrs)
    inp.value = ""
})

Here is a point, because this is not like vue, it is a two-way binding, so sometimes after writing and saving, you need to refresh it to see the latest written things

Then, the saved incomplete and completed are displayed on the page.

//unfinished data 
var unfinished = localStorage.getItem( 'unfinished' );
 //completed data 
var finished = localStorage.getItem( 'finished' );
 var arrs = []
 var finishedArrs = [];
     if (unfinished ) {
     //Because it is a string stored in storage, it needs to be split. 
    arrs = unfinished.split( ',' );
     for ( var i = 0 ; i < arrs.length; i++) {
         var dom = document .createElement( 'li' );
         //Split and spliced, displayed on the page 
        dom.innerHTML ='<input type = "checkbox"   value=' + arrs[i] + ' />' +
            '<span>' + arrs[i] + '</span>'
        saveUl.appendChild(dom);
    }
}
if(finished){
    finishedArrs = finished.split(',');
    for (var i = 0; i < finishedArrs.length; i++) {
        var dom = document.createElement('li');
        dom.innerHTML = '<input type = "checkbox" checked   value=' + finishedArrs[i] + ' />' +
            '<span>' + finishedArrs[i] + '</span>'
        finishedUl.appendChild(dom);
    }
}

Next is the completed function. The completed function and the unfinished function are roughly the same. Click the checkbox in front of the unfinished. After selecting, delete this option from the unfinished and add it to the completed.

var checkBoxs = document .getElementsByName( "checkVal" );
 //Add the completion effect, click the checkbox, this item will be added 
 for ( var i = 0 ; i < checkBoxs.length; i++) {
       //Because it is an array, So get the batch time, then get the current checkbox time 
       //then get its parent node, add the letter truncation effect to the parent node, and then delete this from the unfinished and add it to the completed 
       checkBoxs [i].addEventListener( 'change' , function ( event ) {
        var parentLi = event.target.parentNode;
       parentLi.style.textDecoration = "line-through"
       finishedArrs.push(parentLi.innerText)
       for ( var j = 0 ; j < arrs.length; j++) {
         if (arrs[j] == parentLi.innerText) {
             console .log(j)
             // Find out which one is currently selected in the array, Then delete from unfinished and add completed 
            arrs.splice(j, 1 )
            localStorage.setItem( 'unfinished' , arrs)
             //This sentence is to force the page to refresh 
            window .location.reload();
        }
       }
   localStorage.setItem('finished', finishedArrs)
})

}

At the end of the writing, it is almost the same, but there is a problem that I have not figured out.
I added a new project and couldn’t make it complete right away, there should be another way of writing it, but I didn’t think so for the time being. Ha ha

Leave a Comment

Your email address will not be published. Required fields are marked *