Reviewing what I learned from Vanilla JS course

Since there was so much to take in from the course, I'm going to review the To-Do part of the Vanilla JS course by writing them down here.

const toDoForm = document.getElementById("todo-form");
const toDoList = document.getElementById("todo-list");
const toDoInput = document.querySelector("#todo-form input");

<form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter." required/>
    </form>
    <ul id="todo-list"></ul>

First, I made separate variables for form, input, and ul tags in html.

HandleTodoSubmit function:

let toDos = [];
function handleTodoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value="";
    const toDosObj = {
        text: newTodo,
        id: Date.now(),
    };
    toDos.push(toDosObj);
    paintTodo(toDosObj);
    saveTodos();
}

toDoForm.addEventListener("submit", handleTodoSubmit);

Explanation:

toDoForm.addEventListener("submit", handleTodoSubmit);
An EventListener was added to the toDoForm, so that when something is submitted in the form, handleTodoSubmit function plays.

event.preventDefault();
In the function, it prevents the page from refreshing by preventing the default of 'submit'.

const newTodo = toDoInput.value;
It takes the value of toDoInput and puts in the variable newTodo. So the variable holds whatever was inputted in the form.

toDoInput.value="";
Then, the text box has to be emptied, so toDoInput is given the value of "".

const toDosObj = {
text: newTodo,
id: Date.now(),
};
The text of toDosObj will be newTodo (whatever was inputted), and the id of toDosObj will be randomly given by Date.now().

toDos.push(toDosObj);
The toDosObj will be pushed into a new variable, which will save all the To-Dos that was submitted.

paintTodo(toDosObj);

The paintTodo function:

function paintTodo(event) {
    const li = document.createElement("li");
    li.id = event.id;
    const span = document.createElement("span");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(span);
    li.appendChild(button);
    button.innerText="X";
    span.innerText=event.text;
    button.addEventListener("click", deleteTodo);
}

saveTodos();
The saveTodos function will save the let toDos = []; array in the local storage.

The saveTodos function:

const TODOSKEY ="todos";

function saveTodos(){
    localStorage.setItem(TODOSKEY, JSON.stringify(toDos));
}

The saved To-Dos will not only have to save in local storage, but it has to make it appear on the list again when the page refreshes.

This is how it is done:

const savedToDos = localStorage.getItem(TODOSKEY);


if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(paintTodo);
    toDos = parsedToDos;
}

Explanation:

The savedToDos variable has the items that's saved in the local storage.
And if the local storage is not empty, it will call the paintTodo function for each item in the local storage.
The saving part here is explained in detail in the previous post.

toDos = parsedToDos;
At this point, the parsedToDos(the items that's saved in the local storage before) has to be put in the toDos array first before any new To-Dos are submitted.

This is because after the page refreshes, nothing was pushed into the toDos array yet, (the old To-Dos were only saved in the local storage by the function saveTodos, and painted in the li tags by 'parsedToDos.forEach(paintTodo)') so the toDos array is empty. Then, after new To-Dos are submitted in the form, the array will be filled up with only the new To-Dos, which will cause only the new To-Dos to be saved by the function saveTodos.
So, you have to remember to fill in the toDos array with parsedToDos.

Now, you gotta be able to delete the To-Dos that you submitted.
The button tag has an EventListener in the function paintTodo.
button.addEventListener("click", deleteTodo);
So here is the delete function:

function deleteTodo(event) {
    const li = event.target.parentElement;
    toDos = toDos.filter((item)=>item.id !== parseInt(li.id));
    li.remove();
    saveTodos();
}

Explanation:

const li = event.target.parentElement;
The variable li has the information of the To-Do that's supposed to be deleted (button-clicked) by targeting the specific parent element of the To-Do.

toDos = toDos.filter((item)=>item.id !== parseInt(li.id));
Then, the toDos array is filtered to leave only the To-Dos that does not have the same id as the To-Do in variable li.

li.remove();
The To-Do is removed.

saveTodos();
Then, the toDos array has to be saved once more here in order to save only the filtered To-Dos.

That's it for the review of what I learned by creating a chrome app using Vanilla JS. There was a lot more in the course (log-in form, quotes, clock, etc.), but I think the To-Do part is enough for reviewing.