Please add a Timer App by modifying the source files of the Clock Application wh
ID: 3718736 • Letter: P
Question
Please add a Timer App by modifying the source files of the Clock Application which is displayed below. The expected Output is below the source code. Thanks
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" type="text/css" 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;
}
//Clock and Timer App expected output\ Displayed below:
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
Following is the Code:
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
}
</script>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" type="text/css" 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>
<fieldset>
<legend>Stop Watch</legend>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
<span id="hour">00</span>:<span id="minute">00</span>:<span id="second">00</span>:<span id="tens">00</span>
</fieldset>
</main>
</body>
</html>
clock.css
Just add this style in css file:
button {
background: white;
border: none;
color: blue;
text-decoration: underline;
}
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() {
var seconds = 00;
var tens = 00;
var minutes = 00;
var appendTens = document.getElementById("tens")
var appendSeconds = document.getElementById("second")
var appendMinutes = document.getElementById("minute")
var appendHours = document.getElementById("hour")
var buttonStart = document.getElementById('button-start');
var buttonStop = document.getElementById('button-stop');
var buttonReset = document.getElementById('button-reset');
var Interval ;
buttonStart.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
buttonStop.onclick = function() {
clearInterval(Interval);
}
buttonReset.onclick = function() {
clearInterval(Interval);
tens = "00";
second= "00";
minute = "00";
hour = "00";
appendTens.innerHTML = tens;
appendSeconds.innerHTML = second;
appendMinutes.innerHTML = minute;
appendHours.innerHTML = hour;
}
function startTimer () {
tens++;
if(tens < 9){
appendTens.innerHTML = "0" + tens;
}
if (tens > 9){
appendTens.innerHTML = tens;
}
if (tens > 99) {
console.log("seconds");
seconds++;
appendSeconds.innerHTML = "0" + seconds;
tens = 0;
appendTens.innerHTML = "0" + 0;
}
if (seconds > 9){
appendSeconds.innerHTML = seconds;
}
if (seconds > 60) {
minutes++;
appendMinutes.innerHTML = "0" + minutes;
seconds = 0;
appendSeconds.innerHTML = "0" + 0;
}
if (minutes > 9){
appendMinutes.innerHTML = minutes;
}
if (minutes > 60) {
hours++;
appendHours.innerHTML = "0" + hours;
hours = 0;
appendHours.innerHTML = "0" + 0;
}
if (hours > 9){
appendHours.innerHTML = hours;
}
}
displayCurrentTime();
};
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.