はじめに
この手順に従ったプロジェクトでは、HTML、CSS、JavaScript を使ってタスクタイマーの Web アプリケーションを作成する方法を学びます。この Web アプリでは、ユーザーがタスクを追加し、各タスクのタイマーを開始および停止し、タスクを削除できるようになります。このプロジェクトが終了すると、現代的でユーザーフレンドリーなインターフェイスを備えた機能完全なタスクタイマーWeb アプリが完成します。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- タスクタイマーWeb アプリの基本的な HTML 構造を作成する方法
- CSS を使って Web アプリをスタイリッシュにする方法で、視覚的に魅力的にする
- JavaScript の機能を実装して、アプリにタスクを追加する方法
- 各タスクのタイマーを開始および停止するためのタイマー機能を追加する方法
- アプリからタスクを削除する機能を実装する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- Web フォームでのユーザー入力と検証を処理する
- JavaScript を使ってタイマーを動的に開始および停止する
- ユーザーフレンドリーな形式で時間を更新して表示する
- JavaScript を使って文書オブジェクトモデル（DOM）から要素を削除する
- シンプルな Web アプリケーションプロジェクトを構築して整理する
- ボタンを作成し、それらにイベントリスナーを追加する
- ユーザーインタラクション後に入力フィールドをクリアする
- ユーザーのアクションに基づいてボタンを有効化および無効化する
- HTML 要素に情報を格納するためにデータ属性を使用する
HTML 構造を作成する
要件：
index.htmlファイルを開きます。- タイトル、ヘッダー、タスク名の入力フィールド、「タスクを追加」ボタン、および空のタスクリスト (
ul) を持つ基本的な HTML 構造を作成します。
機能：
- タスクタイマーWeb アプリの初期構造を確立します。
手順：
<!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 構造には、メインコンテナ、ヘッダー、タスク名の入力フィールド、「タスクを追加」ボタン、および動的にデータが入力される空のタスクリスト (ul) が含まれています。
CSS のスタイリング
要件：
style.cssファイルを開きます。- Web アプリを視覚的に魅力的にするための CSS スタイルを追加します。
機能：
- Web アプリの要素に基本的なスタイルを適用します。
手順：
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;
}
次の手順で CSS スタイルを追加して、JavaScript の機能と適切に調和させます。
タスク追加機能を実装する
要件：
script.jsファイルを開きます。- 「タスクを追加」ボタンがクリックされたときにタスクをリストに追加する
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 = "";
}
このコードは、「タスクを追加」ボタンがクリックされたときに新しいタスク項目を作成する addTask 関数を定義しています。
タスクタイマーの開始機能を実装する
要件：
script.jsファイルを拡張します。- 「開始」ボタンがクリックされたときにタスクのタイマーを開始する
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;
}
このコードは、「開始」ボタンがクリックされたときにタイマーを開始する startTimer 関数を定義しています。
タスクタイマーの停止機能を実装する
要件：
script.jsファイルで作業を続けます。- 「停止」ボタンがクリックされたときにタスクのタイマーを停止する
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;
}
このコードは、「停止」ボタンがクリックされたときにタイマーを停止する stopTimer 関数を定義しています。
タスク削除機能を実装する
要件：
- 依然として
script.jsファイル内です。 - 「削除」ボタンがクリックされたときにユーザーがタスクを削除できるようにする
deleteTask関数を作成します。
機能：
- ユーザーがリストからタスクを削除できるようになります。
手順：
// Function to delete a task
function deleteTask(button) {
const li = button.parentElement.parentElement;
li.remove();
}
このコードは、「削除」ボタンがクリックされたときにタスクを削除する deleteTask 関数を定義しています。
アプリの実行
- ウェブブラウザで
index.htmlを開きます。
- 費用を追加し、費用のリストと集計が正しく更新されることを確認することでアプリケーションをテストします。
- ページの表示は以下の通りです。
まとめ
おめでとうございます！HTML、CSS、JavaScript を使ってタスクタイマーのウェブアプリケーションを成功裏に作成しました。ユーザーはタスクを追加し、各タスクのタイマーを開始および停止し、必要に応じてタスクを削除できます。このウェブアプリケーションは、特定のタスクやプロジェクトに費やされた時間を追跡するための、現代的でユーザーフレンドリーなインターフェイスを提供します。
