Question: I need help with this JavaScript assignment. I think I did everything it asked me to do, but for some reason, my application is not

I need help with this JavaScript assignment. I think I did everything it asked me to do, but for some reason, my application is not functioning properly; it's not showing my timer, clock, and the date. Please help!

We're using namespaces and module pattern with the Clock.

1. There are two more library files, a namespace library and a utility library. In the HTML file, note that the script tags for these libraries come before the script tags for the clock and stopwatch libraries.

2. In the namespace library, review the code that creates the namespace and adds a namespace creator method. Then, use that method to add the following namespaces:

time utility time.clock time.stopwatch

3. Move the padSingleDigit function and the $ function from the clock.js file to the library_utility.js file, and add them to the utility namespace.

4. Change the library_clock.js file so it uses the module pattern and adds the object it creates to the clock namespace.

NOTE: In this step and in step 5, youll need to adjust the objects so the callback function is passed to the start method and then stored so the function called by the timer can use it.

5. Change the library_stopwatch.js file so it uses the module pattern and adds the object it creates to the stopwatch namespace.

6. Change the code in the clock.js file to use the new namespaces and module objects. Since you no longer create the clock and stopwatch objects, remove that code and pass the callbacks to the start methods. Use aliases for the namespaces, and make sure you dont add anything to the global namespace.

INDEX.HTML Clock

Digital clock with stopwatch

Clock : :
Stop Watch 00: 00: 000

CLOCK.JS "use strict"; // aliases created for namespaces var time = myapp.time; var utility = myapp.utility;

// callback function for displaying clock time var displayTime = function(now) { utility.$("hours").firstChild.nodeValue = now.hours; utility.$("minutes").firstChild.nodeValue = utility.padSingleDigit(now.minutes); utility.$("seconds").firstChild.nodeValue = utility.padSingleDigit(now.seconds); utility.$("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(); utility.$("date").firstChild.nodeValue = date; }; // callback function for displaying stopwatch elapsed time var displayTick = function(elapsed) { utility.$("s_minutes").firstChild.nodeValue = utility.padSingleDigit(elapsed.minutes); utility.$("s_seconds").firstChild.nodeValue = utility.padSingleDigit(elapsed.seconds); utility.$("s_ms").firstChild.nodeValue = elapsed.milliseconds; }; // callback function for clearing stopwatch elapsed time display var resetStopwatch = function() { utility.$("s_minutes").firstChild.nodeValue = "00"; utility.$("s_seconds").firstChild.nodeValue = "00"; utility.$("s_ms").firstChild.nodeValue = "000"; };

// onload event handler window.onload = function() { // start clock time.clock.start(displayTime); // set up stopwatch event handlers utility.$("start").onclick = function() { time.stopwatch.start(displayTick); }; utility.$("stop").onclick = function() { time.stopwatch.stop(); }; utility.$("reset").onclick = function() { time.stopwatch.reset(resetStopwatch); }; };

LIBRARY_CLOCK.JS "use strict";

myapp.time.clock = function(displayTimeCallbackFunction) { // private state 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 - pass it the now variable if (displayTimeCallbackFunction && typeof displayTimeCallbackFunction === 'function') { displayTimeCallbackFunction(now); } }; // public methods return { start: function(callback) { displayTimeCallbackFunction = callback; // callback function stored for later use displayCurrentTime(); setInterval(displayCurrentTime, 1000); return this; } }; };

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; // callback function stored for later use by the timer tickStopwatch(); timer = setInterval(tickStopwatch, 10); return this; }, stop: function() { clearInterval(timer); return this; }, reset: function(callback) { clearInterval(timer); elapsed = { minutes:0, seconds:0, milliseconds:0 }; // callback used for stopwatch reset display if (callback && typeof callback === 'function') { callback(); } return this; } }; };

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").addNamespace("utility") .addNamespace("time.clock").addNamespace("time.stopwatch");

LIBRARY_UTILITY.JS "use strict";

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

myapp.utility.padSingleDigit = function(num) { return (num < 10) ? "0" + num : num; };

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!