The clock\'s app stopwatch has to be enhanced. So far, I did steps 1, 2, and 4,
ID: 3814082 • Letter: T
Question
The clock's app stopwatch has to be enhanced. So far, I did steps 1, 2, and 4, so I did most of this. The only big thing I need to do that I can't figure out how to do is #3, which is to 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. I already created the elapsedTimeWithHours method, but I need help completing the rest of that step. I also need to reset the callback function in the last step after I modify the displayTick callback function.
Here are the steps below:
1. 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 there’s a new span tag for the hours value of the stopwatch with a default value of “00”.
2. 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.
3. 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.
4. 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
<!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="library_stopwatch_augment.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_hours">00</span>:
<span id="s_minutes">00</span>:
<span id="s_seconds">00</span>:
<span id="s_ms">000</span>
</fieldset>
</main>
</body>
</html>
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;
u.$("s_hours").firstChild.nodeValue = getElapsedTimeWithHours(elapsed);
};
// 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.seconds;
milliseconds = elapsed.milliseconds;
hours = elapsed.hours; }
}
});
return stopwatch;
})();
LIBRARY_STOPWATCH_AUGMENT.JS
"use strict";
var getElapsedTimeWithHours = function(elapsed) {
return elapsed.hours;
}
LIBRARY_UTILITY.JS
"use strict";
myapp.utility.padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
myapp.utility.$ = function(id) { return document.getElementById(id); };
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");
Explanation / Answer
Answer: See the code below:
for library_stopwatch_augmented.js
---------------------------------
"use strict";
myapp.time.stopwatch = (function() {
getElapsedTimeWithHours = function() {
t=myapp.time.stopwatch.elapsed;
myapp.time.stopwatch.elapsed={hours:0, minutes:0, seconds:0, milliseconds:0};
myapp.time.stopwatch.elapsed.milliseconds=t.milliseconds;
myapp.time.stopwatch.elapsed.seconds=t.seconds;
myapp.time.stopwatch.elapsed.minutes=t.minutes;
if(myapp.time.stopwatch.elapsed.minutes >= 60)
{
myapp.time.stopwatch.elapsed.hours=myapp.time.stopwatch.elapsed.minutes/60;
myapp.time.stopwatch.elapsed.minutes = myapp.time.stopwatch.elapsed.minutes%60;
}
return myapp.time.stopwatch.elapsed;
};
}(myapp.time.stopwatch));
---------------------------------
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.