하루 하루

[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 12 본문

IT/Web

[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 12

san_deul 2020. 5. 14. 15:30

3-6 Making a To Do List part Two

www.youtu.be/JEbOaI_0phc

 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Something</title> 
    <link rel="stylesheet" href="style.css" 
  </head> 
  <body> 
    <div class = "js-clock"> 
      <h1 class="js-title"> 
      </h1> 
    </div> 
    <form class = "js-toDoForm">
      <input type="text" placeholder="Write a to do ">
    </form>
    <ul class="js-toDoList">
    </ul>
    <script src="script.js"></script> 
  </body> 
</html>

const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput =  toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");

const TODOS_LS='toDos';
const toDos =[];

function saveToDos(){
  localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
}
function paintToDo(text){
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const span = document.createElement("span");
  const newId = toDos.length + 1;
  delBtn.innerText = "X";
  span.innerText =text;
  li.appendChild(span);
  li.appendChild(delBtn);
  li.id =newId;
  toDoList.appendChild(li);

  const toDoObj = {
    text: text,
    id: newId 
  };
  toDos.push(toDoObj);

}
function handleSubmit(event){
  event.preventDefault(); 
  // preventDefault()는 이벤트를 취소할 수 있는 경우, 
  // 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.
  const currentValue = toDoInput.value;
  paintToDo(currentValue);
  toDoInput.value="";
}
function loadToDos(){
  // 로컬 스토리지에서 load
  const loadedToDos = localStorage.getItem(TODOS_LS);
  if(loadedToDos !== null){ 
    const parsedTodo = JSON.parse(loadedToDos);
    parsedTodo.forEach(function(todo){
      paintToDo(toDo.text);
    })
  }
}

function init(){
  loadToDos(); 
  toDoForm.addEventListener("submit",handleSubmit);
}

init();

 

 

저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

[ JS 33 Concept ] 1. 호출스택  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 13  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 11  (0) 2020.05.14
자바스크립트와 웹 프론트엔드 - 5  (0) 2020.05.14
자바스크립트와 웹 프론트엔드 - 4  (0) 2020.05.14
'IT/Web' Related Articles more
Comments