[Vanilla JS - Chrome App] #4.1 <To Do List> Setup

1. html form 생성

<form id="todo-form">
	<input type="text" placeholder="Write a To Do and Press Enter" required />;
</form>
<ul id="todo-list"></ul>

index.html

 

2. js 연동

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

function handleToDoSubmit(event) {
    // submit의 기본설정 막음 (새로고침)
    event.preventDefault();
    
    // input의 value를 새로운 변수에 복사
    const newTodo = toDoInput.value;
    
    // input의 value를 비움
    toDoInput.value = "";
}

toDoForm.addEventListener("submit", handleToDoSubmit);

todo.js