How to create a timer with progress bar? | Machine Coding Round | React.js | HTML | CSS | JavaScript

This question can come up in an interview process as a Machine Coding Round question or a take home assignment.

In this question, you need to build a timer and a progress bar. The timer that goes from N seconds to 0 where the it decreases with every passing second. Simultaneously, the progress bar increases as the timer decreases. This is a common use-case for a lot of companies as part of their authentication flows or confirmation flows. Mostly it is coupled with OTP verification.

Mockups

Demo

Functional Spec

• Timer should auto-start on load.
• Timer should start from N seconds (let say 100) to 0. The progress bar should be in sync with the timer. As the timer decreases the progress bar should increase accordingly.

Submission

Please start the timer before starting and finish your solution within 30-45 mins. Share your solution with us on Twitter or LinkedIn.