NomardCoder: todolist-1
#ToDo List 만들기
<!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="project4.css">
<title>Document</title>
</head>
<body>
<h2 id="clock">00:00:00</h2>
<form class="hidden" id="login-form">
<input
required
/>
<input type="submit" value="Log In" />
</form>
<h1 class="hidden" id="greeting"></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>
<h1 class="hidden" id="greeting"></h1>
<script src="./background.js"></script>
<script src="./pj4-clock.js"></script>
<script src="./pj4-greeting.js"></script>
<script src="./quotes.js"></script>
<script src="./todo.js"></script>
</body>
</html>
const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");
function paintToDo(newTodo) {
const li = document.createElement("li");
const span = document.createElement("span");
li.appendChild(span);
span.innerText = newTodo;
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
paintToDo(newTodo);
}
toDoForm.addEventListener("submit", handleToDoSubmit);
- toDoForm의 submit 이벤트를 실행, handleToDoSubmit함수가 실행됨
- handleToDoSubmit함수는 인자로 event를 받고, event의 자동실행프로그램을 중지함(새로고침해도 화면 그대로)
- newTodo에 입력값을 할당해주고
- 입력값을 공백으로 만듦(화면에 안보이게 초기화시킴. 하지만 newTodo라는 변수에는 저장이 되어있음)
- paintToDo라는 함수를 실행함
- li와 span을 html에 추가시킴(.creatElement와 appndChild를 이용)
- span의 텍스트 값에 3번의 newTodo값을 할당함
- toDoList에 li값(span값(newTodo값))을 계속 할당해줌
댓글남기기