JS Clone Project [to-do list] - 3, Saving to-do list

Key Functions

1. LocalStorage can only save the text. 

2. pushing item into Array

3. I have tried to set the Storage value in an array form but in text --> used JSON.Stringify

4. Use of JSON.parse --> makes string into JSON format 

5. Use of forEach on each item of an array

6. It is now able to show the toDo list after refreshing the page. 

6. Deletion on the page --> Not able to delete from the localStorage yet. 

const todoForm = document.querySelector("#todo-form");
const todoList = document.querySelector("#todo-list");
const todoInput = document.querySelector("#todo-form input");
let toDos = [];
const TO_DOS = "toDos";

//4. saving toDo list 
function saveToDos(event) {
    //save predefined toDos array.
    localStorage.setItem(TO_DOS, JSON.stringify(toDos));
}


//3. Delete selected todo list 
function deleteTodo(event){
    //We can identify which li called this event by inspecting event.target object. 
    console.log(event.target);
    console.dir(event.target.parentElement.innerText);

    //I designate the selected li element 
    const li = event.target.parentElement;

    //Remove the list
    li.remove();
     
}

//2. Creating HTML element
function paintToDo(newTodo){
    //Desired structure of HTML is 
    // <li> 
    //      <span> lalalal </span>
    //      <button> X </button>
    //</li>


    const list = document.createElement("li");
    list.id = newTodo.id
    
    const span = document.createElement("span");

    span.innerHTML = newTodo.text;

    const button = document.createElement("button");
    button.innerHTML = "X";
    
    //Calls for deleteing selected toDo list function 
    button.addEventListener("click", deleteTodo);

    list.appendChild(span);
    list.appendChild(button);
    todoList.appendChild(list);
}

//1. Make event handler of TO-DO list form
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = todoInput.value;
    //empty the input of the form
    todoInput.value = "";    

    //Create toDo Object 
    const newTodoObj = {
        text:newTodo,
        id :Date.now(),
    }

    //Push new item into to-do list 
    toDos.push(newTodoObj);
    
    //Calling a paint function
    paintToDo(newTodoObj);

    //Calling save toDos function 
    saveToDos();


}


todoForm.addEventListener("submit",handleToDoSubmit);

// function sayHi(item){
//     console.log("Hello!" +  item);
// }

//Retrive saved local storage toDos array
const savedtoDos = localStorage.getItem(TO_DOS);

//check whether savedtoDos are empty or not 
if(savedtoDos !== null) {
    
    const parsedToDos = JSON.parse(savedtoDos);
    //Let the list to stay in the web after refreshing the page. This however still makes problem, writing over the existing 
    //savedtoDos when refreshed. 
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);

}

 

Improvements to be taken. 

• Deleting toDos on only at the page when pressing 'X'

--> To properly delete elements of the toDos array, consideration of duplicate deletion of elements has to be taken.

Ex) If same elements are within the array of toDos[], as ["A","B","A"], when deleting "A", it will delete 2 elements in the array. Therefore, giving an "unique" ID on each element would be one possible way to resolve this problem. 

 

--> How do we give "unique" ID? 

The way that it was suggested was to implement Date.now() which outputs current time in milliseconds. We can create toDo object as the user submits the toDo form, with ID, and text value and push it into predefined toDos [].  

*Note that the toDos has to be in "let" type, so that when the page is refreshed, it has whatever it was inside of localStorage. 

-------------------------------------------------------------------------------------------------------------------------------

New staff learned  

@paintTodo 

• The const "list" which was used to define the document element of <li>, can be used to make its "id" by simply typing "list.id". 

 

@parsedToDos.foreach()

• I have assigned paintTodo as parameter of foreach(), and this would allow calling patinTodo function for each element it has of parsedToDos. The argument of paintTodo() would have each object it was assigned in the parsedToDos.