JAVA HELP! The two things I did already were add the namespaces in the library_n
ID: 3808378 • Letter: J
Question
JAVA HELP! The two things I did already were add the namespaces in the library_namespace.js file and moved the padSingleUnit and $ function from the clock.js file to the library_utility.js file. I'm stuck on the rest. Here is what I have to do:
Use namespaces and module pattern with the Clock.
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.
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
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.
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, you’ll 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.
Change the library_stopwatch.js file so it uses the module pattern and adds the object it creates to the stopwatch namespace.
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 don’t add anything to the global namespace.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script src="library_namespace.js"></script>
<script src="library_utility.js"></script>
<script src="library_clock.js"></script>
<script src="library_stopwatch.js"></script>
<script src="clock.js"></script>
</head>
<body>
<main>
<h1>Digital clock with stopwatch</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
<span id="date"> </span>
</fieldset>
<fieldset>
<legend>Stop Watch</legend>
<input type="button" id="start" value="Start">
<input type="button" id="stop" value="Stop">
<input type="button" id="reset" value="Reset">
<span id="s_minutes">00</span>:
<span id="s_seconds">00</span>:
<span id="s_ms">000</span>
</fieldset>
</main>
</body>
</html>
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";
// callback function for displaying clock time
var displayTime = function(now) {
$("hours").firstChild.nodeValue = now.hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.minutes);
$("seconds").firstChild.nodeValue = padSingleDigit(now.seconds);
$("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();
$("date").firstChild.nodeValue = date;
};
// callback function for displaying stopwatch elapsed time
var displayTick = function(elapsed) {
$("s_minutes").firstChild.nodeValue = padSingleDigit(elapsed.minutes);
$("s_seconds").firstChild.nodeValue = padSingleDigit(elapsed.seconds);
$("s_ms").firstChild.nodeValue = elapsed.milliseconds;
};
// callback function for clearing stopwatch elapsed time display
var resetStopwatch = function() {
$("s_minutes").firstChild.nodeValue = "00";
$("s_seconds").firstChild.nodeValue = "00";
$("s_ms").firstChild.nodeValue = "000";
};
// onload event handler
window.onload = function() {
var clock = createClock(displayTime);
var stopwatch = createStopwatch(displayTick);
// start clock
clock.start();
// set up stopwatch event handlers
$("start").onclick = function() {
stopwatch.start();
};
$("stop").onclick = function() {
stopwatch.stop();
};
$("reset").onclick = function() {
stopwatch.reset(resetStopwatch);
};
};
library_clock.js:
"use strict";
var createClock = 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() {
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
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("clock").addNamespace("stopwatch");
library_stopwatch.js:
"use strict";
var createStopwatch = function(displayTickCallbackFunction) {
// private state
var timer;
var elapsed = { minutes:0, seconds:0, milliseconds:0 };
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 - pass it the elapsed time object
if (displayTickCallbackFunction && typeof displayTickCallbackFunction === 'function') {
displayTickCallbackFunction(elapsed);
}
};
// public methods
return {
start: function() {
tickStopwatch();
timer = setInterval(tickStopwatch, 10);
return this;
},
stop: function() {
clearInterval(timer);
return this;
},
reset: function(resetStopwatchCallbackFunction) {
clearInterval(timer);
elapsed = { minutes:0, seconds:0, milliseconds:0 };
// use callback to reset stopwatch display
if (resetStopwatchCallbackFunction && typeof resetStopwatchCallbackFunction === 'function') {
resetStopwatchCallbackFunction();
}
return this;
}
};
};
library_utility.js:
"use strict";
var $ = function(id) { return document.getElementById(id); };
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
Explanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script src="library_namespace.js"></script>
<script src="library_utility.js"></script>
<script src="library_clock.js"></script>
<script src="library_stopwatch.js"></script>
<script src="clock.js"></script>
</head>
<body>
<main>
<h1>Digital clock with stopwatch</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </span>
<span id="date"> </span>
</fieldset>
<fieldset>
<legend>Stop Watch</legend>
<input type="button" id="start" value="Start">
<input type="button" id="stop" value="Stop">
<input type="button" id="reset" value="Reset">
<span id="s_minutes">00</span>:
<span id="s_seconds">00</span>:
<span id="s_ms">000</span>
</fieldset>
</main>
</body>
</html>
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";
// callback function for displaying clock time
var displayTime = function(now) {
$("hours").firstChild.nodeValue = now.hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.minutes);
$("seconds").firstChild.nodeValue = padSingleDigit(now.seconds);
$("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();
$("date").firstChild.nodeValue = date;
};
// callback function for displaying stopwatch elapsed time
var displayTick = function(elapsed) {
$("s_minutes").firstChild.nodeValue = padSingleDigit(elapsed.minutes);
$("s_seconds").firstChild.nodeValue = padSingleDigit(elapsed.seconds);
$("s_ms").firstChild.nodeValue = elapsed.milliseconds;
};
// callback function for clearing stopwatch elapsed time display
var resetStopwatch = function() {
$("s_minutes").firstChild.nodeValue = "00";
$("s_seconds").firstChild.nodeValue = "00";
$("s_ms").firstChild.nodeValue = "000";
};
// onload event handler
window.onload = function() {
var clock = createClock(displayTime); // creating instance using calllback concept
var stopwatch = createStopwatch(displayTick);// creating instance using calllback concept
// start clock
clock.start();
// set up stopwatch event handlers
$("start").onclick = function() {
stopwatch.start();
};
$("stop").onclick = function() {
stopwatch.stop();
};
$("reset").onclick = function() {
stopwatch.reset(resetStopwatch);
};
};
}
library_clock.js:
"use strict";
var createClock = (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() {
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
return this;
}
};
}(createClock || {}));
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("clock").addNamespace("stopwatch");
library_stopwatch.js:
"use strict";
var createStopwatch = function(displayTickCallbackFunction) {
// private state
var timer;
var elapsed = { minutes:0, seconds:0, milliseconds:0 };
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 - pass it the elapsed time object
if (displayTickCallbackFunction && typeof displayTickCallbackFunction === 'function') {
displayTickCallbackFunction(elapsed);
}
};
// public methods
return {
start: function() {
tickStopwatch();
timer = setInterval(tickStopwatch, 10);
return this;
},
stop: function() {
clearInterval(timer);
return this;
},
reset: function(resetStopwatchCallbackFunction) {
clearInterval(timer);
elapsed = { minutes:0, seconds:0, milliseconds:0 };
// use callback to reset stopwatch display
if (resetStopwatchCallbackFunction && typeof resetStopwatchCallbackFunction === 'function') {
resetStopwatchCallbackFunction();
}
return this;
}
};
};
library_utility.js:
"use strict";
var $ = function(id) { return document.getElementById(id); };
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.