html
<!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">
<title>momentum</title>
<link rel="stylesheet" href="/css/nomad01.css">
</head>
<body>
<form id="loginForm" class="hidden">
<input type="text" id="inputName" maxlength="15" placeholder="Input your name!" required>
<input type="submit" value="login" >
</form>
<h2 id="clock">00:00</h2>
<h1 id="greeting" class="hidden"></h1>
<form id="todo-form">
<input type="text" placeholder="to do cocolo list" required>
</form>
<ul id="todo-list"></ul>
<div id="quote">
<span></span>
<div id="author"></div>
</div>
<button type="button" id="like">🤍</button>
<button type="button" onclick="logout()">로그아웃</button>
</body>
<script src="/js/greeting.js"></script>
<script src="/js/clock.js"></script>
<script src="/js/quotes.js"></script>
<script src="/js/background.js"></script>
<script src="/js/todo.js"></script>
</html>toDoList.js
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
const toDos = [];
function saveTodo(){
// localStorage.setItem("todos",toDos); 텍스트만 저장이 됨
// json 타입으로 저장
localStorage.setItem("todos",JSON.stringify);
}
const heart = document.querySelector("#like")
//삭제함수
function deleteToDo(event){
//모든 HTML element 에는 하나 이상의 property가 있음 -> 그 중 하나 parentElement 부모요소
//누른 버튼의 부모
const li = event.target.parentElement;
li.remove();
}
// li와 span을 생성
function paintToDo(newTodo){
const li = document.createElement("li")
const span = document.createElement("span");
span.innerHTML = newTodo;
const button = document.createElement("button")
button.innerText = "❌";
button.addEventListener("click",deleteToDo)
li.appendChild(span);
li.appendChild(button)
toDoList.appendChild(li);
}
//toDoForm 저장하기
function handleToDoSubmit(event){
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
//toDos array에 저장
toDos.push(newTodo);
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit)
//그냥 만든 좋아요 버튼
function handleClick(){
heart.innerText = "❤"
}
heart.addEventListener("click",handleClick);
1일 1커밋 1일 1벨로그!