開発者の皆さん、こんにちは!私の最新プロジェクト、ポモドーロ タイマーをご紹介できることを嬉しく思います。このプロジェクトは、時間管理スキルを向上させたい、またはフロントエンド開発を実践したいと考えている人に最適です。ポモドーロ タイマーは、作業を集中した間隔に分割し、生産性を向上させ、1 日を通して集中力を維持できるように設計されたシンプルかつ強力なツールです。
ポモドーロ タイマーは、ユーザーが集中した作業セッションのタイマー (通常は 25 分) とその後の短い休憩を設定できる Web ベースのアプリケーションです。このプロジェクトでは、JavaScript を使用して機能的なタイマーを作成する方法と、HTML と CSS を使用したクリーンで応答性の高いユーザー インターフェイスを作成する方法を示します。
プロジェクト構造の概要は次のとおりです:
Pomodoro-Timer/ ├── index.html ├── style.css └── script.js
プロジェクトを開始するには、次の手順に従います:
リポジトリのクローンを作成します:
git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
プロジェクト ディレクトリを開きます:
cd Pomodoro-Timer
プロジェクトを実行します:
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>
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; }
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 アプリケーションの作成に重点を置いて、フロントエンド開発における私の継続的な学習の一環として開発されました。
以上がポモドーロ タイマー Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。