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.
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.
Hier ein Überblick über die Projektstruktur:
Pomodoro-Timer/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git
Öffnen Sie das Projektverzeichnis:
cd Pomodoro-Timer
Führen Sie das Projekt aus:
Pomodoro Timer Pomodoro Timer
25:00
.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);
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!