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

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

 

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

See also  Build Tic Tac Toe Multiplayer Game Online Using Socket.io Node.js and Express (WebRTC) Full Tutorial

 

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

 

See also  Node.js Express Stripe API Payment Gateway Integration to Setup Online Payments Full Tutorial 2020

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply