To do list (1)

7.0 Setup

 

1) add <form> and <input> in html

2) make const toDoForm/toDoList by using getElementById

const toDoForm = document.getElementById("todo-form");

const toDoInput = document.querySelector("#todo-form input")

const toDoList = document.getElementById("todo-list");

 

3) make a function 'handleToDoSubmit' 

 - delete event setting ->  event.preventDefault();

 

4) change the value to empty.

function handleToDoSubmit(event) {

    event.preventDefault();

    const newTodo = toDoInput.value;

    toDoInput.vlaue = "";

}

Just because we empty toDoInput.value doesn't mean that the newTodo is going to be empty

 

5) Execute the function

when event submit occured, funciton handleToDoSubmit will be executed

toDoForm.addEventListener("submit", handleToDoSubmit);

 

6) Bring the input from html

const toDoInput = document.querySelector("#todo-form input")

 = const toDoInput = toDoForm.querySelector("input")

---

7.1 Adding ToDos

 

make function paintToDo

 

2. Problem

1) We're able to add Todo, but cannot delete it.

2)We're not saving them anywhere.

---

7.2 Deleting Todos

1) Create button

const button = document.createElement("button");

button.innerText = "❌";

 

2) Add button to the li

li.appendChild(button);

 

3) Add eventListener to the button

We're getting the information about the event Whcih is useful but doesn't give us many information.

we have to look a target. Target is the html element that is clicked.

All HTML element have parentElement. which is the father of the element that was clicked.

 

function deleteToDo(event) {

    const li = event.target.parentElement;

    li.remove();

}

function paintToDo(newTodo){

 

    const button = document.createElement("button");

    button.innerText = "❌";

    button.addEventListener("click", deleteToDo)

 

---

 

7.3 Saving Todos (localStorage)

1) Create an array

Everytime there is a newTodo going to be painted, I want to push that text into the array

Before I paint the newTodo, I wanna take toDos array and push the newTodos.

And want to put this array to localStorage.

but localStorage can only save 'text'

 

const toDos = []; (make array 1st)

toDos.push(newtoDo); (before paint(newtoDo), we want to push newtoDo into the array)

 

2) Make Function saveToDos.

function saveToDos() {

 localStorage.setItems("todos", toDos);

}

 

*localStorage.setItems("key", value) -> save the value as a "key" into localStorage.

 

3) change the values into a string

use JSON.stringify

 localStorage.setItems("todos", JSION.stringify(toDos));

 

---

2) Load to dos

-> (If we refresh the page, we want to load them and paint them on the page)

 

7.4 Loading To Dos part1

problem : Everytime we refresh, toDos are staying on the localStorage but they don't show on the screens.

 

1) JSON.stringify : change array into a string

    JSON.parse : take the string and make that string into a live array that javascript understand

 

2) forEach : allows you to execute a function for each item on the array.

 function sayhello(item) {

 console.log("this is the turn of", item);

}

 

parsedToDos.forEach(sayHello);

 

<Shorter way - arrow function>

parsedToDos.forEach((item) => console.log ("this is the turn of", item));

 

---

7.5 Loading To Dos part2