티스토리 뷰

개발냥이/자바스크립트(Javascript)

JavaScript_ToDoList

데브캣_DevCat 2022. 7. 15. 12:25

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Momentum App</title>
  </head>
  <body>
    <form class="hidden" id="login-form">
      <input required maxlength="15" type="text" placeholder="what is your name?"></input>
      <input type="submit" value="Log In"></input>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
      <input type="text" placeholder="Write a To Do and Press Enter">
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
      <span></span>
      <span></span>
    </div>
    <div id="weather">
      <span></span>
      <span></span>
    </div>
    <script src="./JS/greeings.js"></script>
    <script src="./JS/clock.js"></script>
    <script src="./JS/quote.js"></script>
    <script src="./JS/background.js"></script>
    <script src="./JS/todo.js"></script>
    <script src="./JS/weather.js"></script>
  </body>
</html>
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
//=const toDoInput = document.querySelector.("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos";

let toDos = [];

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(toDos));
  // JSON.stringify(): JSON 객체를 string으로 바꿈
}

function deleteToDo(event) {
  const li = event.target.parentElement;
  li.remove();
  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
  saveToDos();
}

// 새로운 todo가 입력될 때 list와 button을 HTML에 생성 //
function paintToDo(newToDo) {
  const li = document.createElement("li");
  li.id = newToDo.id;
  const span = document.createElement("span");
  span.innerText = newToDo.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteToDo);
  li.appendChild(span);
  li.appendChild(button);
  toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  //console.log(toDoInput.value); // toDoInput value 값 출력
  toDoInput.value = ""; // submit 하고나서 form 에 남아있는 string 삭제
  //console.log(newToDo, toDoInput.value); // newToDo 값만 출력
  const newTodoObj = {
    text: newToDo,
    id: Date.now(),
  };
  toDos.push(newTodoObj);
  paintToDo(newTodoObj);
  saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}

function sexyFilter() {}
반응형

'개발냥이 > 자바스크립트(Javascript)' 카테고리의 다른 글

Jquery 입문  (0) 2022.07.25
JavaScript_weather  (0) 2022.07.15
JavaScript_응용  (0) 2022.07.12
JavaScript_querySelector & event  (0) 2022.07.12
JavaScript_입문(노마드코더)  (0) 2022.07.11
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함