Recitation Project / Assignment #7

Countdown Timer using JavaScript

Due: Monday April 17, 2017 - 11:55pm

See Addendum for updates.

This assignment requires you to implement a simple Countdown timer using JavaScript. Several considerations motivate this assignment. First, timed events can be useful in a variety of contexts, and the basic countdown timer requested here is an excellent start. Second, we are approaching the point in the semester where AJAX is introduced. More practice with JavaScript is good preparation.

The requirements of assignment are:

  1. Create a webpage with simple and visually clear header and footer.
  2. Present an input field where a user may enter a countdown time in seconds.
  3. Provide a Start Button to initiate the countdown timer.
  4. Display the current time remaining on the timer in minutes and seconds.
  5. As each second passes, your display needs to update the time remaining display.
  6. Use setTimeout() functionality from JavaScript to implement your timer.
  7. Provide reset button which stops the timer and clears both in the input and time remaining displays.
  8. Use clearTimeout()functionality of JavaScript when reseting the timer.
  9. The Start Button must be disabled during countdown; only the Reset Button should be enabled.
  10. Parse only integer values as input and always assume input is being provided in seconds.

Converting from seconds remaining to minutes and seconds remaining can be tricky if you don't think through the tools readily available to you. Keeping this in mind, you will want to make sure you are up to speed on integer division and modulo operators in JavaScript.

You will submit a single zip file "lastname.zip" with the required files. Submission will be through Canvas. Please host it on your CS account and provide the URL to your page as a comment during the Canvas submission, keep this assignment separate from your previous assignments.

To do this assignment, please use a text editor and type all the necessary tags by hand. Please do not use any web development application to create your home page. Your work will be tested with Chrome on department machines

Addendum

None.