Build a Bootstrap Stopwatch Digital Clock Timer in HTML5 CSS3 and Javascript Full Project For Beginners

Build a Bootstrap Stopwatch Digital Clock Timer in HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a bootstrap stopwatch digital clock timer in 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"/>
<head>
<h1 class = "main text-center">STOP WATCH</h1>
</head>
<body>
  <p id = "output" class = "text-center"></p>
  <div id = "controls" class = "text-center">
    <button class="btn btn-default" id = "startPause" onclick = "startPause()">START</button>
    <button class="btn btn-default" onclick = "reset()">RESET</button>
  </div>
</body>
<script>

 

 

See also  Build a Javascript String Code Obfuscator Encoder in Browser Using Vanilla Javascript Full Project For Beginners

Now make a style.css file and copy paste the following code

 

style.css

 

.main {
  font-family: arial;
  padding: 25px;
  margin-top: 40px;
  font-size: 4.0em;
}

#output {
  font-size: 8.0em;
  width: 43%;
  height: auto;
  background-color: white;
  border: 3px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 45px;
}

.btn {
  margin-top: 40px;
  font-size: 1.8em;
}

 

 

Now make a script.js file and copy paste the following code

 

script.js

 

var time = 0;
var running = 0;

function startPause() {
    if (running == 0) {
        running = 1;
        increment();
        document.getElementById("startPause").innerHTML = "PAUSE";
    } else {
        running = 0;
        document.getElementById("startPause").innerHTML = "RESUME";
    }
}

function reset(){
    running = 0;
    time = 0;
    document.getElementById("startPause").innerHTML = "START";
    document.getElementById("output").innerHTML = "00:00:00";
}

function increment() {
    if (running == 1) {
        setTimeout(function() {
            time++;
            var mins = Math.floor(time/10/60);
            var secs = Math.floor(time/10 % 60);
            var tenths = time % 10;
            if (mins < 10) {
              mins = "0" + mins;
            } 
            if (secs < 10) {
              secs = "0" + secs;
            }
            document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
            increment();
        },100);
    }
}

 

See also  Build a jQuery FileSaver.js HTML Document With Images to Word Document (.DOCX) Converter in Browser Using HTML5 & Javascript Full Project For Beginners

 

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

 

Leave a Reply