LabEx
ログイン登録

タスクタイマーのウェブアプリケーションを作成する

JavaScriptBeginner
オンラインで実践に進む

はじめに

この手順に従ったプロジェクトでは、HTML、CSS、JavaScript を使ってタスクタイマーの Web アプリケーションを作成する方法を学びます。この Web アプリでは、ユーザーがタスクを追加し、各タスクのタイマーを開始および停止し、タスクを削除できるようになります。このプロジェクトが終了すると、現代的でユーザーフレンドリーなインターフェイスを備えた機能完全なタスクタイマーWeb アプリが完成します。

👀 プレビュー

Task Timer web app demo

🎯 タスク

このプロジェクトでは、以下を学びます。

  • タスクタイマー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 を開きます。
open web
  • 費用を追加し、費用のリストと集計が正しく更新されることを確認することでアプリケーションをテストします。
  • ページの表示は以下の通りです。
task timer demo animation
✨ 解答を確認して練習

まとめ

おめでとうございます！HTML、CSS、JavaScript を使ってタスクタイマーのウェブアプリケーションを成功裏に作成しました。ユーザーはタスクを追加し、各タスクのタイマーを開始および停止し、必要に応じてタスクを削除できます。このウェブアプリケーションは、特定のタスクやプロジェクトに費やされた時間を追跡するための、現代的でユーザーフレンドリーなインターフェイスを提供します。

関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development