Momentum clone (part final)

1. todo-list

 

index.html에

<form id="todo-form">
     <input type="text" placeholder="Write a To Do and Press Enter" required/>
 </form>
 <ul id="todo-list"></ul>

위와 같이 form과 list 만듬.

ul은 안에 비워둠. (js로 li 만들것임)

 

 

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

function handleToDoSubmit(event) {
    event.preventDefault();
    console.log(toDoInput.value);
}

toDoForm.addEventListener('submit', handleToDoSubmit);

 

엔터를 누를 떄 마다 빈칸이 되도록 해보자.

 

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
}

""즉 공백으로 값을 대입해주면 엔터를 칠때마다 빈칸이 된다.

 

 

__

 

이제, 새 todo를 입력할때마다 paint해주는 함수를 만들어보자.

즉, html의 list에 하나씩 기재되도록

 

function paintToDo(newTodo) {   
    const list = document.createElement('li');
    list.innerText = newTodo;
    toDoList.appendChild(list);
}

 

이때, li 안에 span안에 넣어야 나중에 삭제하기 편함. 

function paintToDo(newTodo) {   
    const li = document.createElement('li');
    const span = document.createElement('span');
    li.appendChild(span);  // li>span (li의 자식요소로 span을)
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

span도 createElement로 만들고

li.appendChild(span);으로 자식요소로 지정해줌.

 

** 주의 

appendChild 할때

부모.appendChild(자식); 순으로 써야함.

li = 부모 / span = 자식

+) document.body.appendChild(image);도 마찬가지. 지난 회차 참고.

 

https://mywebproject.tistory.com/156

 

지금까지의 결과

todo.js

 

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


function paintToDo(newTodo) {   
    const li = document.createElement('li');
    const span = document.createElement('span');
    li.appendChild(span);  // li>span (li의 자식요소로 span을)
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

toDoForm.addEventListener('submit', handleToDoSubmit);

 

- 우선 지금까지의 코드이다.

우리가 고쳐야 할 것은

 

1. 새로고침하면 ul>li가 사라짐.

- 어디에도 저장을 하지 않았기 때문.

>> 내 생각 : 지난시간 배웠던 localStorage를 이용하나?

paint함수에 local값을 불러와서

addevent 바깥에 한번 더 paint()하지 않을까..?

 

2. todo를 추가할 순 있지만, 삭제까지 하고싶음

- 이것은 버튼(button)으로 span을 지워버리면 될듯.

 

 

 

 

** 삭제 버튼 만들기

 

 li > span + button 구조로 만들어보았다.

const button = document.createElement('button');
li.appendChild(button);
button.innerText = "X";

toDoList.appendChild(li);

추가한 코드는 다음과 같음. (paint함수 아랫부분)

 

li의 하위요소로 appendChild할때

li > span + button 순으로 가게됨.

 

 

 

수정ver.

function paintToDo(newTodo) {   
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.innerText = newTodo;
    const button = document.createElement('button');
    button.innerText = "❌";
    li.appendChild(span); 
    li.appendChild(button);
    toDoList.appendChild(li);
}

 

 button.addEventListener('click', deleteTodo)
 
 function deleteTodo(event) {
    // li 삭제하는 내용
}

 

console.log(event)를 해보면

다양한 속성이 나오는데, 그중에서도

path를 보면 button - li - body - html - ... 과 같이 경로가 나옴.

 

event.target을 하면 방금 클릭한 것의 html 코드를 볼수있음.

<button>❌</button>   
<!-- 이는 paint함수에서 const로 정의한 button = document.createElemment('button') 과 같다. -->

 

__

 

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

** 주의 : 여기서의 li는 paint함수에서의 li와 다름.

함수 안에 있는 변수는 그 함수에서만 되는것...?