50Projects-HTML-CSS-JavaScript : Pomodoro timer

README.md

@@ -496,6 +496,19 @@ In order to run this project you need:
 
 
 
+
+
+Pomodoro Timer
+The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.
+
+
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/PomodoroTimer/index.html

@@ -0,0 +1,23 @@
+
+
+
+  
+  
+  Productivity Timer
+  
+
+
+  
+    Productivity Timer
+    
+      25:00
+    
+    
+      Start
+      Reset
+    
+    Focus Session
+  
+  
+
+

Source-Code/PomodoroTimer/script.js

@@ -0,0 +1,54 @@
+const startBtn = document.getElementById('start-btn');
+const resetBtn = document.getElementById('reset-btn');
+const minutesDisplay = document.getElementById('minutes');
+const secondsDisplay = document.getElementById('seconds');
+const statusDisplay = document.getElementById('status');
+
+let timerInterval;
+let isFocusSession = true; // Start with a focus session
+const focusTime = 5 * 60; // 5 minutes in seconds
+const breakTime = 5 * 60; // 5 minutes in seconds
+let timeRemaining = focusTime;
+
+const updateDisplay = () => {
+  const minutes = Math.floor(timeRemaining / 60);
+  const seconds = timeRemaining % 60;
+  minutesDisplay.textContent = String(minutes).padStart(2, '0');
+  secondsDisplay.textContent = String(seconds).padStart(2, '0');
+};
+
+const toggleSession = () => {
+  isFocusSession = !isFocusSession;
+  timeRemaining = isFocusSession ? focusTime : breakTime;
+  statusDisplay.textContent = isFocusSession
+    ? 'Focus Session'
+    : 'Break Session';
+  updateDisplay();
+};
+
+const startTimer = () => {
+  if (timerInterval) return; // Prevent multiple intervals
+  timerInterval = setInterval(() => {
+    if (timeRemaining > 0) {
+      timeRemaining -= 1;
+      updateDisplay();
+    } else {
+      clearInterval(timerInterval);
+      timerInterval = null;
+      toggleSession();
+    }
+  }, 1000);
+};
+
+const resetTimer = () => {
+  clearInterval(timerInterval);
+  timerInterval = null;
+  timeRemaining = isFocusSession ? focusTime : breakTime;
+  updateDisplay();
+};
+
+startBtn.addEventListener('click', startTimer);
+resetBtn.addEventListener('click', resetTimer);
+
+// Initialize display
+updateDisplay();

Source-Code/PomodoroTimer/style.css

@@ -0,0 +1,51 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f4f8;
+  color: #333;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 400px;
+  margin: 100px auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+.timer-display {
+  font-size: 3rem;
+  margin: 20px 0;
+}
+
+.controls button {
+  font-size: 1rem;
+  padding: 10px 20px;
+  margin: 5px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#start-btn {
+  background-color: #28a745;
+  color: white;
+}
+
+#reset-btn {
+  background-color: #dc3545;
+  color: white;
+}
+
+#status {
+  font-size: 1.2rem;
+  margin-top: 20px;
+  color: #555;
+}