Project
Simple Stopwatch
Challenging
159 completions
~ 7 hours
4.6Tie HTML, CSS, and JavaScript together to make a functional stopwatch. Learn about setInterval and DOM methods.
Provided by
JetBrains Academy
About
The Simple Stopwatch project is a web application which allows users to time events with precision, offering features like start, stop, reset, and lap time recording. Built an interface that can display elapsed time prominently and provides buttons for easy control. With this project, users can track multiple laps, making it ideal for fitness routines, sports events, or any timing needs.
Graduate project
This project covers the core topics of the Introduction to Frontend course, making it sufficiently challenging to be a proud addition to your portfolio.
At least one graduate project is required to complete the course.
What you'll learn
Once you choose a project, we'll provide you with a study plan that includes all the necessary topics from your course to get it built. Here’s what awaits you:
Add the HTML elements to set the structure of the application.
Add the start and stop functionalities of the stopwatch.
Add the reset and lap functionalities of the stopwatch.
Optionally, style the application with your creativity.
Reviews
2 weeks ago
How to make a not too CPU heavy stopwatch and style it into a beautiful UI
4 weeks ago
It was good practice with regard to datetime calculations, DOM manipulation, and event-based programming using setInterval... For me the hardest part was dealing correctly with the various start-stop sequences of the stopwatch, but as I experimented, I finally figured out a fairly correct model.
1 month ago
This was a very fun project for me. I learned how to combine HTML, CSS and JS. Learned about DOM manipulation, events, state changes and timer handling. Making the buttons interactive was especially fun and such a rewarding and fulfilling experience.
4.6
Learners who completed this project within the Introduction to Frontend course rated it as follows: