Description
Extra 15-2 Enhance the Clock app’s stopwatch
1. Open the HTML and JavaScript files
2. Notice that there’s a new library file named library_stopwatch_augment.js. In the HTML file, note that the script tag for this new library comes after the script tag for the stopwatch library. Also note that there’s a new span tag for the hours value of the stopwatch with a default value of “00”.Notice that there’s a new library file named library_stopwatch_augment.js. In the HTML file, note that the script tag for this new library comes after the script tag for the stopwatch library. Also note that there’s a new span tag for the hours value of the stopwatch with a default value of “00”.
3. Change the library_stopwatch.js file so the module object has a read-only property that exposes the values of the private elapsed object. NOTE: Because elapsed is an object, if you return it directly, its properties can be changed even if the property that returns it is non-configurable. Thus, you’ll need to return an object that contains copies of the values in the elapsed object’s properties.
4. In the library_stopwatch_augment.js file, add code that augments the stopwatch module by adding a method named getElapsedTimeWithHours. Within this new method, get the object from the read-only property from step 2, add an hours property to it, calculate the number of elapsed hours, adjust the number of elapsed minutes, and return the adjusted object.
5. Change the code in the clock.js file so the displayTick callback function uses the getElapsedTimeWithHours function from step 3 to display the hours in the s_hours span tag. Be sure to reset this span tag in the resetStopwatch callback function.
Files:
clock.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 450px;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
color: blue;
}
label {
float: left;
width: 11em;
text-align: right;
padding-bottom: .5em;
}
input {
margin-right: 1em;
margin-bottom: .5em;
}
fieldset {
margin-bottom: 1em;
}
#date {
margin-left: 2em;
}
clock.js
“use strict”;
(function() {
// aliases
var t = myapp.time;
var u = myapp.utility;
// callback function for displaying clock time
var displayTime = function(now) {
u.$(“hours”).firstChild.nodeValue = now.hours;
u.$(“minutes”).firstChild.nodeValue = u.padSingleDigit(now.minutes);
u.$(“seconds”).firstChild.nodeValue = u.padSingleDigit(now.seconds);
u.$(“ampm”).firstChild.nodeValue = now.ampm;
// display date in “m/d/yyyy” format – correct for zero-based month
var date = (now.getMonth() + 1) + “/” + now.getDate() + “/” + now.getFullYear();
u.$(“date”).firstChild.nodeValue = date;
};
// callback function for displaying stopwatch elapsed time
var displayTick = function(elapsed) {
u.$(“s_minutes”).firstChild.nodeValue = u.padSingleDigit(elapsed.minutes);
u.$(“s_seconds”).firstChild.nodeValue = u.padSingleDigit(elapsed.seconds);
u.$(“s_ms”).firstChild.nodeValue = elapsed.milliseconds;
};
// callback function for clearing stopwatch elapsed time display
var resetStopwatch = function() {
u.$(“s_minutes”).firstChild.nodeValue = “00”;
u.$(“s_seconds”).firstChild.nodeValue = “00”;
u.$(“s_ms”).firstChild.nodeValue = “000”;
};
// onload event handler
window.onload = function() {
// start clock
t.clock.start(displayTime);
// set up stopwatch event handlers
u.$(“start”).onclick = function() {
t.stopwatch.start(displayTick);
};
u.$(“stop”).onclick = function() {
t.stopwatch.stop();
};
u.$(“reset”).onclick = function() {
t.stopwatch.reset(resetStopwatch);
};
};
})();
index.html
