//JavaScript Assignment\\\\ Add a stopwatch to the clock app [Please make sure t
ID: 3718311 • Letter: #
Question
//JavaScript Assignment\ Add a stopwatch to the clock app [Please make sure the timer app works with the clock app html/css]
Please complete the following 7-2 Excersise: The Source code for the Clock app is below.
Source code for the Clock Application:
clock.js:
var $ = function(id) { return document.getElementById(id); };
var displayCurrentTime = function() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
t = setTimeout(function() {
displayCurrentTime()
}, 500);
var ampm = "AM";
if(h > 12) {
h = h - 12;
ampm = "PM";
}
document.getElementById("hours").innerHTML = padSingleDigit(h);
document.getElementById("minutes").innerHTML = padSingleDigit(m);
document.getElementById("seconds").innerHTML = padSingleDigit(s);
document.getElementById("ampm").innerHTML = ampm;
};
var padSingleDigit = function(num) {
return (num < 10) ? "0" + num : num;
};
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();
};
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="clock.css">
<script src="clock.js"></script>
</head>
<body>
<main>
<h1>Digital clock</h1>
<fieldset>
<legend>Clock</legend>
<span id="hours"> </span>:
<span id="minutes"> </span>:
<span id="seconds"> </span>
<span id="ampm"> </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-left: 1em;
margin-bottom: .5em;
}
fieldset {
margin-bottom: 1em;
}
Extra 7-2 Add a stopwatch to the Clock app Digital clock with stopwatch -Clock 3: 22: 57 PM Stop Watch Start Stop Reset 00: 12: 320 Add the JavaScript code for the stopwatch.Explanation / Answer
// initialize your variables outside the function
var count = 0;
var clearTime;
var seconds = 0, minutes = 0, hours = 0;
var clearState; var secs, mins, gethours ;
function startWatch( ) { /* check if seconds is equal to 60 and add a +1 to minutes, and set seconds to 0 */
if ( seconds === 60 )
? { seconds = 0; minutes = minutes + 1; } /* you use the javascript tenary operator to format how the minutes should look and add 0 to minutes if less than 10 */
mins = ( minutes < 10 ) ? ( '0' + minutes + ': ' ) : ( minutes + ': ' ); /* check if minutes is equal to 60 and add a +1 to hours set minutes to 0 */
if ( minutes === 60 ) { minutes = 0; hours = hours + 1; } /* you use the javascript tenary operator to format how the hours should look and add 0 to hours if less than 10 */
gethours = ( hours < 10 ) ? ( '0' + hours + ': ' ) : ( hours + ': ' );
secs = ( seconds < 10 ) ? ( '0' + seconds ) : ( seconds ); // display the stopwatch var x = document .getElementById("timer"); x.innerHTML = 'Time: ' + gethours + mins + secs; /* call the seconds counter after displaying the stop watch and increment seconds by +1 to keep it counting */ seconds++; /* call the setTimeout( ) to keep the stop watch alive ! */ clearTime = setTimeout( "startWatch( )", 1000 ); } // startWatch( ) //create a function to start the stop watch
function startTime( ) { /* check if seconds, minutes, and hours are equal to zero and start the stop watch */
if ( seconds === 0 && minutes === 0 && hours === 0 ) { /* hide the fulltime when the stop watch is running */
var fulltime = document.getElementById( "fulltime" );
fulltime.style.display = "none"; /* hide the start button if the stop watch is running */
this.style.display = "none"; /* call the startWatch( ) function to execute the stop watch whenever the startTime( ) is triggered */
startWatch( ); } // if () } // startTime() /* you need to bind the startTime( ) function to any event type to keep the stop watch alive ! */ window.addEventListener( 'load', function ( ) { var start = document .getElementById("start"); start.addEventListener( 'click', startTime ); }); // startwatch.js end
/* How It Works
Whenever the clearTimeout( ) timing method is called on a setTimeout( ) timing method that is active, the clearTimeout( ) timing method will stop the execution of the setTimeout( ) timing method but without destroying its execution entirely.
The setTimeout( ) timing method is left idle during the period that the clearTimeout( ) timing method is called, and when you re-execute the setTimeout( ) timing method, it will start from the point its execution was stopped, not starting all over from the beginning.
Just like when you pause a mp3 media player, and then play it back, it continues playing from previous position, but not starting all over from beginning.
For example, let's say I have a running timer that was created using the setTimeout( ) timing method, and its starting point is 00. I run the timer, and it's now reading 41.
If I call in the clearTimeout( ) timing method on this active setTimout( ) method, it will make it idle during that period, and whenever I re-execute the setTimeout( ) timing method, it will start counting from 41, not from 00.
To make the timer start from 00, you've to resets its counter. That's the logic.*/
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.