하루 하루

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

IT/Web

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

san_deul 2020. 5. 14. 15:01

3-5 Making a To Do List part One

www.youtu.be/YD1yDErhMa4

<!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-form form">
      <input type="text" placeholder=" What is your name">
    </form>
    <h4 class= "js-greetings grettings"></h4>
    <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';

function paintToDo(text){
  console.log(text);
  const li = document.createElement("li");

  /*delete 버튼 생성 */
  const delBtn = document.createElement("button");
  delBtn.innerText = "X";

  const span = document.createElement("span");

  span.innerText =text;
  li.appendChild(span);
  li.appendChild(delBtn);
  toDoList.appendChild(li);

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

  }
}

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

init();
저작자표시 비영리 변경금지

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

[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 13  (0) 2020.05.14
[노마드코더] 초보자를 위한 바닐라 자바스크립트 - 12  (0) 2020.05.14
자바스크립트와 웹 프론트엔드 - 5  (0) 2020.05.14
자바스크립트와 웹 프론트엔드 - 4  (0) 2020.05.14
자바스크립트와 웹프론트엔드 - 3  (0) 2020.05.14
'IT/Web' Related Articles more
Comments