Vanilla Javascript Project make a Digital Clock

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

Vanilla Javascript Project. 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, To start a project first you have to make three files. one HTML file, one CSS file, and one javascript file. Ok, let’s create an HTML file which name is index.html. Well inside the inden.html file copy this code which I provide you below.

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 the style.css file, and bottom I linked up with the app.js file where we write our vanilla javascript code. Well now copy this CSS code in your 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 been done. Now time to write our vanilla javascript code. Well open your app.js file and paste this code. Don’t worry I will explain you the details of 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 functions 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 returns a selector which is vanilla javascript’s built-in function.

Well, then I make our main function 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 function which is setInterval.

Well, Now open the index.html file in your browser and look at a digital clock exactly 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 *