Extra 14-1 Convert the Clock app to closures In this exercise, you’ll convert th
ID: 3869967 • Letter: E
Question
Extra 14-1 Convert the Clock app to closures
In this exercise, you’ll convert the Clock application from extra exercise 13-2 to use closures. The enhanced application looks like this, but note that the application now uses buttons instead of links:
1. Open the HTML and JavaScript files in this folder:
exercises_extrach14clock_closures
2. Note that the folder contains two library files named library_clock.js and library_stopwatch.js. In the JavaScript file, you’ll see the variables, objects, and functions that provide all the functionality for the clock and stopwatch, but without using the libraries. Also note that the event library isn’t used in this version of the application.
3. In the library_clock.js file, there’s a start for a function called createClock. Note that this function has parameters for the span tags that display the clock in the page. In the library_stopwatch.js file, there’s a start for a function called createStopwatch. Note that this function has parameters for the span tags that display the stopwatch in the page.
4. In the clock.js file, find the functions that run the clock and move them to the private state section of the library_clock.js file. Then, in the public methods section of the library file, code and return an object that contains a method named start that used the private state to start the clock. Adjust as needed to make this work.
5. In the clock.js file, find the variables, objects, and functions that run the stopwatch and move them to the private section of the library_stopwatch.js file. Then, in the public methods section, code and return an object that contains methods named start, stop, and reset that use the private state to start, stop, and reset the stopwatch. Adjust as needed to make this work.
6. Still in the clock.js file, re-write the remaining code so the onload event handler calls the functions in the library files, passes them the span tags they need, and uses the returned objects to start the clock and attach the stopwatch event handlers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<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>
</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.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsed = { minutes:0, seconds:0, milliseconds:0 };
var displayCurrentTime = function() {
var now = new Date();
var hours = now.getHours();
var ampm = "AM"; // set default value
// correct hours and AM/PM value for display
if (hours > 12) { // convert from military time
hours = hours - 12;
ampm = "PM";
} else { // adjust 12 noon and 12 midnight
switch (hours) {
case 12: // noon
ampm = "PM";
break;
case 0: // midnight
hours = 12;
ampm = "AM";
}
}
$("hours").firstChild.nodeValue = hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
$("ampm").firstChild.nodeValue = ampm;
};
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
var tickStopwatch = function() {
// increment milliseconds by 10 milliseconds
elapsed.milliseconds = elapsed.milliseconds + 10;
// if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
if (elapsed.milliseconds === 1000) {
elapsed.seconds++;
elapsed.milliseconds = 0;
}
// if seconds total 60, increment minutes by one and reset seconds to zero
if (elapsed.seconds === 60) {
elapsed.minutes++;
elapsed.seconds = 0;
}
//display new stopwatch time
$("s_minutes").firstChild.nodeValue = padSingleDigit(elapsed.minutes);
$("s_seconds").firstChild.nodeValue = padSingleDigit(elapsed.seconds);
$("s_ms").firstChild.nodeValue = elapsed.milliseconds;
};
// event handler functions
var startStopwatch = function() {
// do first tick of stop watch and then set interval timer to tick
// stop watch every 10 milliseconds. Store timer object in stopwatchTimer
// variable so next two functions can stop timer.
tickStopwatch();
stopwatchTimer = setInterval(tickStopwatch, 10);
};
var stopStopwatch = function() {
// stop timer
clearInterval(stopwatchTimer);
};
var resetStopwatch = function() {
// stop timer
clearInterval(stopwatchTimer);
// clear elapsed object and stopwatch display
elapsed = { minutes:0, seconds:0, milliseconds:0 };
$("s_minutes").firstChild.nodeValue = "00";
$("s_seconds").firstChild.nodeValue = "00";
$("s_ms").firstChild.nodeValue = "000";
};
window.onload = function() {
// set initial clock display and then set interval timer to display
// new time every second. Don't store timer object because it
// won't be needed - clock will just run.
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
// set up stopwatch event handlers
$("start").onclick = startStopwatch;
$("stop").onclick = stopStopwatch;
$("reset").onclick = resetStopwatch;
};
// library_clock.js
"use strict";
var createClock = function(hourSpan, minuteSpan, secondSpan, ampmSpan) {
// private state
// public methods
};
// library_stopwatch.ja
"use strict";
var createStopwatch = function(minuteSpan, secondSpan, msSpan) {
// private state
// public methods
};
Explanation / Answer
See the below modified code as per instructions.
much of the code is moved from clock.js to private section id library_clock.js and library_stopwatch.js.
no changes are done in html file.
changes on js files are commented properly to understand .
please rate the ans as it will help me to to keep working for you.
Thanks.
clock.js
"use strict";
//global stop watch timer variable and elapsed time object
var stopwatchTimer;
var elapsed = { minutes:0, seconds:0, milliseconds:0 };
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
window.onload = function()
{
/*
call to createClock, which will return a object obj,
on obj we are calling the start method to start a clock.
*/
var obj=createClock();
obj.start();
/*
calls to createStopwatch, which will return a object in return.
on that object we are calling the particular methods, depending on which button is clicked
*/
var stopwatch=createStopwatch();
// set up stopwatch event handlers
$("start").onclick = stopwatch.start;
$("stop").onclick = stopwatch.stop;
$("reset").onclick = stopwatch.reset;
};
library_clock.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
var createClock = function(hourSpan, minuteSpan, secondSpan, ampmSpan)
{
// private state
var displayCurrentTime = function()
{
var now = new Date();
var hours = now.getHours();
var ampm = "AM"; // set default value
// correct hours and AM/PM value for display
if (hours > 12)
{ // convert from military time
hours = hours - 12;
ampm = "PM";
}
else
{
// adjust 12 noon and 12 midnight
switch (hours)
{
case 12: // noon
ampm = "PM";
break;
case 0: // midnight
hours = 12;
ampm = "AM";
}
}
$("hours").firstChild.nodeValue = hours;
$("minutes").firstChild.nodeValue = padSingleDigit(now.getMinutes());
$("seconds").firstChild.nodeValue = padSingleDigit(now.getSeconds());
$("ampm").firstChild.nodeValue = ampm;
};
// public methods
var myObj = new Object();// created object
//added method to object
myObj.start=function()
{
displayCurrentTime();
setInterval(displayCurrentTime, 1000);
}
return myObj;// returns object
};
library_stopwatch.js
"use strict";
var createStopwatch = function(minuteSpan, secondSpan, msSpan)
{
// private state
var tickStopwatch = function()
{
// increment milliseconds by 10 milliseconds
elapsed.milliseconds = elapsed.milliseconds + 10;
// if milliseconds total 1000, increment seconds by one and reset milliseconds to zero
if (elapsed.milliseconds === 1000)
{
elapsed.seconds++;
elapsed.milliseconds = 0;
}
// if seconds total 60, increment minutes by one and reset seconds to zero
if (elapsed.seconds === 60)
{
elapsed.minutes++;
elapsed.seconds = 0;
}
//display new stopwatch time
$("s_minutes").firstChild.nodeValue = padSingleDigit(elapsed.minutes);
$("s_seconds").firstChild.nodeValue = padSingleDigit(elapsed.seconds);
$("s_ms").firstChild.nodeValue = elapsed.milliseconds;
};
// event handler functions
var startStopwatch = function()
{
// do first tick of stop watch and then set interval timer to tick
// stop watch every 10 milliseconds. Store timer object in stopwatchTimer
// variable so next two functions can stop timer.
tickStopwatch();
stopwatchTimer = setInterval(tickStopwatch, 10);
};
var stopStopwatch = function()
{
// stop timer
clearInterval(stopwatchTimer);
};
var resetStopwatch = function()
{
// stop timer
clearInterval(stopwatchTimer);
// clear elapsed object and stopwatch display
elapsed = { minutes:0, seconds:0, milliseconds:0 };
$("s_minutes").firstChild.nodeValue = "00";
$("s_seconds").firstChild.nodeValue = "00";
$("s_ms").firstChild.nodeValue = "000";
};
// public methods
//created object
var myStopwatch=new Object();
//added start method to object
myStopwatch.start=function()
{
startStopwatch();
}
//added stop method to object
myStopwatch.stop=function()
{
stopStopwatch();
}
//added reset method to object
myStopwatch.reset=function()
{
resetStopwatch();
}
return myStopwatch; //returns object
};
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.