Last week on the code challenge #5 we looked at building a movie player using a provided API. Here is the solution to the challenge built with Vue.js.
This week we’ll be building a Pomodoro timer. A Pomodoro timer is a time management tool which breaks down task completion time into intervals of about 25 minutes with a short break between each interval.
The Challenge
In this challenge, we are required to create a countdown timer which starts from 25 minutes all the way down to zero. This timer should have controls to pause, play and reset the time. The end product should look like this.
The goal is to be able to control the timer using the buttons provided for play, pause and reset. This challenge can be completed using any tool, framework or technology.
Requirements
Feel free to use any tool to complete this challenge. However, here are the requirements of the challenge.
- The Play button starts the timer.
- The Pause button stops the timer.
- The Reset button returns the timer to its original state of 25 minutes.
Goals for this Challenge
- Understand timing functions and implement them.
- Manipulate DOM elements effectively.
Bonus
Notice the text on top of the timer that changes with each button click? To make the Pomodoro timer more inspiring and fun, try to change the text on top of the timer at the click of specific buttons and also at various set times while the timer is running.
Resources
Check out the base code provided for the challenge containing HTML and CSS.
Fork this base codepen as your starting point
Community
- Post your solutions in the comment section of this post.
- Post your solutions on twitter with the hashtag #scotchchallenge
- Join the Slack group to interact with others and also post your solution on the Slack channel #code challenge.
Solution
The solution to this challenge will be released on Sunday. Happy Coding!