Code Challenge #6: Build A Pomodoro Timer

William Imoh
👁️ 2,313 views
💬 comments

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.

Table of Contents

    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.

    1. The Play button starts the timer.
    2. The Pause button stops the timer.
    3. 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!

    William Imoh

    24 posts

    Developer, Developer Advocate, Changing the world one semi-colon at a time!