바닐라 JS로 크롬 앱 만들기 [6-1] Setup(To-Do List)
Greetings 참고
HTML
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>valila js</title> </head> <body> <form id="login-form" class="hidden"> <input required maxlength="15" type="text" placeholder="what is your name?" /> <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/quotes.js"></script> <script src="js/background.js"></script> <script src="js/todo.js"></script> </body> </html>
Submit 기본동작 중단
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input")
const toDoList = document.getElementById("todo_list");
function handleToDoSubmit(event) {
event.preventDefault();
const newToDo = toDoInput.value;
toDoInput.value = "";
}
toDoForm.addEventListener("submit", handleToDoSubmit);
newToDo라는 함수에toDoInput.value가 복사되는 것이기 때문에toDoInput이 사라져도 상관 없음 → 이후에 무슨 짓을 해도 상관 없음
const toDoInput = document.querySelector("todo-form input");
const toDoInput = toDoForm.querySelector("input");위 두가지는 같은 기능
프론트엔드 개발 일기