ホームページ > ウェブフロントエンド > CSSチュートリアル > ポモドーロ タイマー Web サイトを構築する

ポモドーロ タイマー Web サイトを構築する

王林
リリース: 2024-08-25 20:31:36
オリジナル
388 人が閲覧しました

Build a Pomodoro Timer Website

導入

開発者の皆さん、こんにちは!私の最新プロジェクト、ポモドーロ タイマーをご紹介できることを嬉しく思います。このプロジェクトは、時間管理スキルを向上させたい、またはフロントエンド開発を実践したいと考えている人に最適です。ポモドーロ タイマーは、作業を集中した間隔に分割し、生産性を向上させ、1 日を通して集中力を維持できるように設計されたシンプルかつ強力なツールです。

プロジェクト概要

ポモドーロ タイマーは、ユーザーが集中した作業セッションのタイマー (通常は 25 分) とその後の短い休憩を設定できる Web ベースのアプリケーションです。このプロジェクトでは、JavaScript を使用して機能的なタイマーを作成する方法と、HTML と CSS を使用したクリーンで応答性の高いユーザー インターフェイスを作成する方法を示します。

特徴

  • シンプルなタイマー インターフェイス: カウントダウン タイマーとコントロールを表示するシンプルなデザイン。
  • 開始、停止、リセット: ユーザーは使いやすいボタンでタイマーを開始、停止、リセットできます。
  • 通知アラート: タイマーがゼロに達するとアラートがトリガーされ、セッションの終了が通知されます。

使用されている技術

  • HTML: ポモドーロ タイマーの構造を提供します。
  • CSS: タイマーのスタイルを設定し、クリーンでモダンなデザインを保証します。
  • JavaScript: カウントダウン ロジックやユーザー インタラクションなど、タイマーのコア機能を実装します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

Pomodoro-Timer/
├── index.html
├── style.css
└── script.js
ログイン後にコピー
  • index.html: ポモドーロ タイマーの HTML 構造が含まれています。
  • style.css: 視覚的に魅力的でレスポンシブなデザインのための CSS スタイルが含まれています。
  • script.js: カウントダウンやユーザー インタラクションなどのタイマー機能を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

  1. リポジトリのクローンを作成します:

    git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
    
    ログイン後にコピー
  2. プロジェクト ディレクトリを開きます:

    cd Pomodoro-Timer
    
    ログイン後にコピー
  3. プロジェクトを実行します:

    • Web ブラウザでindex.html ファイルを開いて、ポモドーロ タイマーを使用します。

使用法

  1. Web ブラウザで Web サイトを開きます
  2. 「開始」ボタンをクリックしてタイマーを開始します
  3. 必要に応じて、「停止」ボタンと「リセット」ボタンを使用してタイマーを停止またはリセットします。
  4. タイマーがゼロになるまで仕事に集中してください。その後、次のセッションを開始する前に短い休憩を取ります。

コードの説明

HTML

index.html ファイルは、ヘッダー、タイマー表示、コントロール ボタンなどのポモドーロ タイマーの構造を定義します。スニペットは次のとおりです:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pomodoro Timer</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Pomodoro Timer</h1>
      <p class="timer" id="timer">25:00</p>
      <div class="button-wrapper">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>
ログイン後にコピー

CSS

style.css ファイルは、ポモドーロ タイマーのスタイルを設定し、視覚的に魅力的で応答性が高いことを保証します。以下にいくつかの主要なスタイルを示します:

.container {
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}

.title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.timer {
  font-size: 72px;
  color: #2c3e50;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#start {
  background-color: #27ae60;
}

#stop {
  background-color: #c0392b;
}

#reset {
  background-color: #7f8c8d;
}

.footer {
  margin-top: 250px;
  text-align: center;
}
ログイン後にコピー

JavaScript

script.js ファイルには、カウントダウン メカニズムやユーザー インタラクションの処理など、ポモドーロ タイマーのロジックが含まれています。スニペットは次のとおりです:

const startEl = document.getElementById("start");
const stopEl = document.getElementById("stop");
const resetEl = document.getElementById("reset");
const timerEl = document.getElementById("timer");

let interval;
let timeLeft = 1500;

function updateTimer() {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;

  timerEl.innerHTML = formattedTime;
}

function startTimer() {
  interval = setInterval(() => {
    timeLeft--;
    updateTimer();
    if (timeLeft === 0) {
      clearInterval(interval);
      alert("Time's up!");
      timeLeft = 1500;
      updateTimer();
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(interval);
}

function resetTimer() {
  clearInterval(interval);
  timeLeft = 1500;
  updateTimer();
}

startEl.addEventListener("click", startTimer);
stopEl.addEventListener("click", stopTimer);
resetEl.addEventListener("click", resetTimer);
ログイン後にコピー

ライブデモ

ここでポモドーロ タイマー プロジェクトのライブ デモをチェックできます。

結論

ポモドーロ タイマーの構築は、HTML、CSS、JavaScript などの重要なフロントエンド スキルを練習できる貴重な経験でした。このプロジェクトは生産性を向上させるための優れたツールであり、より良い時間管理を行うための独自のツールを作成するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、実用的でインタラクティブな Web アプリケーションの作成に重点を置いて、フロントエンド開発における私の継続的な学習の一環として開発されました。

著者

  • アビシェク・グルジャル
    • GitHub プロフィール

以上がポモドーロ タイマー Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート