Answer:
Check the explanation
Step-by-step explanation:
//startTime to start the time on function click
function startTime() {
//function setTime is called to take input from the forum and set the variables
setTime();
}
//function to check if minutes and seconds are less than 10
function checkTime(i) {
if (i < 10)
i = "0" + i; // add zero in front of numbers < 10
return i;
}
//function to set the time
function setTime(){
//input the value of hour from forum
var h = document.getElementById("hour").value;
//input the value of minutes from forum
var m = document.getElementById("minute").value;
//input the value of seconds from forum
var s = document.getElementById("second").value;
//input the value of radio button which is checked
if(document.getElementById("AM").checked)
var r = "AM";
else if(document.getElementById("PM").checked)
var r = "PM";
else if(document.getElementById("Military").checked)
var r = "Military";
//calling display function to display the time
displayTime(h,m,s,r);
}
function displayTime(h,m,s,r){
//calling checkTime function to add zero if value<10
m = checkTime(m);
s = checkTime(s);
//if r is not military, we need to add value of radio button after seconds
if(r != "Military"){
if(r=="PM")
if(h>12)
h = h - 12;
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + " " + r;
}
//if r i military time, we don't need to add value of radio button
else
document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;
}
//HTML document
<!DOCTYPE html>
<head>
<title> Clock </title>
<style>
.content {
max-width: 500px;
margin: auto;
}
</style>
</head>
<body class = "content">
<form>
Hours
<input id = "hour" type="text" name="Hours"><br>
Minutes:<input id = "minute" type="text" name="Minutes"><br>
Seconds:<input id = "second" type="text" name="Seconds"><br>
<input id = "AM" type="radio" name="gender" value="AM" checked> AM
<input id = "PM" type="radio" name="gender" value="PM"> PM
<input id = "Military" type="radio" name="gender" value="Military"> Military<br>
<input type="button" name = "Submit" value="Submit" onclick = "startTime();"/>
</form>
<br>
<br>
<br>
<canvas id="myCanvas" width="200" height="100">
</canvas>
<div id="txt">
</div>
</body>
</html>