Enhance the Clock apps stopwatch In this exercise, youll enhance the stopwatch module from extra exercise 15-1 to calculate the elapsed hours, and youll change the Clock application to show the elapsed hours. The enhanced application looks like this:

File names (code pasted down below assignment steps): clock.css, clock.js, index.html, library_clock.js, library_namespace.js, library_stopwatch.js, library_stopwatch_augment.js, library_utility.js Notice that theres 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 theres a new span tag for the hours value of the stopwatch with a default value of 00.

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, youll need to return an object that contains copies of the values in the elapsed objects properties.

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.

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. index.html

Digital clock with stopwatch

Clock

:

:

Stop Watch

00:

00:

00:

000

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); }; }; })();

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.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

library_stopwatch_augment.js "use strict";

library_utility.js

"use strict";

myapp.utility.padSingleDigit = function(num) { return (num Digital clock with stopwatch -Clock 11: 34: 14 AM 9/28/2015 Stop Watch Start Stop Reset 00: 00: 07: 360 Digital clock with stopwatch -Clock 11: 34: 14 AM 9/28/2015 Stop Watch Start Stop Reset 00: 00: 07: 360