Merge pull request #215 from Preeti8021/pomodoro

Pomodoro Timer
shrey141102 · Jan 9, 2024 · fb19b84 · fb19b84
2 parents 7ef6216 + 15126e6
commit fb19b84
Show file tree

Hide file tree

Showing 7 changed files with 281 additions and 0 deletions.
diff --git a/Pomodoro Timer/Readme.md b/Pomodoro Timer/Readme.md
@@ -0,0 +1,19 @@
+# Pomodoro Timer
+
+## Overview:
+The Pomodoro Timer is a productivity-enhancing web application designed to improve focus and manage time effectively. Following the Pomodoro Technique, it breaks work into intervals, typically 25 minutes in length, separated by short breaks of 5 minutes. This simple and interactive tool helps users maintain a balanced workflow and boost productivity.
+
+![Pomodoro Timer](pomodoro.png)
+
+## Technologies Used:
+- **HTML:** The web page structure is defined using HTML, incorporating elements for the timer display and user interface.
+
+- **CSS:** Styling and layout are managed using CSS, ensuring an intuitive and visually appealing design for an optimal user experience.
+
+- **JavaScript:** The Pomodoro Timer's functionality is implemented using JavaScript. It handles the countdown timer, user interactions, and session management.
+
+## Features:
+
+- **Notifications:** Receive notifications at the end of each interval to signal the transition between work and break periods.
+
+- **User-Friendly Interface:** The application provides a straightforward and easy-to-use interface for seamless time management.
diff --git a/Pomodoro Timer/index.html b/Pomodoro Timer/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Pomodoro Timer</title>
+  </head>
+  <body>
+    <!-- <div><p class="sub">Its time to turn <br>
+        on your ultra mode</p>
+    </div> -->
+    <div class="container">
+        <header><h1>Pomodoro Timer</h1></header>
+        <!-- <p class="sub">It's time to turn on your ULTRA MODE</p> -->
+      <div class="pomodoro">
+        <div id="timer">25:00</div>
+        <div class="buttons">
+          <button id="startBtn" onclick="startTimer()">Start</button>
+          <button id="stopBtn" onclick="stopTimer()">Stop</button>
+          <button id="resetBtn" onclick="resetTimer()">Reset</button>
+        </div>
+      </div>
+    </div>
+    <!-- <div><p class="sub">Your Ultra Mode !!</p>
+    </div> -->
+
+    <div id="overlay" class="overlay">
+      <div class="popup">
+        <p>Break Time!</p>
+        <div id="breakTimer">5:00</div>
+        <button class="resetBtn" onclick="resumeTimer()">Back To Work!</button>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+
+  </body>
+  <footer><div class="footer">Made with ❤️ by <a href="https://www.github.com/Preeti8021">Preeti8021</a></div></footer>
+</html>
diff --git a/Pomodoro Timer/pomodoro.png b/Pomodoro Timer/pomodoro.png
diff --git a/Pomodoro Timer/script.js b/Pomodoro Timer/script.js
@@ -0,0 +1,67 @@
+let timerInterval;
+let breakInterval;
+let timer = 10; // 25 minutes in seconds
+let breakTime = 300; // 5 minutes in seconds
+
+function startTimer() {
+    document.getElementById('startBtn').disabled = true;
+    document.getElementById('stopBtn').disabled = false;
+    timerInterval = setInterval(updateTimer, 1000);
+}
+
+function stopTimer() {
+    clearInterval(timerInterval);
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('stopBtn').disabled = true;
+}
+
+function updateTimer() {
+    let minutes = Math.floor(timer / 60);
+    let seconds = timer % 60;
+    document.getElementById('timer').innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+    if (timer === 0) {
+        clearInterval(timerInterval);
+        showBreakPopup();
+    } else {
+        timer--;
+    }
+}
+
+function showBreakPopup() {
+    document.getElementById('overlay').style.display = 'flex';
+    breakInterval = setInterval(updateBreakTimer, 1000);
+}
+
+function updateBreakTimer() {
+    let minutes = Math.floor(breakTime / 60);
+    let seconds = breakTime % 60;
+    document.getElementById('breakTimer').innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+    if (breakTime === 0) {
+        clearInterval(breakInterval);
+        resetTimer();
+        document.getElementById('overlay').style.display = 'none';
+        document.getElementById('startBtn').disabled = false;
+    } else {
+        breakTime--;
+    }
+}
+
+function resetTimer() {
+    clearInterval(timerInterval);
+    clearInterval(breakInterval);
+    timer = 1500;
+    breakTime = 300;
+    document.getElementById('timer').innerText = '25:00';
+    document.getElementById('overlay').style.display = 'none';
+    document.getElementById('startBtn').disabled = false;
+    document.getElementById('stopBtn').disabled = true;
+}
+
+function resumeTimer() {
+    clearInterval(breakInterval);
+    resetTimer();
+    document.getElementById('overlay').style.display = 'none';
+    startTimer();
+}
diff --git a/Pomodoro Timer/style.css b/Pomodoro Timer/style.css
@@ -0,0 +1,148 @@
+@import url("https://fonts.googleapis.com/css2?family=Ephesis&family=Merriweather&family=Sevillana&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Merriweather", serif;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: 100vh;
+  background-color: #ffb6c1;
+}
+
+header {
+  font-size: 22px;
+  margin-bottom: 100px;
+}
+
+.sub{
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+.container h1{
+    color: black;
+}
+.container {
+  text-align: center;
+  position: relative;
+  color: #ffb6c1;
+}
+.container::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 220px;
+  height: 220px;
+  border-radius: 50%;
+  background-color: #ffb6c1;
+  border: 2px solid black;
+  z-index: -2;
+}
+.container::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px; 
+    height: 200px; 
+    border-radius: 50%;
+    background-color: #000000; 
+    border: 2px solid black;
+    z-index: -1; 
+}
+
+.pomodoro {
+  font-size: 30px;
+}
+
+#timer {
+  font-size: 2em;
+  margin: 100px 0 100px 0;
+}
+
+.buttons {
+  margin: 20px;
+}
+
+#startBtn,
+#stopBtn,
+#resetBtn {
+  padding: 10px 10px;
+  margin: 0 10px;
+  font-size: 20px;
+  cursor: pointer;
+  color: black;
+  background-color: #ffb6c1;
+}
+
+.overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  align-items: center;
+  justify-content: center;
+}
+
+.popup {
+  padding: 50px 20px;
+  border-radius: 10px;
+  text-align: center;
+  height: 30vh;
+  width: 30vw;
+  display: block;
+  background-color: black;
+  color: white;
+}
+#breakTimer {
+  font-size: 2em;
+  margin: 30px 0 30px 0;
+}
+.popup p {
+  font-size: 25px;
+}
+
+.popup button {
+  padding: 10px 5px;
+  font-size: 16px;
+  font-family: "Merriweather", serif;
+  cursor: pointer;
+  background-color: #ffb6c1;
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  background-color: black;
+  color: white;
+  width: 100%;
+  text-align: center;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  font-size: 16px;
+  letter-spacing: 1.2px;
+}
+
+footer a {
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+}
+
+footer a:hover,
+footer a:active,
+footer a:focus {
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+}
diff --git a/README.md b/README.md
@@ -87,6 +87,8 @@ Effortlessly convert weights between different units with the Weight Converter.
 Unscramble your way through words with the Word Scramble game. Exercise your vocabulary and pattern recognition skills in this engaging word puzzle.
 # Snake Game
 Embark on a classic gaming adventure with the Snake Game. Navigate the snake to collect points while avoiding collisions, offering a nostalgic gaming experience.
+# Pomodoro Timer
+The Pomodoro Timer is a minimalist time management tool based on the Pomodoro Technique. Enhance productivity with customizable work intervals, short breaks, and notifications.
 
 <h2>🍰 Contribution Guidelines:</h2>
 

diff --git a/script.js b/script.js
@@ -393,6 +393,11 @@ const projects = [
   link: "Space-invaders/index.html", 
   image: "https://gamerhub.co.uk/wp-content/uploads/2020/11/what.jpg" 
   },
+  { title: "Pomodoro Timer",
+  discription: "A pomodoro timer for your productivity built with HTML,CSS and JS.", 
+  link: "Pomodoro Timer/index.html", 
+  image: "https://www.pexels.com/photo/alarm-clock-lying-on-multicolored-surface-1314544/" 
+  },
 ];
 
 const cards = document.getElementsByClassName('cards');