Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for ClockWise

📌 About the Project: ClockWise

🔍 Inspiration

The inspiration behind ClockWise came from the everyday struggle to manage time efficiently — whether it's tracking productivity, staying punctual, or just needing a simple timer for daily tasks. I wanted to create a clean, interactive, and minimalistic web app that combines the three most essential time tools: digital clock, stopwatch, and countdown timer — all in one place.

🧠 What I Learned

While building this project, I deepened my understanding of:

DOM manipulation with JavaScript
Handling and updating real-time events
Using setInterval() and clearInterval()
Creating responsive UI using HTML and CSS
Structuring modular code for maintainability

I also practiced designing an intuitive user interface that makes time tracking simple and accessible.

🛠️ How I Built It

The project was built using:

HTML5 for the structure
CSS3 for styling and layout
Vanilla JavaScript to add interactivity and time-based functions

The application includes:

A real-time digital clock using Date() and setInterval()
A stopwatch that can start, pause, and reset
A countdown timer with custom input and alerts when time’s up

🚧 Challenges I Faced

Some of the challenges I encountered were:

Ensuring the stopwatch and timer didn’t conflict with each other when running simultaneously
Managing time in milliseconds accurately for the stopwatch
Designing a layout that works on both desktop and mobile screens
Making the UI smooth and bug-free during rapid button clicks
And one of the biggest challenge was the alarm sound(i tried using the web one) but then i fixed it by using the localb aram sound.

Solving these issues helped me get better at debugging, logic building, and understanding how browsers handle time-based functions.