김숭늉 마음대로

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

IT/웹개발 (100일 도전)

할일 관리 앱 (기초버전) - 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
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

파일질라와 FTP, 그리고 사용법에 대해 잘 정리한 사이트 공유  (0) 2024.01.23
html 테이플(표) 만들기 - row, col의 차이  (2) 2024.01.23
express JS 설치, 기능 특징 -코딩 챌린지 48일차  (0) 2023.09.06
Node JS, Node JS 설치방법? - 코딩챌린지 47일차  (0) 2023.09.05
시차효과(Parallax effect) 추가하는 방법 - 코딩 챌린지 46일차  (0) 2023.09.04
'IT/웹개발 (100일 도전)' Related Articles more