코드네임 :
VanillaJS - ToDo List 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Momentum</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="login-form" class="hidden">
<!-- form 의 기본 동작은 submit -->
<input
required
maxlength="15"
type="text"
placeholder="What is your name>"
/>
<!-- <button>Log in</button> -->
<input type="submit" value="Log In" />
</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" required />
</form>
<ul id="todo-list"></ul>
<div id="quote">
<span></span>
<span></span>
</div>
<script src="js/greetings.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>
</body>
</html>
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos)); // 배열을 문자열 JSON으로 변환
}
function deleteToDo(event) {
const list = event.target.parentElement;
//event.target : 클릭된 요소 찾기,
//parentElement : 클릭된 요소의 부모 요소 반환(li태그)
list.remove();
toDos = toDos.filter((toDo)=>toDo.id!== parseInt(list.id));
saveToDos();
}
function paintToDo(newTodo) {
const list = document.createElement("li"); // li 태그 생성
list.id = newTodo.id; // list(<li>)에 id 추가
const span = document.createElement("span"); // span 태그 생성
span.innerText = newTodo.text; // span에 입력값 넣어주기
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
list.appendChild(span); // list(li태그)내부에 span 넣어주기
list.appendChild(button);
toDoList.appendChild(list); // toDoList내부에 list(li태그) 넣어주기
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = ""; //입력값을 비움
const newTodoObj ={
text: newTodo,
id: Date.now()
};//좀 더 효율적인 투두를 만들기 위해 id가 달린 걸로 만들기
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
//새로고침할때 내가 적었던 투두리스트가 사라지지 않도록 하는 코드
const savedToDos = localStorage.getItem(TODOS_KEY)
if (savedToDos !==null ){
const parsedToDos = JSON.parse(savedToDos); //JSON문자열을 다시 배열로 변환, savedToDos에서 todo를 받고,
toDos = parsedToDos; //Local Storage에 저장된배열로 업데이트 (기존 todo 유지)
parsedToDos.forEach(paintToDo); ///각 할 일을 paintToDo()에 전달하여 실행
}
//forEach()에서
///(item) =>console.log("this is the turn of", item)
//이나
///function sayHello(item) { console.log("this is the turn of", item) } // forEach(sayHello)
// 나 같음
'🖥️Frontend > VanillaJS' 카테고리의 다른 글
| VanillaJS - Weather (0) | 2025.03.10 |
|---|---|
| VanillaJS - Quotes and Background (0) | 2025.03.09 |
| VanillaJS - Clock (0) | 2025.03.09 |
| VanillaJS - login 기능 (0) | 2025.03.07 |
| JS (0) | 2025.03.03 |