Beachside Focus Timer
- What this project is
This project is called Beachside Focus Timer which is a simple, calming 25-minute focus timer inspired by the beach.
It comes with:
- A fixed 25-minute session (no overthinking, no procrastination, just start)
- Start, Pause, and Restart buttons
- A custom beach background drawn by me for a soft, peaceful vibe
- Why I made this
I wanted a timer that didn’t feel stressful or boring. I also struggle with focusing , when timers hve the option to reduce time , my hand are uncontrollable. So, I made one which gives me a fixed timing .
Most timers are just numbers counting down, I wanted this one to feellike sitting by the ocean while getting your life together. Also… I wanted an excuse to include my own artt
- How I made this
I built this using basic logic for a timer system:
- A fixed 25-minute countdown
- Functions for start, pause, and restart
- A clean & minimalist layout so it’s easy to use use
- coded using html ,javascript and css
- Struggles & what I learnedrned
Not gonna lie , timers seemed easy… until i actually made one.
Some things that were tricky:
- Getting pause and restart to work smoothly
- Making sure the timer doesn’t glitch or reset randomly
- Balancing design + functionality
- and embarrassingly i spent around 30 minutes figuring out how to make the border .
What I learned:
- Even simple projects need solid logic
- visuals matter a LOT more than expected
- It is beginner friendly
- And honestly… adding your own art makes everything feel 10x cooler
note:LOCK IN <3t;3