Skip to content

bojadlabalaji/pomodoro-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pomodoro Web App

This is a fully customizable Pomodoro Timer web app designed to boost productivity using the Pomodoro technique. The app features customizable work/break intervals, iteration tracking, and dynamic animations to keep users engaged during their work sessions.


Features

  • Custom Timer: Set work and break intervals, with default settings of 25 minutes for work and 4 minutes for short breaks.
  • Iteration Management: Track your progress across Pomodoro iterations. After four work sessions, the app gives a longer break of 15–30 minutes.
  • Dynamic GIF Animations: Visual feedback based on the timer state
  • Circular Progress Bar: Around the GIF area to visually represent the remaining time in each work/break session.
  • Iteration Indicator: Shows completed and pending Pomodoro sessions using circular tick marks, with completed iterations highlighted.
  • Fully Responsive: Optimized for mobile and desktop screens.
  • Color Scheme: Follows the 70-20-10 design rule to ensure a visually balanced UI.

Screenshots

Add screenshots here showing key features of your app.


How to Use

  1. Clone the repository:
    git clone https://github.com/YOUR-USERNAME/pomodoro-app.git
  2. Open the index.html file in your browser, or use a local development server.
  3. Adjust the work and break intervals using the input fields (defaults to 25 minutes for work and 4 minutes for short breaks).
  4. Press Start to begin the timer.
  5. Pause or Reset the timer using the corresponding buttons.
  6. Track your progress with the iteration indicator and progress bar around the GIF animation.
  7. Enjoy a longer break after four work sessions.

Tech Stack

  • HTML5/CSS3: For structure and styling.
  • JavaScript: Core functionality of the Pomodoro timer and interactions.

Installation & Setup

  1. Download or clone the repository.
  2. Open the project folder and run it locally using a web server (optional but recommended for testing animations and progress bars).
  3. Customize work and break intervals in the index.js file if needed.

Future Improvements

  • Adding user accounts to save Pomodoro sessions.
  • Adding sound notifications for session completion.
  • Adding a dark mode toggle.

Contributing

Feel free to fork this repository and contribute by submitting a pull request.


License

This project is licensed under the MIT License - see the LICENSE file for details.


About

Simple Pomodoro App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages