Welcome to my Customizable Pomodoro Timer project! This is a practical mini-project I developed to hone my web development skills and create a tool that I can use in my daily life. This timer is designed to help you stay productive by managing your work and break intervals effectively. With a focus on flexibility and customization, this tool can be tailored to suit your personal preferences and workflow.
difficulty : 3/10
- This timer follows the Pomodoro Technique, a popular time management method that alternates between focused work sessions and short breaks. It's an excellent way to enhance productivity and maintain focus over longer periods.
- You can adjust the number of intervals to match your work habits. Whether you prefer shorter or longer work sessions, the timer adapts to your needs.
- The focus duration is fully customizable, allowing you to set the exact amount of time you want to work on a task. Whether it's 25 minutes or 2 hours, you have full control.
- Rest periods are just as important as work sessions. You can customize the length of your breaks to ensure you recharge effectively between work intervals.
-
Enhance your focus and relaxation with carefully selected sound effects:
- Light Tick Sounds: Subtle ticking sounds play during work sessions, providing a gentle auditory cue to help maintain your focus. (well tried and well advised)
- Session Separation Sounds: Beautiful and cozy sounds mark the end of each session, signaling it's time to take a break or start a new work interval. These sounds are designed to be pleasant and non-intrusive, ensuring a smooth transition between work and rest periods, with a slightly unique sound to reward finishing the full session!
- Personalize your timer with different background options. You can choose from a variety of preset wallpapers or upload your own image. The timer also includes a custom blur feature, allowing you to adjust the background's sharpness to your liking.
- Switch between three unique themes: Lagoon, Owl, and Monkai. Each theme offers a distinct visual style, ensuring that the timer not only functions well but also looks great.
- All your custom settings are saved in your browser's local storage. This means that your preferences are retained even after closing the browser, providing a seamless and consistent experience.
- The timer is designed to be flexible and responsive, ensuring it works beautifully on a variety of screen sizes—from desktops to tablets and smartphones. This makes it easy to use whether you're at your desk or on the go.
- HTML: The foundation of the website's structure.
- CSS: Used to style the interface and create visually appealing layouts.
- SASS: Employed for more organized and maintainable CSS, with features like variables and mixins.
- JavaScript: Powers the interactivity and functionality of the timer, handling everything from timing logic to theme switching.
Started with Node.js but It was a bit of of an overkill
This project is organized with separation of concerns in mind. HTML, CSS, SASS, and JavaScript files are neatly structured in their respective directories, making it easier to maintain and expand. A compressed version of the files is also available, optimized for hosting and deployment.
Description: The timer in Lagoon theme, showcasing its vibrant and calming colors.
Description: Modern UI for adjusting to your prefrences.
Description: The timer in Monkai theme, with a natural feel and a bold appearance.
Description: for all of you night owls out there! [cyberpunk enthusiastes included].
Description: The timer displayed on various devices, demonstrating its responsive design.
Description: Clear menu interface, with the option to blur the background as much as ayou prefer.
- Download or Clone the Repository: Start by downloading or cloning this repository to your local machine.
- Run NPM Commands:
npm installandnpm startare preferred for a smooth experience - Customize Your Timer: Use the settings to adjust intervals, durations, and appearance to your liking.
- Start the Timer: Begin your focus session and enjoy the productivity boost!
- Return whenever you want: Return at any time! Your settings are always saved at your own device!.
If you'd like to contribute to this project, feel free to fork the repository and submit a pull request. Any suggestions, improvements, or additional features are welcome!
This project is open-source and available under the MIT License.