I'm really stuck on this JavaScript assignment. The clock's app stopwatch has to be enhanced. I already added the read-only property in the library_stopwatch.js file, but I'm not even sure if I added it correctly. Here are the steps below:

- Note that there is 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 the previous step, 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.

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;

}

INDEX.HTML

Digital clock with stopwatch

Clock

:

:

Stop Watch

00:

00:

00:

000

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_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;

}

};

//read-only

Object.defineProperties(stopwatch, {

"getElapsed": {

get: function() { return

minutes = elapsed.minutes;

seconds = elapsed.minutes;

milliseconds = elapsed.milliseconds }

}

});

return: stopwatch;

})();

LIBRARY_STOPWATCH_AUGMENT.JS

"use strict";

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

"use strict";

myapp.utility.padSingleDigit = function(num) {

return (num < 10) ? "0" + num : num;

};

myapp.utility.$ = function(id) { return document.getElementById(id); };