In this question you will build the object class for a countdown timer. The time
In this question you will build the object class for a countdown timer. The timer object will have properties to record the minutes and seconds remaining, and to record the id value used with for the windows.setInterval() method. The timer object will also have a method that runs the timer, updating its value once per second or pausing the timer. A preview of the interface that controls the actions of the timer object is shown.
Do the following (80 Pts):
Use your code editor to open the FinalExam_HandsOn.html and FinalExam_HandsOn.js files provided with this exam (at the end). Enter your name and the date in the comment section of each file and save them.
Go to the FinalExam_HandsOn.html file in your code editor and link the page to the FinalExam_HandsOn.js file, deferring the script until after the page loads. Take some time to study the code of the file and then close it, saving your changes.
Return to the FinalExam_HandsOn.js file in your code editor. Directly below the Object Code comment add a constructor function for the timer object containing two parameters named min and sec. Set the timer.minutes property equal to min, the timer.seconds property equal to sec, and the timer.timeID property equal to null.
Directly below the timer() constructor function, add the runPause() method to the timer object class prototype. The runPause() method has three parameters named timer, minBox, and secBox. Within the anonymous function for the runPause() method add the tasks described in Steps 5 through 6.
Insert an if else statement testing whether timer.timedID is truthy (has a value). If it does, you will pause the timer by applying the window.clearInterval() method using timer.timeID as the parameter value; set timer.timeID equal to null. Otherwise, run the window.setInterval() method to start the timer, running the countdown() function every 1000 milliseconds; store the id of the setInterval() method in the timer.timeID property.
Add the countdown() function that updates the timer every second. Within the function, add an if else statement that does the following: a. If timer.seconds is greater than 0, decrease the value of timer.seconds by 1. b. Else, if timer.minutes is greater than 0, decrease the value of timer.minutes by 1 and set the value of timer.seconds to 59. c. Else the timer has reached 0:0; stop the timer by running the window.clearInterval() method with timer.timeID as the parameter value and then set the value of timer.timeID to null. d. After the if else statement, write the value of timer.minutes to minBox.value and timer.seconds to secBox.value
Scroll to the bottom of the file. Declare an instance of the timer object and name it myTimer using minBox.value and secBox.value as the parameter values for the initial value of the timer.
Create an onchange event handler for minBox that sets myTimer.minutes to minBox.value. Create an onchange event handler for secBox that sets myTimer.seconds to secBox.value.
Create an onclick event handler for the runPauseTimer button that runs an anonymous function that applies the runPause() method to myTimer using myTimer, minBox, and secBox as the parameter values.
Save your changes to the file and then load FinalExam_HandsOn.html in your web browser.
Verify that clicking the RUN/PAUSE button alternately starts and pauses the timer and that the timer correctly updates itself every second, stopping when it reaches 0:0.
Add Millisecs (20 Pts):
Another 20 points for adding another box for multiple of 100 millisecs as shows below. The millisecs box values decrease from 1000 to 0 with step of 100 and when hits zero, seconds value decreases.
Here, you have to change the .html, .css, and .js files accordingly.
Working Instructions:
Code for three files is copied below (copy the code into your favorite editor and Save As with file names below):
FinalExam_HandsOn.html
FinalExam_HandsOn.js
styles.css
Change the file(s) accordingly to implement the required functionality.
Submission Instructions: Store all files in a folder, zip them and upload here.
Code(s):
———————— FinalExam_HandsOn.html file code: ———————
Final Exam Hands-On
Timer
:
minutes seconds