오늘은 노마드코더 강의를 수강한지 벌써 여섯 번째 날입니다.
#7.0 (Setup) & #7.1 (Adding ToDos)
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Momentum</title>
</head>
<body>
<form class="hidden" id="login-form">
</form>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form"> <!--form to type the todos-->
<input type="text" placeholder="Write a To Do and Press Enter" required />
</form>
<!--list to write the todos-->
<ul id="todo-list">
<!--we are going to be creating <li>s from the javascript-->
</ul>
<h2 id="clock">00:00:00</h2>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script>
</body>
</html>javascript code (we are able to write new todos but we are not able to delete them)
const toDoForm = document.getElementById("todo-form");
//const toDoInput = document.getElementById("#todo-form input");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
//li has a child called span, we want to put <span> inside the <li>
li.appendChild(span);
//inside <span></span> will be the text of newToDo
span.innerText = newToDo;
//put the <li> and <span> inside the <ul>
toDoList.appendChild(li);
}
//javascript will give the first event that happend as an argument
function handleToDoSubmit(event){
event.preventDefault();
//newToDo represents the value of the input before we empty the input
const newToDo = toDoInput.value;
toDoInput.value="";
//call the function painToDo will the value of the input
paintToDo(newToDo);
}
toDoForm.addEventListener("submit",handleToDoSubmit);#7.2 (Deleting To Dos)
javascript code to delete the todos
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
//when clicked the button, delete todo
function deleteToDo(event){
//we don't know which button was clicked so we are specifying to see which button was clicked
const li = event.target.parentElement;
li.remove();
}
/*we want to do
<ul>
<li>
<span> todo1 </span>
<button>X</button>
</li>
</ul> */
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
//create a button shaped X
const button = document.createElement("button");
button.innerText ="X";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
//want to add the button inside the <li>
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value="";
paintToDo(newToDo);
}
toDoForm.addEventListener("submit",handleToDoSubmit);#7.3 (Saving To Dos)
how to save todos in the local storage - javascript code
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
//creating an array
const toDos = [];
function saveToDos(){
//local storage does not allow saving arrays, but only strings
//JSON.stringify will take whatever javascript code and turn that into a string
localStorage.setItem("todos",JSON.stringify(toDos));
}
function deleteToDo(event){
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText ="X";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value="";
//push the newToDo (the input) to the array toDos
toDos.push(newToDo);
//disply on the screen
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit",handleToDoSubmit);#7.4~7.5 (Loading To Dos)
first way of writing a javascript code to load todos
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
//make the key to not make mistakes
const TODOS_KEY ="todos";
const toDos = [];
function saveToDos(){
localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}
function deleteToDo(event){
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText ="X";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value="";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit",handleToDoSubmit);
function sayHello(item){
// if i write a, b, c, then it will display this is the turn of a, this is the turn of be, this is the turn of c
console.log("this is the turn of", item);
}
const savedToDos = localStorage.getItem(TODOS_KEY);
//savedToDos could be null if there is nothing in the local storage
if(savedToDos !==null){
//turn the strings to an array
const parsedToDos = JSON.parse(savedToDos);
//for each items in the array Todos we will run the function sayHello
parsedToDos.forEach(sayHello);
}shorter way to write the javascript code
if(savedToDos !==null){
const parsedToDos = JSON.parse(savedToDos);
parsedToDos.forEach((item)=> console.log("this is the turn of",item));
}when we refresh the page, the todos in saved in the local storage is also refreshed, so we want to keep them
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY ="todos";
//change the const to let so the array can be accumulative
let toDos = [];
function saveToDos(){
localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}
function deleteToDo(event){
const li = event.target.parentElement;
li.remove();
}
function paintToDo(newToDo){
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newToDo;
const button = document.createElement("button");
button.innerText ="X";
button.addEventListener("click",deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event){
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value="";
toDos.push(newToDo);
paintToDo(newToDo);
saveToDos();
}
toDoForm.addEventListener("submit",handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
if(savedToDos !==null){
const parsedToDos = JSON.parse(savedToDos);
//restore the previous todos
toDos=parsedToDos;
//call the function painToDo for each input in the local storage, displaying everything inside the local storage
parsedToDos.forEach(paintToDo);
}