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>

<div><h1>StopWatch Timer</h1><span id="time"></span></div>

<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;}
}

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()
     }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

// 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

Build a Countdown Digital Alarm Clock Timer in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Get Started

Leave a Reply Cancel reply

Get Started

Related posts:

You Might Also Like

Node.js Prism.js Example to Highlight Source Code Syntax Using node-prismjs Library in Javascript Full Project For Beginners

Build a PDF Document Resume Builder With Live Preview Using jsPDF Library in Browser Using Javascript Full Project For Beginners

Node.js Project to Convert JSON Objects to HTML Markup Using node-json2html Library in Javascript Full Tutorial For Beginners

Leave a Reply Cancel reply