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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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