DEV Community: ghandicode

Reviewing what I learned from Vanilla JS course

ghandicode — Sat, 10 Dec 2022 18:17:06 +0000

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.

Saving in local storage

ghandicode — Sun, 04 Dec 2022 15:57:25 +0000

In order to save the to-dos in the local storage, I did the following.

I created an empty array.
const toDos = [];

Then, I pushed the newly created to-dos into the empty array.
toDos.push(newTodo);

Note: I saved the newly created to-dos in a variable by bringing the value of what was inputted.
const newTodo = toDoInput.value;

Next, I created a function to set an item in the local storage.

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

-> I used JSON.stringify, because the local storage will save the array as a string if I don't do so. I needed it to be saved in a form of an array, so I had to stringify the array.

Next, I pressed play on the function that I just created.
saveTodos();

Next, I created a variable that has the value of what is in the local storage.
const savedToDos = localStorage.getItem(TODOSKEY);

The important (hard) part!
I created a conditional statement that if there's something saved in the local storage under TODOSKEY, console log.

if (savedToDos !== null) {
    const parsedToDos = JSON.parse(savedToDos);
    console.log (parsedToDos);
    parsedToDos.forEach((item)=> console.log ("worked"));
}

-> if savedToDos is not null,
create a variable that changes the stringified array back into an array.
Then, console log the array.
Then, for each item of the array, console log "worked".

Note:
parsedToDos.forEach((item)=> console.log ("worked"));
will do the same as,

function A(item) {
    console.log("worked")
}

parsedToDos.forEach(A)

** (item) is given for free in javascript!

About .innerText

ghandicode — Sun, 04 Dec 2022 12:51:12 +0000

Today I decided to create a dev blog, because I found something that I wanted to write down as I was studying Javascript.

I hope this is something that future I will be laughing at because it's such a stupid mistake.

So, I wanted to make a delete button right beside a to-do-list created.

function paintTodo(event) {
    const li = document.createElement("li");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(button);
    button.innerText="X";
    li.innerText=event;
}

This will not work, because .innerText removes all of the node's children and replaces it with the text. So, you have to do this instead:

function paintTodo(event) {
    const li = document.createElement("li");
    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;
}

You have to create a separate tag, in this case span, that will handle the to-do-list text. The button will be under li, unaffected by the .innerText=event.