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

Digital clock with stopwatch

library_clock.js
“use strict”;

myapp.time.clock = (function() {
// private state
var displayTimeCallbackFunction;

var displayCurrentTime = function() {
var now = new Date();

// add own properties to instance of Date object
now.hours = now.getHours();
now.minutes = now.getMinutes();
now.seconds = now.getSeconds();
now.ampm = “AM”; // set default value

// correct hours and AM/PM value for display
if (now.hours > 12) { // convert from military time
now.hours = now.hours – 12;
now.ampm = “PM”;
} else { // adjust 12 noon and 12 midnight
switch (now.hours) {
case 12: // noon
now.ampm = “PM”;
break;
case 0: // midnight
now.hours = 12;
now.ampm = “AM”;
}
}
// use callback function to display time
if (displayTimeCallbackFunction && typeof displayTimeCallbackFunction === ‘function’) {
displayTimeCallbackFunction(now);
}
};

// public methods
return {
start: function(callback) {
displayTimeCallbackFunction = callback; // store callback for later use by timer
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
}
};

})();

library_namespace.js
“use strict”;

// create the namespace and nested namespace creator method
var myapp = myapp || {};

myapp.addNamespace = function (namespace) {
var currentName;
var parent = this;
var names = namespace.split(“.”);

for (var i in names) {
currentName = names[i];
parent[currentName] = parent[currentName] || {};
parent = parent[currentName];
}
return this;
}.bind(myapp);

// add the namespaces the application will use
myapp.addNamespace(“time.clock”).addNamespace(“time.stopwatch”)
.addNamespace(“utility”);

library_stopwatch_augment.js
“use strict”;

library_stopwatch.js
“use strict”;

myapp.time.stopwatch = (function() {
// private state
var timer;
var elapsed = { minutes:0, seconds:0, milliseconds:0 };
var displayTickCallbackFunction;

var tickStopwatch = function() {
// increment milliseconds by amount of interval
elapsed.milliseconds = elapsed.milliseconds + 10;

// roll over milliseconds to seconds, seconds to minutes
if (elapsed.milliseconds === 1000) {
elapsed.seconds++;
elapsed.milliseconds = 0;
}
if (elapsed.seconds === 60) {
elapsed.minutes++;
elapsed.seconds = 0;
}

// use callback to display new stopwatch time
if (displayTickCallbackFunction && typeof displayTickCallbackFunction === ‘function’) {
displayTickCallbackFunction(elapsed);
}
};

// public methods
return {
start: function(callback) {
displayTickCallbackFunction = callback; // store callback for later use by timer
tickStopwatch();
timer = setInterval(tickStopwatch, 10);
return this;
},
stop: function() {
clearInterval(timer);
return this;
},
setMinutes: function(min) {
if (!isNaN(min)) {
if (min >= 0 && min <= 60) {
elapsed.minutes = min;
}
}
return this;
},
reset: function(callback) {
clearInterval(timer);
elapsed = { minutes:0, seconds:0, milliseconds:0 };

// use callback to reset stopwatch display
if (callback && typeof callback === ‘function’) {
callback();
}
return this;
}
};
})();

library_utility.js
“use strict”;

myapp.utility.padSingleDigit = function(num) {
return (num < 10) ? “0” + num : num;
};
myapp.utility.$ = function(id) { return document.getElementById(id); };