바닐라 JS) 17. To Do List 만들고 추가하기

Sep 02, 2024

1. todo.js 만들기

index.html에 연결하기

input 태그 추가하기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <form class="login-form hidden" id="login-form">
        <input 
            required 
            maxlength="15" 
            type="text" 
            placeholder="What is your name?" />
        </form>
            <h2 id="clock">00:00:00</h2>
            <h1 class="hidden" id="greeting" ></h1>
            <form id="todo-form">
                <input type="text" placeholder=" 할일을 쓰거나 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>

값을 입력하면 새로고침 됨

2. 값 입력 받기

todo.js


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

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    console.log(toDoInput.value);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

3. 값 입력 후 사라지기

값 비우기

todo.js


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

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    console.log(toDoInput.value);
    toDoInput.value = "";
}

toDoForm.addEventListener("submit", handleToDoSubmit);

값을 변수에 저장하고 비우기

todo.js


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

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 새로운 변수에 값 저장하기
    console.log(toDoInput.value);
    toDoInput.value = ""; // 값 비우기 -> 값이 없어지는 것은 아님
    console.log(newToDo, toDoInput.value);
}

toDoForm.addEventListener("submit", handleToDoSubmit);


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

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 새로운 변수에 값 저장하기
    toDoInput.value = ""; // 값 비우기 -> 값이 없어지는 것은 아님
    console.log(newToDo, toDoInput.value);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

todo.js


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

function paintToDo(newToDo) {
    console.log("나는 그릴거에요", newToDo);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

4. To Do List에 값 추가하기

todo.js


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

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     li.appendChild(span); // span 요소에 li 추가하기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     console.log(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

입력 받은 값을 목록에 표시하기


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

function paintToDo(newToDo) {
    const li = document.createElement("li"); // li 요소 만들기
     const span = document.createElement("span"); // span 요소 만들기
     li.appendChild(span); // span 요소에 li 추가하기
     span.innerText = newToDo; // li 내부에 텍스트 설정하기
     toDoList.appendChild(li);
}

function handleToDoSubmit(event) {
    event.preventDefault(); // 새로고침 막기
    const newToDo = toDoInput.value; // 입력 필드의 값 저장
    paintToDo(newToDo); // 저장된 값을 paintToDo 함수로 전달
    toDoInput.value = ""; // 입력 필드 비우기
}

toDoForm.addEventListener("submit", handleToDoSubmit);

See more posts

바닐라 JS) 17. To Do List 만들고 추가하기

1. todo.js 만들기

2. 값 입력 받기

3. 값 입력 후 사라지기

4. To Do List에 값 추가하기

More articles

바닐라 JS) 19. 내 위치의 날씨 만들기

바닐라 JS) 18. To Do List 삭제하고 저장하기

바닐라 JS) 16. 랜덤 배경 이미지 만들기

바닐라 JS) 15. 랜덤 명언 만들기