LabEx
로그인무료 가입

Task Timer 웹 앱 만들기

JavaScriptBeginner
지금 연습하기

소개

이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 애플리케이션을 만드는 방법을 배웁니다. 이 웹 앱을 통해 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하고, 작업을 삭제할 수 있습니다. 이 프로젝트가 끝나면 현대적이고 사용자 친화적인 인터페이스를 갖춘 완벽하게 작동하는 Task Timer 웹 앱을 갖게 됩니다.

👀 미리보기

Task Timer web app demo

🎯 작업

이 프로젝트에서는 다음을 배우게 됩니다.

  • Task Timer 웹 앱의 기본 HTML 구조를 만드는 방법
  • CSS 를 사용하여 웹 앱의 스타일을 지정하여 시각적으로 매력적으로 만드는 방법
  • JavaScript 기능을 구현하여 앱에 작업을 추가하는 방법
  • 각 작업에 대한 타이머를 시작하고 중지하는 타이머 기능을 추가하는 방법
  • 앱에서 작업을 삭제하는 기능을 구현하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다.

  • 웹 양식에서 사용자 입력 및 유효성 검사 처리
  • JavaScript 를 사용하여 동적으로 타이머 시작 및 중지
  • 사용자 친화적인 형식으로 시간 업데이트 및 표시
  • JavaScript 를 사용하여 DOM (Document Object Model) 에서 요소 삭제
  • 간단한 웹 애플리케이션 프로젝트 구조화 및 구성
  • 버튼을 만들고 이벤트 리스너를 연결
  • 사용자 상호 작용 후 입력 필드 지우기
  • 사용자 작업에 따라 버튼 활성화 및 비활성화
  • 데이터 속성 (data attributes) 을 사용하여 HTML 요소에 정보 저장

HTML 구조 생성

요구 사항:

  • index.html 파일을 엽니다.
  • 제목, 헤더, 작업 이름 입력 필드, "Add Task" 버튼 및 빈 작업 목록 (ul) 을 사용하여 기본 HTML 구조를 만듭니다.

기능:

  • Task Timer 웹 앱의 초기 구조를 설정합니다.

단계:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task Timer</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Task Timer</h1>
      <div class="task-input">
        <input type="text" id="taskName" placeholder="Task Name" />
        <button onclick="addTask()">Add Task</button>
      </div>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

이 HTML 구조에는 메인 컨테이너, 헤더, 작업 이름 입력 필드, "Add Task" 버튼 및 동적으로 채워질 빈 작업 목록 (ul) 이 포함되어 있습니다.

✨ 솔루션 확인 및 연습

CSS 스타일링

요구 사항:

  • style.css 파일을 엽니다.
  • 웹 앱을 시각적으로 매력적으로 만들기 위해 CSS 스타일을 추가합니다.

기능:

  • 웹 앱 요소에 기본 스타일을 적용합니다.

단계:

body {
  font-family: "Arial", sans-serif;
  background-color: #f3f3f3;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

.task-input {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #333;
  border-radius: 0;
  outline: none;
}

button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

button:hover {
  background-color: #444;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.timer-controls {
  display: flex;
  gap: 10px;
}

.timer-controls button {
  padding: 8px 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
}

.timer-controls button:hover {
  background-color: #444;
}

.task-time {
  font-size: 1.2rem;
  color: #555;
}

다음 단계에서 JavaScript 기능과 적절한 조정을 위해 CSS 스타일을 추가할 것입니다.

✨ 솔루션 확인 및 연습

할 일 추가 기능 구현

요구 사항:

  • script.js 파일을 엽니다.
  • "Add Task" 버튼을 클릭하면 작업을 목록에 추가하는 addTask 함수를 만듭니다.

기능:

  • 사용자는 작업 목록에 작업을 추가할 수 있습니다.

단계:

// Function to add a new task
function addTask() {
  const taskNameInput = document.getElementById("taskName");
  const taskName = taskNameInput.value.trim();

  if (taskName === "") {
    alert("Please enter a task name.");
    return;
  }

  // Create a new list item (li)
  const li = document.createElement("li");
  li.innerHTML = `
        <span>${taskName}</span>
        <div class="timer-controls">
            <button onclick="startTimer(this)">Start</button>
            <button onclick="stopTimer(this)">Stop</button>
            <button onclick="deleteTask(this)">Delete</button>
        </div>
        <span class="task-time">0:00</span>
    `;

  // Append the new task to the task list (ul)
  const taskList = document.getElementById("taskList");
  taskList.appendChild(li);

  // Clear the input field
  taskNameInput.value = "";
}

이 코드는 "Add Task" 버튼을 클릭하면 새로운 작업 항목을 생성하는 addTask 함수를 정의합니다.

✨ 솔루션 확인 및 연습

할 일 타이머 시작 기능 구현

요구 사항:

  • script.js 파일을 확장합니다.
  • "Start" 버튼을 클릭하면 작업에 대한 타이머를 시작하는 startTimer 함수를 만듭니다.

기능:

  • 사용자는 특정 작업에 대한 타이머를 시작할 수 있습니다.

단계:

// Function to start a timer
function startTimer(button) {
  // Retrieve the parent list item (li) of the clicked button
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const startTime = Date.now();

  // Disable the "Start" button and enable the "Stop" button
  button.disabled = true;
  li.querySelector("button:nth-child(2)").disabled = false;

  // Update the timer display every second
  const interval = setInterval(() => {
    const elapsedTime = new Date(Date.now() - startTime);
    taskTime.textContent = elapsedTime.toISOString().substr(14, 5);
  }, 1000);

  // Store the interval ID in a data attribute for later use
  li.dataset.intervalId = interval;
}

이 코드는 "Start" 버튼을 클릭하면 타이머를 시작하는 startTimer 함수를 정의합니다.

✨ 솔루션 확인 및 연습

할 일 타이머 정지 기능 구현

요구 사항:

  • script.js 파일에서 계속 진행합니다.
  • "Stop" 버튼을 클릭하면 작업에 대한 타이머를 중지하는 stopTimer 함수를 만듭니다.

기능:

  • 사용자는 특정 작업에 대한 타이머를 중지할 수 있습니다.

단계:

// Function to stop a timer
function stopTimer(button) {
  const li = button.parentElement.parentElement;
  const taskTime = li.querySelector(".task-time");
  const intervalId = li.dataset.intervalId;

  clearInterval(intervalId);
  button.disabled = true;
  li.querySelector("button:nth-child(1)").disabled = false;

  // Display the final elapsed time
  const totalTime = taskTime.textContent;
  taskTime.textContent = totalTime;

  button.disabled = true;
}

이 코드는 "Stop" 버튼을 클릭하면 타이머를 중지하는 stopTimer 함수를 정의합니다.

✨ 솔루션 확인 및 연습

할 일 삭제 기능 구현

요구 사항:

  • 여전히 script.js 파일 내에서 작업합니다.
  • "Delete" 버튼을 클릭하면 사용자가 작업을 삭제할 수 있도록 하는 deleteTask 함수를 만듭니다.

기능:

  • 사용자는 목록에서 작업을 제거할 수 있습니다.

단계:

// Function to delete a task
function deleteTask(button) {
  const li = button.parentElement.parentElement;
  li.remove();
}

이 코드는 "Delete" 버튼을 클릭하면 작업을 삭제하는 deleteTask 함수를 정의합니다.

✨ 솔루션 확인 및 연습

앱 실행

  • 웹 브라우저에서 index.html을 엽니다.

    open web

  • 지출을 추가하고 지출 목록과 요약이 올바르게 업데이트되는지 확인하여 애플리케이션을 테스트합니다.

  • 페이지의 효과는 다음과 같습니다.

    task timer demo animation
✨ 솔루션 확인 및 연습

요약

축하합니다! HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 앱을 성공적으로 만들었습니다. 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하며, 필요에 따라 작업을 삭제할 수 있습니다. 이 웹 앱은 특정 작업 또는 프로젝트에 소요된 시간을 추적하기 위한 현대적이고 사용자 친화적인 인터페이스를 제공합니다.

관련 JavaScript 코스
초보자를 위한 JavaScript

초보자를 위한 JavaScript

javascriptweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development