<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<form id="login-form" class="hidden">
<input
required
maxlength="10"
type="text"
placeholder="What is your name?" />
<input type="submit" value="Log In" />
</form>
<h2 id="clock">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="quotes">
<span></span><br/>
<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>JS
const todoForm = document.querySelector("#todo-form");
const todoList = document.querySelector("#todo-list");
const todoFormInput = todoForm.querySelector("input");
function handleToDoForm (e) {
e.preventDefault();
const newToDo = todoFormInput.value;
todoFormInput.value = "";
}
todoForm.addEventListener("submit", handleTodoForm);- querySelector를 이용해 html의 요소들을 지정해준다.
- submit의 기본동작을 막는다.
- newToDo 변수에 입력된 값을 복사, 저장한다.
- 입력된 값을 빈 문자열로 변환한다.
이 저장된 값을 HTML로 출력해보자!
function paintToDo(newTodo){
const li = document.createElement("li");
const span = document.createElement("span");
const button = document.createElement("button");
button.innerText = "❌";
span.innerText = newTodo;
li.appendChild(span);
li.appendChild(button);
todoList.appendChild(li);
}
function handleToDoForm (e) {
e.preventDefault();
const newTodo = todoFormInput.value;
todoFormInput.value = "";
paintToDo(newTodo);
}- handleToDoForm 마지막 구문은 paintToDo 함수를 호출하고 인자로 newTodo값을 받는다.
- JS를 이용하여 li, span, button을 만들어 주었다.
- button의 innerText로 이모지를 넣어준다.
- span에 입력받은 텍스트 값을 넣어준다.
- li에 span을 자식요소로 추가한다.
- li에 button을 자식요소로 추가한다.
- ul(todoList)에 li를 자식요소로 추가한다.
결과: 
x버튼을 누르면 todo를 삭제 하고싶다.
function deleteToDo(e) {
const li = e.target.parentElement;
li.remove();
}- e.target은 이벤트가 발생한 요소를 가리킨다.
- e.target.parentElement는 이벤트가 발생한 부모요소를 가리킨다.
- li 변수에 이벤트가 발생한 부모요소를 할당하고 remove() 함수를 이용해 지워준다.
- 버튼이 눌리면 deleteToDo를 실행한다.
function paintToDo (newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
span.innerText = newTodo;
const button = document.createElement("button");
button.innerText = "❌";
button.addEventListener("click", deleteToDo);
li.appendChild(span);
li.appendChild(button);
toDoList.appendChild(li);
]- button에 addEventListener를 이용하여 click 이벤트를 감지하고 버튼이 눌리면 deleteToDo를 실행한다.
결과:
프론트엔드 개발자 지망생