How to make Digital Clock using Vanilla Javascript

vanilla javascript
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Hello Developers,

How are you doing? In this tutorial, I will show you how to make Digital Clock using HTML, CSS, and JavaScript. For making this digital clock you have to know knowledge of basic HTML syntax and CSS properties as well basic Javascript. I will discuss with you everything with source code as well as provide a youtube video.

How to make Digital Clock using Vanilla Javascript

 Digital Clock using Vanilla Javascript
Digital Clock using Vanilla Javascript

Well, For start a project first you have to make three files. one html file, one css file and one javascript file. Ok let’s create a html file which name is index.html. Well inside the inden.html file copy this code which I provide you bellow.

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Digital Clock</title>
  </head>
  <body>
    <div id="clock" class="dark">
      <div class="display">
        <h1 id="time"></h1>
        <small></small>
      </div>
    </div>
    <!-- JavaScript Includes -->
    <script src="app.js"></script>
  </body>
</html>

Well, I assume you are familiar with html markup.In this above code first of all the head section I link up with style.css file and bottom I linked up with app.js file where we write our vanilla javasctipt code. Well now copy this css code in you style .css file.

style.css

/* Source: http://youtube.com/JSBangladesh */

/*-------------------------
	Simple reset
--------------------------*/

* {
  margin: 0;
  padding: 0;
}

/*-------------------------
	General Styles
--------------------------*/

html {
  overflow: hidden;
}

body {
  font: 15px/1.3 Arial, sans-serif;
  color: #4f4f4f;
  z-index: 1;
  background: #2c3e50;
}

a,
a:visited {
  outline: none;
  color: #389dc1;
}

a:hover {
  text-decoration: none;
}

section,
footer,
header,
aside {
  display: block;
}

/*-------------------------
	The clocks
--------------------------*/

#clock {
  width: 370px;
  padding: 40px;
  margin: 100px auto 60px;
  position: relative;
}

#clock:after {
  content: '';
  position: absolute;
  width: 400px;
  height: 20px;
  border-radius: 100%;
  left: 50%;
  margin-left: -200px;
  bottom: 2px;
  z-index: -1;
}

#clock .display {
  text-align: center;
  padding: 30px;
  border-radius: 6px;
  position: relative;
  height: 54px;
}

/*-------------------------
	Dark color theme
--------------------------*/

#clock.dark {
  background-color: #272e38;
  color: #cacaca;
}

#clock.dark:after {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
#clock.dark .display {
  background-color: #0f1620;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08) inset, 0 1px 1px #2d3642;
}
h1#time {
  display: inline-block;
  font-size: 36px;
}

Well, Our markup and design part has done. Now times to write our vanilla javascript code. Well open your app.js file and paste this code. Don’t worry I will explain you details this vanilla javascript code.

app.js

let $ = (data) => document.querySelector(data);
let print = (data) => console.log(data)
function digitalClock(){ 
    //select
    let time = $('#time')
    let flag = $('small')
    let currentTime = new Date()
    print(currentTime)
    let hour = currentTime.getHours();
    let min = currentTime.getMinutes();
    let sec = currentTime.getSeconds();
    let tag = 'AM'
    
    //inserting 0 
    sec = sec < 10 ? sec = '0' + sec : sec;
    min = min < 10 ? min = '0' + min : min;
    hour = hour < 10 ? hour = '0' + hour : hour;

    // make 12 format
    hour = hour == 0 ? hour =  12 : hour
    if(hour>12){
        hour = hour - 12
        tag = "PM"
    }
    if(hour == 12){
        tag = "PM"
    }
    let displayTime = `${hour} : ${min} : ${sec}`
    time.innerHTML = displayTime
    flag.innerHTML = tag

}
digitalClock()
setInterval(digitalClock,1000)

well, firstly I have declarer two function which we used frequently. We have to select our DOM many times so I create a function which name is $ you can give any name. this $ function takes one perimeter, its return us a selector which is vanilla javascript’s built in function.

Well, then I make our main funciton which is digital_clock. inside this function We are using Vanilla javascript’s Date object to determine our date. after this function I call another vanilla javascript’s built in funciton which is setInterval.

Well,Now open index.html file in your browser and look a digital clock exact like this demo.

Thanks. Hope it will help you.

Read More : How to use Mixins in Nuxt.JS with Example


Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  

About Anisur Rahman Shahin

Hello. My name is Shahin. I'm a tech enthusiast guy. Personally, I’m Optimistic and always in hurry kinda person. I'm a freelance web developer. I am working at Zakir Soft as Laravel Developer. My Portfolio website: https://devshahin.com/

View all posts by Anisur Rahman Shahin →

Leave a Reply

Your email address will not be published. Required fields are marked *