Pomodoro Timer - Cosas Learning

Source Code of Pomodoro Timer

Html, Source Code, Web Development / By

This project is a web-based Pomodoro Timer, which helps users manage their time effectively by alternating between focused work intervals and short breaks. The project incorporates HTML, CSS, and JavaScript to provide a visually appealing and functional timer. We have provided an optimized version of the code with comments to explain each step.

What is Pomodoro Timer

The Pomodoro Timer is a time management technique that helps you work more efficiently. You break your work into 25-minute focused intervals (Pomodoros) followed by short 5-minute breaks. After four Pomodoros, take a longer break. This method can boost productivity and concentration.

Folder Structure

Pomodoro Timer - Cosas Learning

Resources

Prerequisite Sites

Images

Pomodoro Timer - Cosas Learning

Codes

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer | Cosas Learning</title>
    <!-- CDN Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" 
    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" 
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Importing the CSS file -->
    <link rel="stylesheet" href="style.css">     
</head>
<body>
  <div class="container">
    <header>
      <div class="logo"><img src="logo.png" alt="Logo"></div>
      <div class="heding"><h1>Pomodoro Timer</h1></div>
    </header>
    <div class="hero_section">
      <div class="time_box">
        <span id="time"></span>
        <div class="btns_box">
          <button id="start_btn" class="show"><i class="fa-solid fa-play"></i></button>
          <button id="pause_btn" class="hide"><i class="fa-solid fa-pause"></i></button>
          <button id="reset_btn" class="hide"><i class="fa-solid fa-rotate-right"></i></button>
        </div>
      </div>
      <div class="focus_break_btns">
        <button id="shortbreak" class="btn">Short Break</button>
        <button id="focus" class="btn active_btn">Focus</button>
        <button id="longbreak" class="btn">Long Break</button>
      </div>        
    </div>
  </div>
  <!-- Importing the JavaScript file -->
  <script src="script.js"></script>
</body>
</html>
  • The HTML file sets up the structure of the web page. It includes a header with a logo and the title “Pomodoro Timer,” a timer section, and buttons for focus, short breaks, and long breaks.
  • It references external resources, such as the Font Awesome library for icons and external CSS for styling.

CSS

/* CSS styles optimized for the project */

/* Importing Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Base styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Variable definitions */
:root {
    /* Colors */ 
    --white_color: rgb(255, 255, 255);
    --orange_color: rgb(255, 165, 89);
    --orange_dark_color: rgb(255, 96, 0);
    --background_color: linear-gradient(to top left, #b156d9, #213780);
    --box_shadow : rgba(0,0,0,0.1);
}

/* Container styling */
.container {
    width: 100%;
    min-height: 100vh;
    background-image: var(--background_color);
    padding-bottom: 1rem;
}

/* Header styling */
header {
    padding: 2rem 0;
    margin: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo styling */
.logo {
    width: 20rem;
    height: 6rem;
}

.logo img {
    width: 100%;
    height: 100%;
}

/* Heading styling */
h1 {
    color: var(--white_color);
    text-align: center;
    padding: 1rem;
    border-bottom: 0.2rem var(--orange_color) solid;
    text-transform: uppercase;
}
/* Hero Section*/ 
.hero_section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
   
/* Pomodoro Timer Styling*/ 
.time_box {
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 0.5rem solid var(--orange_color);
    border-radius: 50%;
    margin: 2rem;
    box-shadow: 0rem 0rem 0.625rem 2.5rem var(--box_shadow);
}
#time {
    text-align: center;
    color: var(--white_color);
    font-size: 5rem;
    font-weight: 600;
}
.btns_box {
    display: flex;
    justify-content: center;
    gap: 2rem;
}
button {
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.5s;
}
button:hover {
    background-color: var(--orange_dark_color);
}
#start_btn,
#pause_btn,
#reset_btn {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--white_color);
    background-color: var(--orange_color);
    transition: 0.5s;
}
#start_btn:hover,
#pause_btn:hover,
#reset_btn:hover {
    background-color: var(--orange_dark_color);
}
.focus_break_btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    border: 0.5rem solid var(--orange_color);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0rem 0rem 0.625rem 2.5rem var(--box_shadow);
}
.btn {
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    background-color: var(--orange_color);
    color: var(--white_color);
}
.active_btn {
    background-color: var(--orange_dark_color);
    color: var(--white_color);
}
.hide {
    display: none;
}
.show {
    display: block;
}
  • The CSS file provides styling for the entire web page, including the logo, header, timer, and buttons.
  • It sets variables for colors, fonts, and shadows, which are used throughout the project.
  • The styles are optimized for a visually appealing Pomodoro Timer user interface.

JavaScript

//Pomodoro Timer Variables
let time = document.getElementById("time");
let startBtn = document.getElementById("start_btn");
let resetBtn = document.getElementById("reset_btn");
let pauseBtn = document.getElementById("pause_btn");
let buttons = document.querySelectorAll(".btn");
let focusBtn = document.getElementById("focus");
let shortBreakBtn = document.getElementById("shortbreak");
let longBreakBtn = document.getElementById("longbreak");

let set;
let minCount = 24;
let count = 59;
let paused = true;
let active = "focus";
time.textContent = `${minCount + 1}:00`;

// Appending Zero If Min or Sec Value Less Than 10
const appendZero = (value) => {
  value = value < 10 ? `0${value}` : value;
  return value;
};

// Function For Removing Active Color
const removeActiveClr = () => {
  buttons.forEach((btn) => {
    btn.classList.remove("active_btn");
  });
};

// Function For Start Button
startBtn.addEventListener("click", () => {
  resetBtn.classList.add("show");
  pauseBtn.classList.add("show");
  startBtn.classList.add("hide");
  startBtn.classList.remove("show");
  if (paused) {
    paused = false;
    time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
    set = setInterval(() => {
      count--;
      time.textContent = `${appendZero(minCount)}:${appendZero(count)}`;
      if (count == 0) {
        if (minCount != 0) {
          minCount--;
          count = 60;
        } else {
          clearInterval(set);
        }
      }
    }, 1000);
  }
});

// Function For Pause Button
pauseBtn.addEventListener(
  "click",
  (pauseTimer = () => {
    paused = true;
    clearInterval(set);
    startBtn.classList.remove("hide");
    pauseBtn.classList.remove("show");
    resetBtn.classList.remove("show");
  })
);

// Function For Reset Button
resetBtn.addEventListener(
  "click",
  (resetTime = () => {
    pauseTimer();
    switch (active) {
      case "focus":
        minCount = 24;
        break;
      case "long":
        minCount = 14;
        break;
      case "short":
        minCount = 4;
        break;
    }
    count = 59;
    time.textContent = `${minCount + 1}:00`;
  })
);

// Function For Short Break Button
shortBreakBtn.addEventListener("click", () => {
  active = "short";
  removeActiveClr();
  shortBreakBtn.classList.add("active_btn");
  pauseTimer();
  minCount = 4;
  count = 59;
  time.textContent = `${appendZero(minCount + 1)}:00`;
});

// Function For Focus Button
focusBtn.addEventListener("click", () => {
  active = "focus";
  removeActiveClr();
  focusBtn.classList.add("active_btn");
  pauseTimer();
  minCount = 24;
  count = 59;
  time.textContent = `${minCount + 1}:00`;
});

// Function For Long Break Button
longBreakBtn.addEventListener("click", () => {
  active = "long";
  removeActiveClr();
  longBreakBtn.classList.add("active_btn");
  pauseTimer();
  minCount = 14;
  count = 59;
  time.textContent = `${minCount + 1}:00`;
});
  • The JavaScript file contains code for the Pomodoro Timer functionality.
  • It sets up variables to control the timer, buttons, and the active timer mode (focus, short break, or long break).
  • Functions are defined for starting, pausing, and resetting the timer, as well as for switching between different timer modes.
  • Event listeners are used to trigger these functions when buttons are clicked.

This project creates a Pomodoro Timer web application with adjustable timer intervals for focus and breaks. Users can start, pause, and reset the timer. It is visually appealing and functional, incorporating external resources for icons and fonts. The JavaScript code manages the timer and handles user interactions effectively.

YouTube Video

Download Source Code

Download Files

Don’t forget to share this post!

Follow by Email
Facebook
Twitter
Pinterest
LinkedIn
Share
Instagram
Telegram
WhatsApp

Click Here : To Show Your Support! 😍

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *