//JavaScript Assignment\\\\ Please complete the following 7-2 Excersise: The Sou
ID: 3717669 • Letter: #
Question
//JavaScript Assignment\
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
function StopWatch(){ }/ yes this is how to define a class in JavaScript function StopWatch(){ var startTime = null; var stopTime = null; var running = false; .... } function getTime(){ var day = new Date(); return day.getTime();//Time Stamp method } this.start = function(){ if (running == true) return; else if (startTime != null) stopTime = null; running = true; startTime = getTime(); } this.stop = function(){ if (running == false) return; stopTime = getTime(); running = false; } this.duration = function(){ if(startTime == null || stopTime == null) return 'Undefined'; else return (stopTime - startTime) / 1000; } var _StopWatch = new StopWatch(); _StopWatch.start() _StopWatch.stop(); alert(_StopWatch.duration()); //example return: 3.567(seconds)
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.