노마드 코더 JS | #7 To Do List

Computer Science/FrontEnd

노마드 코더 JS | #7 To Do List

토마토. 2022. 2. 25. 16:48

#7.0 Setup 7분

=> 투두리스트 폼

<!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>Document</title>
    </head>
    <body>
        <h2 id="clock">00:00</h2>
        <form class="hidden" id="login-form">
            <input required maxlength="15" type="text" placeholder="What is your name?"/>
            <input type="submit" value="Log In"/>
        </form>
        <h1 class="hidden" id="greeting">Hi</h1>
        <form id="todo-form">
            <input type="text" placeholder="Write a to-do and Press Enter"/>
        </form>
        <ul id="todo-list"></ul>
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <a href="https://tomatolife.tistory.com">Go to my blog</a>
        <script src="js/greeting.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>

step 1. todo.js

// grab html id
const toDoForm=document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); 
const toDoList = document.getElementById("todo-list");
// handle to do submit
// submit 함수의 기본 동작인 새로고침을 막음
function handleToDoSubmit(event){
    event.preventDefault();
    const netTodo = toDoInput.value; // 새로운 변수에 값을 복사하는 것임
    toDoInput.value = ""; // value 칸 지우기
    
}

toDoForm.addEventListener("submit", handleToDoSubmit);

#7.1 Adding ToDos 7분

// grab html id
const toDoForm=document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); 
const toDoList = document.getElementById("todo-list");

// handle to do submit
function paintToDo(newTodo){
    // js 이용해서 list 생성
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

// submit 함수의 기본 동작인 새로고침을 막음
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value; // 새로운 변수에 값을 복사하는 것임
    toDoInput.value = ""; // value 칸 지우기
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

#7.2 Deleting To Dos 9분

=> 클릭을 기다리고 있어야 한다.

function paintToDo(newTodo){
    // js 이용해서 list 생성
    const li = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newTodo;
    const button = document.createElement("button");
    button.innerText = "X";
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

=> delete 버튼 event 기다리기

function deleteToDo(event){
    // parent를 이용해서 삭제한다
    const li = (event.target.parentElement);
    li.remove();
}

#7.3 Saving To Dos 7분

=> save todos

// grab html id
const toDoForm=document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); 
const toDoList = document.getElementById("todo-list");
const toDos = [];

function saveToDos(){
    
    localStorage.setItem("toDos", JSON.stringify(toDos));
}

function deleteToDo(event){
    // parent를 이용해서 삭제한다
    const li = (event.target.parentElement);
    li.remove();
}
// handle to do submit
function paintToDo(newTodo){
    // js 이용해서 list 생성
    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);
}

// submit 함수의 기본 동작인 새로고침을 막음
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value; // 새로운 변수에 값을 복사하는 것임
    toDoInput.value = ""; // value 칸 지우기
    toDos.push(newTodo);
    paintToDo(newTodo);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

=> load todos

어떤 array나 string으로 바꾸어주는 기능

#7.4 Loading To Dos Part One 11분

string을 다시 JavaScript object로 가져올 수 있다.

JSON.parse(string);

if (savedToDos != null) {
    const parsedToDos = JSON.parse(savedToDos);
    console.log(parsedToDos);
}

function마다 실행하도록 설정하기

function sayHello(){
    console.log("Hello");
}

toDoForm.addEventListener("submit", handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos != null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello);
    console.log(parsedToDos);
}

function sayHello(item){
    console.log("Hello", item);
}

toDoForm.addEventListener("submit", handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos != null) {
    const parsedToDos = JSON.parse(savedToDos);
    parsedToDos.forEach(sayHello);
    console.log(parsedToDos);
}

=> 각 아이템에 대하여 function을 실행하도록 해준다.

함수를 실행하지 않고도 같은 작업 가능함

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

javascript ovject를 string으로, string을 object로 바꿀 수 있다.

arrow function을 이용하면 짧게 할 수 있음

#7.5 Loading To Dos Part Two 8분

=> Parse 해준 뒤에, object를 화면에 띄워주고 싶다.

PaintToDo를 바꾸어주면 된다.

=> 예전 것을 없애고 덮어쓰는 문제 발생함

application list가 시작되면, toDosarray가 empty 된다.

let으로 바꿔주고, null이 아닌 경우에 toDos에 parsed 어쩌구를 할당해줘봤다.

#7.6 Deleting To Dos Part One 10분

=> local storage에서 삭제해주어야 한다.

local storage

어떤 item을 지워주어야 하는가?

html의 어떤 element는 알고 있다.

todo text에서 어떻게 삭제해주어야 할까?

id, text를 갖고 있는 todo list를 만들어주기

랜덤 숫자를 return하도록 만들어보자.

// grab html id
const toDoForm=document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); 
const toDoList = document.getElementById("todo-list");
let toDos = [];
const TODOS_KEY = "toDos";

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event){
    // parent를 이용해서 삭제한다
    const li = (event.target.parentElement);
    li.remove();
}
// handle to do submit
function paintToDo(newTodo){
    // js 이용해서 list 생성
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    span.innerText = newTodo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

// submit 함수의 기본 동작인 새로고침을 막음
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value; // 새로운 변수에 값을 복사하는 것임
    toDoInput.value = ""; // value 칸 지우기

    const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    };

    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

function sayHello(item){
    console.log("Hello", item);
}

toDoForm.addEventListener("submit", handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

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

#7.7 Deleting To Dos Part Two 13분

=> paintToDo에서 어떤 일이 일어나는지 이해해야 함

forEach function이 paintToDo를 parsedToDo마다 실행한다.

그러므로 Deleting에서 하면 안된다.

filter를 이용한다.

array에서 지우는 게 아니라, 지우고 싶은 걸 빼고 새 array를 만든다. (.filter)

for 문과 비슷한 역할을 한다.

function sexyFilter(){

}

[1,2,3,4].filter(sexyFilter);

=> id와 같으면 없애고, 다르면 냅두기

#7.8 Deleting To Dos Part Three 5분

=> id가 있는 todo를 지워보자 .

filter function을 이용하면, 새 array를 받아올 수 있다.

// grab html id
const toDoForm=document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); 
const toDoList = document.getElementById("todo-list");
let toDos = [];
const TODOS_KEY = "toDos";

function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event){
    // parent를 이용해서 삭제한다
    const li = (event.target.parentElement);
    toDos = toDos.filter(todo=>todo.id!= parseInt(li.id));
    saveToDos();
    li.remove();
}
// handle to do submit
function paintToDo(newTodo){
    // js 이용해서 list 생성
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    span.innerText = newTodo.text;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo);
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

// submit 함수의 기본 동작인 새로고침을 막음
function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value; // 새로운 변수에 값을 복사하는 것임
    toDoInput.value = ""; // value 칸 지우기

    const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    };

    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

function sayHello(item){
    console.log("Hello", item);
}

toDoForm.addEventListener("submit", handleToDoSubmit);


const savedToDos = localStorage.getItem(TODOS_KEY);

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

2/25에 다 끝내기!!

'Computer Science > FrontEnd' 카테고리의 다른 글

노마드 코더 ReactJS \| #1 Introduction (0)	2022.02.26
노마드 코더 JS \| #8 Weather (0)	2022.02.25
노마드 코더 JS \| #6 Quotes and Background (0)	2022.02.24
노마드 코더 JS \| #5 Clock (0)	2022.02.22
노마드 코더 JS \| #4 Login (0)	2022.02.22

현재글노마드 코더 JS | #7 To Do List

HappyTomatoLife

기록하는 토마토

linked Queue, Expression evaluation, 함수형 언어, 교육상담, react.js, maze problem, REACT, JavaScript, singly linked list, DS, OCaml, Doubly Linked List, SQL, linked stack, binary search, Deque, 반복문, 조건문, linear DS, 자료구조,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

HappyTomatoLife