노마드코더 실습 코드 (7강)

yiseonline·2023년 5월 9일
js노마드코더
0

nomadCoder

목록 보기
6/8
post-thumbnail

7.0 Set up

Todo List 만들기

-last code-

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

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
}

toDoForm.addEventListener("submit",handleToDoSubmit);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <form class="hidden" id="login-form">
            <input required maxlength="15" type="text" placeholder="What is your name?"/>
            <input type="submit" value="Log In"/>
        </form>
        <h2 id = "clock">00:00:00</h2>
        <h1 id="greeting" class="hidden"></h1>
        <form id = "todo-form"> <!--form 추가됨-->
            <!-- 입력 form 만들어줌 -->
            <input type="text" placeholder="Write a To Do and Press and Enter" required/>
        </form>
        <ul id="todo-list"></ul> <!-- list -->
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <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>

7.1 Adding ToDos

<완성화면>

-last code- 

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

function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    toDoLlist.appendChild(li);
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit",handleToDoSubmit);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <form class="hidden" id="login-form">
            <input required maxlength="15" type="text" placeholder="What is your name?"/>
            <input type="submit" value="Log In"/>
        </form>
        <h2 id = "clock">00:00:00</h2>
        <h1 id="greeting" class="hidden"></h1>
        <form id = "todo-form"><!-- 입력 form 만들어줌 -->
            <input type="text" placeholder="Write a To Do and Press and Enter" required/>
        </form>
        <ul id="todo-list"></ul> <!-- list -->
        <div id="quote">
            <span></span>
            <span></span>
        </div>
        <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>

todo list는 써지긴 하는데 삭제하는 것과 새로고침하면 없어지는게 문제!
-> 이거를 다음 강의때 하신다 함.

7.2 Deleting to Dos

삭제 버튼 만들기
무슨 to do의 버튼을 눌렀는지 알려주기
to do 삭제 시키기

  1. 삭제 버튼 만들기 & 무슨 to do의 버튼을 눌렀는지 알려주기

함수를 생성함

function deleteToDo(event)
{
    console.dir(event.target.parentElement.innerText);
}```
삭제 버튼을 누르는 이벤트를 타게팅하고 그걸 innerText로 출력해주기


원래 함수에도 몇개 추가가 되었음
```Javascript
function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(button); //span을 li에 추가
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

const button = document.createElement("button");
button을 추가해주었고
button.innerText="X"; 삭제 버튼 이여서 X로 표시해줌
button.addEventListener("click",deleteToDo); 이벤트를 나타내기 위해 click하는 eventListner 삽입
li.appendChild(button); button을 li에 추가

하지만 나한텐 문제가 하나 있음..

ㄴ 왜 새로고침 하면 저 text X가 안사라지고 계속 저따구로 뜨냐???

  1. to do 삭제 시키기

-last code-

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

const toDos = [];

function deleteToDo(event)
{
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    li.appendChild(button); 
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit",handleToDoSubmit);

7.3 Saving To Dos


ㄴ toDos를 saving 하려면 local Storage에 저장해야한드아 

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    toDos.push(newTodo); //push newTodo to toDos array
    paintToDo(newTodo); //toDo를 화면에 그리기
    saveToDos();
}

ㄴ 그래서 함수 안에 몇개 더 추가 되었당
toDos.push(newTodo); -> toDos 배열에 newTodo를 push 해줌
saveToDos(); -> 저장하는 함수 실행 !

하지만 여기서 중요한 점은 string으로 newTodo를 바꿔서 push 해야한다는 것이다

이럴 때 쓰이는 것이 아래와 같은 것이다.
JSON.stringify() -> js의 어느 것이든 string으로 바꿔준다 !

-last code-

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

const toDos = [];

function saveToDos()
{
    localStorage.setItem("todos",JSON.stringify(toDos)); //local storage에 toDos 집어넣기
}

function deleteToDo(event)
{
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    li.appendChild(button); 
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    toDos.push(newTodo); //push newTodo to toDos array
    paintToDo(newTodo); //toDo를 화면에 그리기
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);


ㄴ결과 화면 (string)으로 바껴서 들어간다 ..!

7.4 Loading To Dos part One

localStorage.getItem("todos") -> todos를 localStorage에 갖기
JSON.parse(localStorage.getItem("todos"))-> parse 하면 array로 바꿔준다 = todos를 array로 바꿔준다

forEach -> function 실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌


ㄴ 난 왜 자꾸 오류가 뜰까..?
진짜 짜증나죽겠다 .. 내일 다시 해봐야지 !!

-last code- 

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

const TODOS_KEY = "todos";

const toDos = [];

function saveToDos()
{
    localStorage.setItem("todos",JSON.stringify(TODOS_KEY)); //local storage에 toDos 집어넣기
}

function deleteToDo(event)
{
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    li.appendChild(button); 
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    toDos.push(newTodo); //push newTodo to toDos array
    paintToDo(newTodo); //toDo를 화면에 그리기
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //localStorage에 todos 받기 

if(savedToDos!==null){ //sometimes null이 나오기 때문에
    const parsedToDos =  JSON.parse(savedToDos); // array로 바꾸기
    console.log(parsedToDos);
    parsedToDos.forEach((item) => console.log("this is the turn of ",item)); 
    //function 안 만들고 한줄로 실행시켜줌
    //forEach = function실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌
}

7.5 Loading TO Dos part Two


내가 썼던 toDo 들이 저장이 된다 !!
하지만 내가 abc를 쓰고 그 다음에 def를 쓰고 새로고침 하면 abcdef가 나오는 것이 아니라 def 만 나오는 문제 발견 

if(savedToDos!==null){ //sometimes null이 나오기 때문에
    const parsedToDos =  JSON.parse(savedToDos); // array로 바꾸기
    parsedToDos.forEach(paintToDo); 
    //function 안 만들고 한줄로 실행시켜줌
    //forEach = function실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌
}

forEach를 수정해주었음

-last code-

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

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos()
{
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //local storage에 toDos 집어넣기
}

function deleteToDo(event)
{
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newTodo)
{
    const li = document.createElement("li"); //create li
    const span = document.createElement("span"); //create span
    span.innerText = newTodo; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    li.appendChild(button); 
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    toDos.push(newTodo); //push newTodo to toDos array
    paintToDo(newTodo); //toDo를 화면에 그리기
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //localStorage에 todos 받기 

if(savedToDos!==null){ //sometimes null이 나오기 때문에
    const parsedToDos =  JSON.parse(savedToDos); // array로 바꾸기
    toDos = parsedToDos; //이전꺼 까지 저장해주기
    parsedToDos.forEach(paintToDo); 
    //function 안 만들고 한줄로 실행시켜줌
    //forEach = function실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌
}

수정한 코드들 !!

if(savedToDos!==null){ //sometimes null이 나오기 때문에
    const parsedToDos =  JSON.parse(savedToDos); // array로 바꾸기
    toDos = parsedToDos; //이전꺼 까지 저장해주기
    parsedToDos.forEach(paintToDo); 
    //function 안 만들고 한줄로 실행시켜줌
    //forEach = function실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌
}

toDos = parsedToDos; //이전꺼 까지 저장해주기 -> 전에 꺼까지 저장된 리스트가 새로고침하면 불러와지게 수정

7.6 Deleting To Dos part One

아니 잠만 근데 왜 나는

왜 name 입력 창은 안뜨냐??!!

Date.now() -> 밀리초(ms)를 주는 함수 => 우리에게 랜덤 수를 준다고 보면 됨


이제 text로 안받고 object로 받도록 수정했으요

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    }
    toDos.push(newTodoObj); //push newTodo to toDos object
    paintToDo(newTodo); //toDo를 화면에 그리기
    saveToDos();
}```
ㄴ 이거에서 
```js
 const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    }

ㄴ> 이렇게 객체 생성하고
toDos.push(newTodoObj); //push newTodo to toDos object
object를 push 해주면 된당

갑자기 왜이러냐? 하............짜증나

ㅎㅎ 됐다
paintToDo 함수에 newTodo를 넣었어야ㅑ했는데 newTodoObj를 넣었음 ㅋ

function deleteToDo(event)
{
    const li = event.target.parentElement;
    console.log(li.id);
    li.remove();
}```
ㄴ `console.log(li.id);` 요거 하나 추가했음

-last code-
```js
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("#todo-form input");
const toDoLlist= document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos()
{
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //local storage에 toDos 집어넣기
}

function deleteToDo(event)
{
    const li = event.target.parentElement;
    console.log(li.id);
    li.remove();
}

function paintToDo(newTodo) //object 받기
{
    const li = document.createElement("li"); //create li
    li.id=newTodo.id;
    const span = document.createElement("span"); //create span
    span.innerText = newTodo.text; //put some text(=newTodo) inside the span 
    const button = document.createElement("button");
    button.innerText="X"; //change button text
    button.addEventListener("click",deleteToDo);
    li.appendChild(span); //li는 span이라는 자식을 가짐 (put span into li)
    li.appendChild(button); 
    toDoLlist.appendChild(li); //li를 todolist에 추가
}

function handleToDoSubmit(event)
{
    event.preventDefault();
    const newTodo = toDoInput.value; //input의 현재 value를 새로운 변수에 복사
    toDoInput.value=""; //입력 칸 비우기
    const newTodoObj = {
        text:newTodo,
        id:Date.now(), //each li item 을 구별하기 위해
    };
    toDos.push(newTodoObj); //push newTodo to toDos object
    paintToDo(newTodoObj); //toDo 객체를 화면에 그리기
    saveToDos();
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY); //localStorage에 todos 받기 

if(savedToDos!==null){ //sometimes null이 나오기 때문에
    const parsedToDos =  JSON.parse(savedToDos); // array로 바꾸기
    toDos = parsedToDos; //이전꺼 까지 저장해주기
    parsedToDos.forEach(paintToDo); 
    //forEach = function실행시켜 주는데 array에 있는 각각의 element에 실행시켜줌
}

7.6 Deleting To Dos part Two

parsedToDos.forEach(paintToDo);
-> (중요!!) forEach 함수는 이 paintToDo를 parsedToDos 배열의 요소마다 실행함, forEach는 paintToDo를 기본적으로 실행함 & 각각의 item을 주고 그 item이 object가 되는 거다!

filter 함수

function sexyFilter()
{
    
}
[1,2,3,4].filter(sexyFilter)

배열의 요소들에게 모두 filter함수 안에 있는 함수를 적용시켜주는 것
위에 같은 예시에서는 1,2,3,4에게 모두 sexyFilter 함수가 적용된다

sexyFilter(1)
sexyFilter(2)
sexyFilter(3)
sexyFilter(4)

ㄴ 이런 식으루




ㄴfilter만 주구장창 콘솔로 연습함

7.7 Deleting To Dos part Three

list 하나 지워도 4개가 남는 문제 발생 !

function deleteToDo(event)
{
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
    //우리가 클릭한 li.id와 다른 toDo는 남겨두고 싶음
    //li.id = string type but toDo.id = number type
    saveToDos();
}

3,4번째 코드를 수정함
지운건 remove하고 다른 toDo들은 남기면서 마지막에 나머지들은 save하게

..근데 왜 맨 위에 text X는 안사라지는거냐 !!!!

profile
yiseonline
이전 포스트

노마드코더 실습 코드 (6강)

다음 포스트

노마드 코더 실습 코드 (8강)

0개의 댓글