JavaScript - toDoList(할일 목록 만들기)

⏬ HTML 준비 코드

<form id="todo-form">
		/* 할 일을 적을 입력칸*/
        <input type="text" placeholder="Write To do list and Press Enter" required>
    </form>
    <ul id="todo-list">
    /* 적은 입력이 저장되는 출력칸*/
    </ul>

 ⏬JS 코드

🔆각 요소 값 변수에 저장 및 입력한 값을 담을 배열 생성

//입력 폼
const toDoForm = document.querySelector('#todo-form')
//입력
const toDoInput = toDoForm.querySelector('input')
//출력할 ul요소
const toDoList = document.querySelector('#todo-list')

/**localstorage에는 오직 text만 저장 가능하다. */
let toDos = [];

/*자주 사용하는 단어(상수)는 오타를 치지 않도록 변수에 담아서 사용한다.*/
const TODOS_KEY = "todos";

🔆원하는 내용을 submit할 때 발생할 이벤트(function)

function handleToSubmit(event) {
    event.preventDefault();                         //모든 이벤트 중단
    const newTodo = toDoInput.value;                //input의 내용을 담은 newTodo
    const newTodoObj = {                            //각 입력을 구분하기 위해 text와 id를 함께 담음
        text:newTodo,
        id:Date.now(),                              //Date.now는 밀리세컨단위로 현재 시간을 알 수 있다.
    };
    toDos.push(newTodoObj);                         //할일 목록을 배열에 담음
    toDoInput.value="";                             //내용 초기화
    paintToDo(newTodoObj);                          //화면에 출력
    saveToDos();                                    //배열을 저장

}
//입력form에서 submit 이벤트가 발생하는 경우 handleToSubmit함수 실행
toDoForm.addEventListener("submit",handleToSubmit);

 

🔆해당 입력 내용을 배열에 저장하고 출력하는 함수(LocalStorage를 사용)

🔆삭제버튼을 리스트의 각 내용마다 버튼형식으로 추가

🔆개발자 도구 > 애플리케이션 > LocalStorage에서 확인할 수 있습니다.

🔆임시적으로 값을 보관하는 장소

function paintToDo(newTodo) {
   const li = document.createElement('li');         //li요소를 불러옴         
   li.id = newTodo.id;                              //li의 id 는 newTodo.id;
   const span = document.createElement('span');     //span의요소를 불러옴
   li.appendChild(span);                            //li에 span추가
   const button = document.createElement('button'); //button요소를 불러옴
   button.innerText="❌";                           //button내용 추가
   button.addEventListener("click",deleteToDo)      //button클릭시 deleteToDo가 수행됨
   li.appendChild(button);                          //버튼을 li에 추가
   span.innerText=newTodo.text;                     //span의 내용은 newTodo에서 입력한 텍스트
   toDoList.appendChild(li);                        //toDolist(ul)에 li를 추가
}

function saveToDos() {
    /** JSON.stringify(값) : 어떤 object든 String으로 바꿔준다. 
     * 반대로 JSON.parse() 는 어떤 문자열을 javascript가 사용할 수 있는 내용으로 바꿔준다.
     * 예시 : JSON.parse(localStorage.getItem("todos")) >> 결과값 ["a","b","c"]
     * 
    */
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos));
}

 

🔆원치 않는 내용을 삭제할 함수

function deleteToDo(event) {
   const li = event.target.parentElement;           //누른button의 부모요소인 li를 불러온다.
   toDos= toDos.filter(todo => todo.id != parseInt(li.id));
   li.remove();                                     // li를 제거
   saveToDos();

}