When I first started learning JavaScript, I realized that simply watching tutorials wasn't helping me build confidence. I could understand the concepts while watching, but when it came to building something on my own, I often got stuck.
So after learning the basics of DOM selection and manipulation, I decided to build a simple timer from scratch.
Before writing any code, I tried something different.I designed the UI in Figma first. It was my first time using Figma, and although the design was pretty simple, it gave me a clear picture of what I wanted to build before opening VS Code.
One thing I learned while building this project is that HTML isn't just about throwing
s everywhere. Breaking the interface into meaningful sections made the code much easier to organize. I separated the page into a title, a timer display, and a button section, which made both the HTML and CSS feel much cleaner.
The JavaScript part was where most of the learning happened.
At first, I selected the timer digits using querySelector(). It took me a while to realize that it only returns the first matching element. Since my timer display had multiple elements, I had to switch to querySelectorAll(), which gave me access to all of them.
Another interesting lesson came from event listeners. Adding a click event to the Start button was straightforward, but I ran into an unexpected bug. Every time I clicked the Start button, the timer started running faster. After some debugging, I realized that every click was creating a brand new setInterval() instead of reusing the existing one.
The fix was surprisingly simple. I stored the interval ID returned by setInterval() and made sure only one interval could run at a time. That also made implementing the Pause and Reset buttons much easier using clearInterval().
Not every problem was related to JavaScript. At one point, none of my code seemed to work because I had linked my script.js file incorrectly. The browser kept showing a 404 error, and after checking the file path, everything started working. It was a good reminder that sometimes the problem isn't in the code itself but in how the project is set up.
By the end of this project, I had a working timer, but more importantly, I gained a much better understanding of how different JavaScript concepts work together.
What I learned from this project
Designing a simple UI in Figma before coding
Structuring HTML into meaningful sections
Styling layouts using Flexbox
Using querySelector() and querySelectorAll()
Handling user interactions with addEventListener()
Using setInterval() and clearInterval()
Understanding variable scope
Debugging common beginner mistakes using the browser console
This project may look small, but it taught me far more than I expected. Instead of memorizing JavaScript syntax, I got to understand why each line of code was needed and how everything connected together.
Next, I'm planning to add more features like a countdown mode, keyboard shortcuts, and saving the timer state using localStorage.
If you're learning JavaScript too, I highly recommend building small projects like this instead of only watching tutorials. You learn a lot more when you're forced to solve real problems yourself.
Top comments (0)