할일 관리 앱 (기초버전) - to do list 기초버전

김숭늉이 2024. 1. 22. 16:34

728x90

할일 관리앱 기초 버전입니다. (to do list 기초버전)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>할일 관리 앱</title>
  </head>
  <body>
    <h1>할일 목록</h1>
    <ul id="task-list"></ul>
    <input type="text" id="new-task" placeholder="할일 추가" />
    <button onclick="addTask()">추가</button>

    <script src="app.js"></script>
  </body>
</html>

// 할일 목록을 저장할 배열
let tasks = [];

// DOM 요소 가져오기
const taskList = document.getElementById("task-list"); //ul
const newTaskInput = document.getElementById("new-task"); //input 영역

// 할일 추가 함수
function addTask() {
  // 입력된 할일 텍스트 가져오기
  const taskText = newTaskInput.value;

  // 입력된 텍스트가 공백이 아닌 경우에만 실행
  if (taskText.trim() !== "") {
    //trim은 좌/우측 공백 trim하는 함수
    // 새로운 할일 객체 생성
    const task = {
      id: Date.now(), // 현재 시간을 사용하여 고유한 ID 생성
      text: taskText,
    };

    // 생성한 할일을 배열에 추가
    tasks.push(task);

    // 할일 목록을 화면에 업데이트
    displayTasks();

    // 입력 필드 초기화
    newTaskInput.value = "";
  }
}

// 할일 삭제 함수
function deleteTask(id) {
  // 주어진 ID와 일치하지 않는 할일만 필터링하여 배열 업데이트
  tasks = tasks.filter((task) => task.id !== id);

  // 할일 목록을 화면에 업데이트
  displayTasks();
}

// 할일 목록을 화면에 표시하는 함수
function displayTasks() {
  // 목록을 초기화하여 중복된 목록 방지
  taskList.innerHTML = "";

  // 각 할일에 대해 HTML 리스트 아이템을 생성하고 화면에 추가
  tasks.forEach((task) => {
    const listItem = document.createElement("li");
    // 할일 텍스트와 삭제 버튼 추가
    listItem.innerHTML = `
            ${task.text}
            <button onclick="deleteTask(${task.id})">삭제</button>
        `;
    taskList.appendChild(listItem); // 목록 맨끝에 위치 시킴 
  });
}

// 초기에 할일 목록 표시
displayTasks();

728x90