Stopwatch Website

A fast, minimalist stopwatch web app built with vanilla HTML, CSS, and JavaScript for accurate timing down to the millisecond.

Features:
1) Start, Pause, and Reset stopwatch
2) Millisecond-level timing accuracy
3) Clean, centered UI with dark theme
4) Responsive layout for both mobile and desktop
5) Real-time updates using setInterval()
6) Start button becomes a resume button after stop is pressed

Built With:
HTML5 - structure
CSS3 - styling and layout
JavaScript - stopwatch logic and timing functionality

How It Works:
The stopwatch uses JavaScript setInterval() function to repeatedly update the display at fixed intervals of approximately 10 milliseconds. It tracks elapsed time by incrementing milliseconds, seconds, minutes, and hours over time. Each tick (interval) updates the DOM, which keeps the display in sync with the interval counters. The app simulates a stopwatch by incrementing values at fixed intervals. The website itself it hosted through Vercel.

Demo Link: https://stopwatch-website-sage.vercel.app/

Challenges:
One of the main challenges that I faced was trying to get my boxes and buttons to align and look symmetrical. I also had to figure out how to make certain elements bigger and more separated so I spent quite a while experimenting with style.css file and trying to make the website look good. On that note, I am also very proud of how the website ended up looking with its symmetry and dark color scheme. I had a small issue with my stopwatch box shaking, so I was very happy when I figured out how to minimize the shaking. Finally, I am very proud with regards to the project itself, since this is my first major website and the only one that I have made fully public.