Welcome folks today in this blog post we will be building a countdown digital alarm clock timer in browser using html5 css3 and javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<body onload="show();">
<div class="container">
<div><h1>StopWatch Timer</h1><span id="time"></span></div>
<input class="btn" type="button" value="start" onclick="start();">
<input class="btn" type="button" value="stop" onclick="stop();">
<input class="btn" type="button" value="reset" onclick="reset()">
<p>
Press <kbd>Space</kbd> To Start and Stop
</p>
<p>
Press <kbd>R</kbd> To Reset
</p>
</div>
</body>
Now make a style.css file and copy paste the following code
style.css
body {
font-family: 'Roboto', sans-serif;
}
.btn {
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition: .5s;
}
.btn:hover {
background-color: #008CBA;
}
#time {
font-size: 5em;
}
h1 {
font-size: 4em;
}
.container {
margin: auto;
text-align: center;
line-height: 1.5;
}
p {
margin-top: 10px;
}
@media screen and (max-width:420px) {
img {width:50%}
#time {font-size: 3em;}
h1{font-size: 2.5em;}
.btn{padding: 10px 21.33333px;}
}
Now make a script.js file and copy paste the following code
script.js
// Simple example of using private variables
//
// To start the stopwatch:
// obj.start();
//
// To get the duration in milliseconds without pausing / resuming:
// var x = obj.time();
//
// To pause the stopwatch:
// var x = obj.stop(); // Result is duration in milliseconds
//
// To resume a paused stopwatch
// var x = obj.start(); // Result is duration in milliseconds
//
// To reset a paused stopwatch
// obj.stop();
//
var clsStopwatch = function() {
// Private vars
var startAt = 0; // Time of last start / resume. (0 if not running)
var lapTime = 0; // Time on the clock when last stopped in milliseconds
var now = function() {
return (new Date()).getTime();
};
// Public methods
// Start or resume
this.start = function() {
startAt = startAt ? startAt : now();
};
// Stop or pause
this.stop = function() {
// If running, update elapsed time otherwise keep it
lapTime = startAt ? lapTime + now() - startAt : lapTime;
startAt = 0; // Paused
};
// Reset
this.reset = function() {
lapTime = startAt = 0;
};
// Duration
this.time = function() {
return lapTime + (startAt ? now() - startAt : 0);
};
};
var x = new clsStopwatch();
var $time;
var clocktimer;
function pad(num, size) {
var s = "0000" + num;
return s.substr(s.length - size);
}
function formatTime(time) {
var h = m = s = ms = 0;
var newTime = '';
h = Math.floor( time / (60 * 60 * 1000) );
time = time % (60 * 60 * 1000);
m = Math.floor( time / (60 * 1000) );
time = time % (60 * 1000);
s = Math.floor( time / 1000 );
ms = time % 1000;
newTime = pad(h, 2) + ':' + pad(m, 2) + ':' + pad(s, 2) + ':' + pad(ms, 3);
return newTime;
}
function show() {
$time = document.getElementById('time');
update();
}
function update() {
$time.innerHTML = formatTime(x.time());
}
function start() {
clocktimer = setInterval("update()", 1);
x.start();
}
function stop() {
x.stop();
clearInterval(clocktimer);
}
function reset() {
stop();
x.reset();
update();
}
var pressed = true;
document.body.onkeyup = function(e) {
if(e.keyCode == 32){
if(pressed) {
start();
pressed = false;
} else {
stop();
pressed = true;
}
}
if(e.keyCode == 82) {
reset()
}
}
Now if you open the index.html file inside the browser you will see the below screenshot
