Script

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

송민경's avatar
송민경
Sep 02, 2024
바닐라 JS) 17. To Do List 만들고 추가하기

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>
notion image
notion image
notion image
  • 값을 입력하면 새로고침 됨
notion image
 

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);
notion image
 

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);
        notion image
  • 값을 변수에 저장하고 비우기
    • 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);
      notion image
      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);
      notion image
  • 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);
notion image
 

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);
notion image
  • 입력 받은 값을 목록에 표시하기
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);
notion image
Share article

More articles

See more posts

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

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

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

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

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

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

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

September 2, 2024
바닐라 JS) 15. 랜덤 명언 만들기

vosw1

RSS·Powered by Inblog