From 7a112318132228cc8dfd290359cc2e9f84b21394 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:22:16 +0530 Subject: [PATCH 1/3] Add a project --- Source-Code/PomodoroTimer/index.html | 23 ++++++++++++ Source-Code/PomodoroTimer/script.js | 54 ++++++++++++++++++++++++++++ Source-Code/PomodoroTimer/style.css | 51 ++++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 Source-Code/PomodoroTimer/index.html create mode 100644 Source-Code/PomodoroTimer/script.js create mode 100644 Source-Code/PomodoroTimer/style.css diff --git a/Source-Code/PomodoroTimer/index.html b/Source-Code/PomodoroTimer/index.html new file mode 100644 index 0000000..e228a97 --- /dev/null +++ b/Source-Code/PomodoroTimer/index.html @@ -0,0 +1,23 @@ + + + + + + Productivity Timer + + + +

Productivity Timer

+ 25:00 +

+ + +

Focus Session

+ + + diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js new file mode 100644 index 0000000..cf456e9 --- /dev/null +++ b/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; + +function 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'); +} + +function toggleSession() { + isFocusSession = !isFocusSession; + timeRemaining = isFocusSession ? focusTime : breakTime; + statusDisplay.textContent = isFocusSession + ? 'Focus Session' + : 'Break Session'; + updateDisplay(); +} + +function startTimer() { + if (timerInterval) return; // Prevent multiple intervals + timerInterval = setInterval(() => { + if (timeRemaining > 0) { + timeRemaining -= 1; + updateDisplay(); + } else { + clearInterval(timerInterval); + timerInterval = null; + toggleSession(); + } + }, 1000); +} + +function resetTimer() { + clearInterval(timerInterval); + timerInterval = null; + timeRemaining = isFocusSession ? focusTime : breakTime; + updateDisplay(); +} + +startBtn.addEventListener('click', startTimer); +resetBtn.addEventListener('click', resetTimer); + +// Initialize display +updateDisplay(); diff --git a/Source-Code/PomodoroTimer/style.css b/Source-Code/PomodoroTimer/style.css new file mode 100644 index 0000000..0d2d44d --- /dev/null +++ b/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; +} From 2cbdfd162f3d08d735aaef9d2c57567cb18eeafa Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:25:44 +0530 Subject: [PATCH 2/3] Update the raedme with the description --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index ef4e7c2..2f103ce 100644 --- a/README.md +++ b/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)

From 58eb81c2bc5646d93fdf7fec1eefa922eebe093b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Mon, 23 Dec 2024 01:29:15 +0530 Subject: [PATCH 3/3] followed es6 --- Source-Code/PomodoroTimer/script.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Source-Code/PomodoroTimer/script.js b/Source-Code/PomodoroTimer/script.js index cf456e9..c7295e1 100644 --- a/Source-Code/PomodoroTimer/script.js +++ b/Source-Code/PomodoroTimer/script.js @@ -10,23 +10,23 @@ const focusTime = 5 * 60; // 5 minutes in seconds const breakTime = 5 * 60; // 5 minutes in seconds let timeRemaining = focusTime; -function updateDisplay() { +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'); -} +}; -function toggleSession() { +const toggleSession = () => { isFocusSession = !isFocusSession; timeRemaining = isFocusSession ? focusTime : breakTime; statusDisplay.textContent = isFocusSession ? 'Focus Session' : 'Break Session'; updateDisplay(); -} +}; -function startTimer() { +const startTimer = () => { if (timerInterval) return; // Prevent multiple intervals timerInterval = setInterval(() => { if (timeRemaining > 0) { @@ -38,14 +38,14 @@ function startTimer() { toggleSession(); } }, 1000); -} +}; -function resetTimer() { +const resetTimer = () => { clearInterval(timerInterval); timerInterval = null; timeRemaining = isFocusSession ? focusTime : breakTime; updateDisplay(); -} +}; startBtn.addEventListener('click', startTimer); resetBtn.addEventListener('click', resetTimer);