Erstellen Sie eine Pomodoro-Timer-Website

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorstellen zu können: einen Pomodoro-Timer. Dieses Projekt ist perfekt für alle, die ihre Zeitmanagementfähigkeiten verbessern oder ihre Front-End-Entwicklung üben möchten. Der Pomodoro-Timer ist ein einfaches, aber leistungsstarkes Tool, das Ihnen dabei hilft, Ihre Arbeit in konzentrierte Intervalle zu unterteilen, die Produktivität zu steigern und den Fokus den ganzen Tag über aufrechtzuerhalten.

Projektübersicht

Der Pomodoro Timer ist eine webbasierte Anwendung, mit der Benutzer einen Timer für konzentrierte Arbeitssitzungen einstellen können, normalerweise 25 Minuten, gefolgt von kurzen Pausen. Dieses Projekt zeigt, wie man mithilfe von JavaScript einen funktionalen Timer sowie eine saubere und reaktionsfähige Benutzeroberfläche mit HTML und CSS erstellt.

Merkmale

• Einfache Timer-Schnittstelle: Ein minimalistisches Design, das den Countdown-Timer und die Bedienelemente anzeigt.
• Starten, Stoppen, Zurücksetzen: Benutzer können den Timer mit benutzerfreundlichen Tasten starten, stoppen und zurücksetzen.
• Benachrichtigungsalarm: Wenn der Timer Null erreicht, wird ein Alarm ausgelöst, der das Ende einer Sitzung signalisiert.

Verwendete Technologien

• HTML: Stellt die Struktur für den Pomodoro-Timer bereit.
• CSS: Gestaltet den Timer und sorgt so für ein klares und modernes Design.
• JavaScript: Implementiert die Kernfunktionalität des Timers, einschließlich Countdown-Logik und Benutzerinteraktionen.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

Pomodoro-Timer/
├── index.html
├── style.css
└── script.js

• index.html: Enthält die HTML-Struktur für den Pomodoro-Timer.
• style.css: Enthält CSS-Stile für ein optisch ansprechendes und ansprechendes Design.
• script.js: Verwaltet die Timer-Funktionalität, einschließlich Countdown und Benutzerinteraktionen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

   git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
   

2. Öffnen Sie das Projektverzeichnis:
   

   cd Pomodoro-Timer
   

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um den Pomodoro-Timer zu verwenden.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Starten Sie den Timer, indem Sie auf die Schaltfläche „Start“ klicken.
3. Stoppen oder setzen Sie den Timer zurückbei Bedarf mit den Tasten „Stopp“ und „Zurücksetzen“.
4. Konzentrieren Sie sich auf Ihre Arbeit, bis der Timer Null erreicht, und machen Sie dann eine kurze Pause, bevor Sie mit der nächsten Sitzung beginnen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur des Pomodoro-Timers, einschließlich der Kopfzeile, der Timer-Anzeige und der Steuerschaltflächen. Hier ist ein Ausschnitt:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Pomodoro Timer6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      527db218a609cb4e96157e28dc6f988cPomodoro Timer473f0a7621bec819994bb5020d29372a
      38e8f75036b4e9396a1cc6cc0591514e25:0094b3e26ee717c64999d7867364b1b4a3
      60842b9d6c79533b42cd0c6cd7485212
        443c620cf48a4716b774dd4364035d74Start65281c5ac262bf6d81768915a4a77ac0
        a7a60cea450f42b2b97b16a5d74b9609Stop65281c5ac262bf6d81768915a4a77ac0
        2da760dc65e610b23ad3e603d5b03982Reset65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Die style.css-Datei formatiert den Pomodoro-Timer und stellt sicher, dass er optisch ansprechend und reaktionsschnell ist. Nachfolgend sind einige wichtige Stile aufgeführt:

.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

Die Datei script.js enthält die Logik für den Pomodoro-Timer, einschließlich des Countdown-Mechanismus und der Handhabung von Benutzerinteraktionen. Hier ist ein Ausschnitt:

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);

Live-Demo

Sie können sich hier die Live-Demo des Pomodoro Timer-Projekts ansehen.

Abschluss

Der Bau des Pomodoro-Timers war eine lohnende Erfahrung, die es mir ermöglichte, grundlegende Frontend-Kenntnisse wie HTML, CSS und JavaScript zu üben. Dieses Projekt ist ein großartiges Werkzeug zur Verbesserung der Produktivität und ich hoffe, es inspiriert Sie dazu, Ihre eigenen Werkzeuge für ein besseres Zeitmanagement zu entwickeln. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Frontend-Entwicklung entwickelt, mit dem Schwerpunkt auf der Erstellung praktischer und interaktiver Webanwendungen.

Autor

• Abhishek Gurjar
  • GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Pomodoro-Timer-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!