소개
이 단계별 프로젝트에서는 HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 애플리케이션을 만드는 방법을 배웁니다. 이 웹 앱을 통해 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하고, 작업을 삭제할 수 있습니다. 이 프로젝트가 끝나면 현대적이고 사용자 친화적인 인터페이스를 갖춘 완벽하게 작동하는 Task Timer 웹 앱을 갖게 됩니다.
👀 미리보기
🎯 작업
이 프로젝트에서는 다음을 배우게 됩니다.
- 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을 엽니다.
지출을 추가하고 지출 목록과 요약이 올바르게 업데이트되는지 확인하여 애플리케이션을 테스트합니다.
페이지의 효과는 다음과 같습니다.
요약
축하합니다! HTML, CSS 및 JavaScript 를 사용하여 Task Timer 웹 앱을 성공적으로 만들었습니다. 사용자는 작업을 추가하고, 각 작업에 대한 타이머를 시작 및 중지하며, 필요에 따라 작업을 삭제할 수 있습니다. 이 웹 앱은 특정 작업 또는 프로젝트에 소요된 시간을 추적하기 위한 현대적이고 사용자 친화적인 인터페이스를 제공합니다.
