Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorstellen zu können: einenPomodoro-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 verbessern und den Fokus den ganzen Tag über aufrechtzuerhalten.

Projektübersicht

DerPomodoro Timerist 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 mit JavaScript einen funktionalen Timer erstellt, zusammen mit einer sauberen und reaktionsfähigen Benutzeroberfläche mit HTML und CSS.

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

   Nach dem Login kopieren

2. Öffnen Sie das Projektverzeichnis:
   

   cd Pomodoro-Timer

   Nach dem Login kopieren

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 nach Bedarf zurück, indem Sie die Tasten „Stopp“ und „Zurücksetzen“ verwenden.
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.

        
  
 
Pomodoro Timer
 
25:00
 
 Start Stop Reset 
 
 
 
Made with ❤️ by Abhishek Gurjar
 
  

.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; }

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

• 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!