JavaScript/예제

javascript to do 리스트 응용 (1) 만들기/삭제/localstorage 저장

고기고기물고기 2022. 4. 3. 17:56

HTML

<body>
    <form id = "todo-form">
        <input type="text" placeholder="write a To Do and press" />
    </form> 
    <script src = "js/todo.js"></script>
</body>

 

 

리스트 만들기

 

 

html 목록 태그 (ul, ol, li)

ul, ol, li 목록을 만들 수 있음 : ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다 : unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다 : definition list..

daeseok94.tistory.com

 

todo.js

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

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

}

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

toDoForm.addEventListener("submit", handleToDoSubmit)

 

  • Input 박스에 추가 원하는 리스트 입력 후 Enter 시 handleToDoSubmit function가 실행된다.
  • createElement(요소):
    1. 자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다.
    2. https://www.codingfactory.net/10436
  • appendChild(요소):
    1. 선택한 요소 안에 자식 요소를 추가합니다.
    2. https://www.codingfactory.net/10436
  • preventDefault() :
    1.  a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
    2.  form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
    3. https://programming119.tistory.com/100

 

 

 

리스트 삭제하기

todo.js

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

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

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    
    button.innerText = "✂";
    button.addEventListener("click", deleteToDo)
    
    li.appendChild(span);
    li.appendChild(button);
    
    span.innerText = newTodo;
    toDoList.appendChild(li);

}

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

toDoForm.addEventListener("submit", handleToDoSubmit)

 

 

  • 추가된 Todo list에 버튼도 같이 추가되게 하여 버튼 클릭 이벤트를 추가해서 클릭 시 deleteToDo function 실행하게 만든 예제 입니다.
  • target.parentElement : 부모를 찾습니다
  • remove : 요소 제거

 

 

※ 윈도우 기준 이모지 단축키는 윈도우 + . 입니다.

 

 

 

리스트 localStorage 저장하기

 

 

todo.js

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){
  const li = event.target.parentElement;
   li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "✂";
    button.addEventListener("click", deleteToDo)
    li.appendChild(span);
    li.appendChild(button);
    span.innerText = newTodo;
    toDoList.appendChild(li);

}

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

toDoForm.addEventListener("submit", handleToDoSubmit)

 

 

JSON.stringift 사용안할 시
JSON.stringift 사용 시

 

 

JSON.stringify() - JavaScript | MDN

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함

developer.mozilla.org