In: Computer Science
Submission Guidelines
This assignment may be submitted for full credit until Friday, October 4th at 11:59pm. Late submissions will be accepted for one week past the regular submission deadline but will receive a 20pt penalty. Submit your work as a single HTML file. It is strongly recommended to submit your assignment early, in case problems arise with the submission process.
Assignment
For this assignment, you will write a timer application in HTML and JavaScript.
Your HTML document should contain the following elements/features:
Evaluation
Your assignment will be graded according to whether all the required elements are present and in the correct formats and all required functionalities are operable.
Detailed explanation,comments and output screenshots are provided,please go through them
Thank You
Timer.html
<!DOCTYPE html>
<HTML>
<TITLE>
Timer
</TITLE>
<BODY>
<label id="timelabel"> Timer Duration
</label><br>
<input id="timeinput" type="text"
value="0"></input><br>
<button id="timestart" onclick="timer()"> Start
</button>
<button id="timenew" onclick="newtimer()"
hidden>New Timer </button>
<p id="timer" ></p>
<script>
/* Counter function that starts count and displasy button at the end of count */
function myCounter() {
document.getElementById("timer").innerHTML = ++count;
if(cmax==count)
{
clearInterval(v);
document.getElementById("timer").innerHTML ="";
document.getElementById("timenew").style.display = "block";
}
}
/*Global variables required */
var v;
var count=0;
var cmax;
/* timer function called while start pressed hides the
label,input,button and starts counting after counting displays new
timer button*/
function timer() {
var c = document.getElementById("timeinput").value;
cmax=c;
count=0;
document.getElementById("timeinput").style.display = "none";
document.getElementById("timelabel").style.display = "none";
document.getElementById("timestart").style.display = "none";
v= setInterval(myCounter, 1000);
document.getElementById("timer").style.display = "block";
}
/*new timer button function where recreates the initial
page*/
function newtimer()
{
document.getElementById("timeinput").style.display = "block";
document.getElementById("timelabel").style.display = "block";
document.getElementById("timestart").style.display = "block";
document.getElementById("timenew").style.display = "none";
document.getElementById("timeinput").value=0;
}
</script>
</body>
</html>
Output: