From 6123ccfc2cb5ceaa13bde1e037aa5746bf6201b2 Mon Sep 17 00:00:00 2001 From: Tanvi2307 Date: Thu, 23 Oct 2025 13:04:35 +0530 Subject: [PATCH] Add Pomodoro Timer under Frontend/MiniProjects --- .../MiniProjects/PomodoroTimer/README.md | 54 ++++++++++++++++++ .../MiniProjects/PomodoroTimer/index.html | 25 ++++++++ .../MiniProjects/PomodoroTimer/script.js | 57 +++++++++++++++++++ .../MiniProjects/PomodoroTimer/style.css | 52 +++++++++++++++++ 4 files changed, 188 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/PomodoroTimer/README.md create mode 100644 Domains/Frontend/MiniProjects/PomodoroTimer/index.html create mode 100644 Domains/Frontend/MiniProjects/PomodoroTimer/script.js create mode 100644 Domains/Frontend/MiniProjects/PomodoroTimer/style.css diff --git a/Domains/Frontend/MiniProjects/PomodoroTimer/README.md b/Domains/Frontend/MiniProjects/PomodoroTimer/README.md new file mode 100644 index 00000000..936f890e --- /dev/null +++ b/Domains/Frontend/MiniProjects/PomodoroTimer/README.md @@ -0,0 +1,54 @@ +# 🍅 Pomodoro Timer + +**Contributor:** [YourGitHubUsername](https://github.com/YourGitHubUsername) + +--- + +## 🧾 Description +A simple and effective **Pomodoro Timer** web app built using **HTML**, **CSS**, and **JavaScript**. +Helps you manage your work and break sessions following the Pomodoro technique to boost productivity. + +--- + +## 📁 Folder Structure + +Pomodoro-Timer/ +├── index.html # Main HTML file +├── style.css # Stylesheet for layout and design +├── script.js # JavaScript logic for timer functionality +└── README.md # Project documentation + +--- + +## 🚀 Features +- ⏲️ 25-minute work sessions and 5-minute breaks by default +- ▶️ Start, pause, and reset timer controls +- 🔄 Automatic session switching between work and break +- 🔔 Alerts on session changes +- 📱 Responsive and clean UI + +--- + +## 🧩 Tech Stack +- **HTML5** – Structure and markup +- **CSS3** – Styling and layout +- **JavaScript (Vanilla)** – Timer logic and interactivity + +--- + +## 💡 How to Use +1. Click **Start** to begin a work session timer. +2. Use **Pause** to stop the timer temporarily. +3. Click **Reset** to restart the timer and switch back to the work session. +4. When time ends, an alert notifies you to switch sessions automatically. + +--- + +## 📂 Installation & Usage +1. Clone or download the repository. +2. Open `index.html` in your web browser. +3. Enjoy your Pomodoro sessions! + +--- + +Feel free to contribute and improve this project! diff --git a/Domains/Frontend/MiniProjects/PomodoroTimer/index.html b/Domains/Frontend/MiniProjects/PomodoroTimer/index.html new file mode 100644 index 00000000..eb67e146 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PomodoroTimer/index.html @@ -0,0 +1,25 @@ + + + + + + Pomodoro Timer + + + +
+

Pomodoro Timer 🍅

+
25:00
+
+ + + +
+
+

Work Session: 25 minutes

+

Break Session: 5 minutes

+
+
+ + + diff --git a/Domains/Frontend/MiniProjects/PomodoroTimer/script.js b/Domains/Frontend/MiniProjects/PomodoroTimer/script.js new file mode 100644 index 00000000..32a621b1 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PomodoroTimer/script.js @@ -0,0 +1,57 @@ +const timerDisplay = document.getElementById('timer'); +const startBtn = document.getElementById('start'); +const pauseBtn = document.getElementById('pause'); +const resetBtn = document.getElementById('reset'); +const workLength = 25 * 60; // 25 minutes in seconds +const breakLength = 5 * 60; // 5 minutes in seconds + +let isRunning = false; +let isWorkSession = true; +let timeLeft = workLength; +let timerInterval; + +function updateTimerDisplay(seconds) { + const m = Math.floor(seconds / 60); + const s = seconds % 60; + timerDisplay.textContent = `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`; +} + +function switchSession() { + isWorkSession = !isWorkSession; + timeLeft = isWorkSession ? workLength : breakLength; + updateTimerDisplay(timeLeft); + alert(isWorkSession ? "Work session started! Focus!" : "Break time! Relax!"); +} + +function tick() { + if (timeLeft > 0) { + timeLeft--; + updateTimerDisplay(timeLeft); + } else { + switchSession(); + } +} + +startBtn.addEventListener('click', () => { + if (!isRunning) { + isRunning = true; + timerInterval = setInterval(tick, 1000); + } +}); + +pauseBtn.addEventListener('click', () => { + if (isRunning) { + clearInterval(timerInterval); + isRunning = false; + } +}); + +resetBtn.addEventListener('click', () => { + clearInterval(timerInterval); + isRunning = false; + isWorkSession = true; + timeLeft = workLength; + updateTimerDisplay(timeLeft); +}); + +updateTimerDisplay(timeLeft); diff --git a/Domains/Frontend/MiniProjects/PomodoroTimer/style.css b/Domains/Frontend/MiniProjects/PomodoroTimer/style.css new file mode 100644 index 00000000..e8dc1712 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PomodoroTimer/style.css @@ -0,0 +1,52 @@ +body { + background: #fdf6e3; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + color: #333; +} + +.container { + background: #fff; + padding: 30px 50px; + border-radius: 10px; + box-shadow: 0 0 15px rgba(0,0,0,0.1); + text-align: center; + width: 320px; +} + +h1 { + margin-bottom: 20px; +} + +.timer { + font-size: 4rem; + margin-bottom: 20px; + font-weight: bold; + color: #d95550; +} + +.controls button { + padding: 10px 20px; + margin: 0 5px; + border: none; + background-color: #d95550; + color: white; + font-weight: bold; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.controls button:hover { + background-color: #b94443; +} + +.session-info p { + margin: 10px 0 0 0; + font-size: 1rem; +}