[JavaScript] 투두리스트 만들기()

 

Step0 ) 기본 설정

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

// javascript
const todoForm = document.querySelector('#todo-form');
const todoList = document.querySelector('#todo-list');

 

Step1 ) 

input 태그인 todoForm이 'submit'되었을 때 작동할 'handleTodoSubmit'이라는 함수를 만든다

function handleToDoSubmit(event){
    event.preventDefault();		//새로고침되지 않게 하기 위해
    const newTodo = todoInput.value;
    todoInput.value="";     //작성 후 엔터 누르면 UI상 input 안이 비어지도록
    paintTodo(newTodo);
}

 

Step2 ) 'handleTodoSubmit' 시 발생하는 일들 중

             '어떻게 보여질지'에 대해 알려주는 'paintTodo' 라는 함수를 만든다

function paintTodo(newTodo){
    const li = document.createElement('li');
    const span = document.createElement('span');
    li.appendChild(span);
    span.innerText = newTodo; 
    todoList.appendChild(li);
}

input창에 작성한 내용 newTodo가 <li><span> </span></li>안에 들어간 형태로

계속해서 추가되는 기능까지 완성하였다 

See the Pen Untitled by Kyoungeun Jo (Joe) (@Kyoungeun-Jo-Joe) on CodePen.

 

 

 

Step3 ) 'delete' button을 만든다

function paintTodo(newTodo){
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.innerText = newTodo;  
    const button = document.createElement('button');    //삭제버튼 생성
    button.innerText = '❌';
    button.addEventListener('click', deleteTodo);		//버튼 클릭시 작동 함수
    li.appendChild(span);
    li.appendChild(button);
    todoList.appendChild(li);
}

클릭하면 'deleteTodo'라는 함수가 작동하는 button을 생성했다 

이 button 또한 input창에 내용이 작성될 때마다 <span>newTodo</span>와 함께 <li> </li> 안에 들어가있게 된다

 

function deleteTodo(event) {
    const li = event.target.parentElement; //삭제하고 싶은 element
    li.remove();
}

 실제 삭제 기능을 가진 'deleteTodo'라는 함수을 채워보자

 

생성되는 'button'은 모두 같은 함수를 실행하고 있다

⚠️ 그러한 여러개의 버튼 중 '어떤 버튼이 클릭'되었는지 알아야한다!

target은 클릭된 HTML element => event.target: <button></button>

parentElement 는 클릭된 element의 부모 => event.target.parentElement: <li></li>

See the Pen delete buttono 추가 by Kyoungeun Jo (Joe) (@Kyoungeun-Jo-Joe) on CodePen.

 

 

 

 

Step4 ) 투두리스트가 브라우저에 저장되도록 한다

(현재상태는 새로고침하면 화면 상 모두 날아감)

4-1. 브라우저에 저장하기

localStorage.setItem() 활용!

 

⚠️ 새로고침하면 여전히 남아있지 않는다

4-2. Input에 입력한 값을 단순 텍스트가 아닌 array["","",..]로 저장하고 싶다면?

=> JSON.stringify 활용

⚠️ 새로고침하면 localStorage에는 남아있지만 화면 상에는 모두 날아가있다

4-3. localStorage에 남아있는 것을 화면에 보여주고 싶다면?

 

하나의 단순한 array 덩어리("[1,2,3,4]")를 JS가 이해할 수 있는 살아있는 array([1,2,3,4])로 만들기

=> JSON.parse 활용

let todos = [];     

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));     
}
const savedTodos = localStorage.getItem('todos');

if (savedTodos !== null) {      
    const parsedTodos = JSON.parse(savedTodos);     
    todos = parsedTodos;        
    parsedTodos.forEach(paintTodo);
}

 

savedTodos가 null이 아니면 todos라는 array가 이전에 저장된 투두를 포함하도록 하고 html상에 보여준다(paintTodo)

 

 

Step5 ) 삭제한 투두가 브라우저에서 삭제되도록 한다

⚠️ 화면 상에서 이미 삭제한 투두도 새로고침하면 다시 복원된다 

=> localStorage에 아직 남아있기 때문! 

 

화면 상에서 삭제를 해도 삭제된 item이 무엇인지 html, JS는 알 수 없다 

= 어떤 todo text를 데이터베이스에서 지워야하는지 모른다

=> todo를 단순 text로 취급하는 것이 아니라, 각자 random id가 부여된 array로 만들고 싶다

{[id: 121212, text="eating"], [id:131313, text="sleeping"]} 이런식..

 

5-1. random id 만들기

Date.now() : 밀리초(ms)를 주는 함수

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

5-2. array에서 무언가를 삭제한다 = 지우고 싶은 item을 제외하고 새로운 array를 만든다(기존 array 변경하는 것 아님)

=> .filter 함수 활용

=> array의 item을 유지하고 싶으면 true를 리턴해야함!

todos.id와 li.id가 같지 않으면 그대로 출력하라

== todos.id와 li.id가 같으면 그 item을 제외하라

function deleteTodo(event) {
    const li = event.target.parentElement; 
    li.remove();
    todos = todos.filter((todos)=>todos.id !== parseInt(li.id));    //li.id는 string이므로 num으로 만들어줌
    saveTodos();
}

 

See the Pen toDoList_done by Kyoungeun Jo (Joe) (@Kyoungeun-Jo-Joe) on CodePen.

 

완성!!

힘들었다....