Digital Clock using HTML CSS & Javascript

CodingNepal — Sun, 26 Apr 2020 15:47:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Digital Clock using Javascript.

JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image, there is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds.

And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just a time in numbers format and am pm indicator. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Digital Clock).

Video Tutorial of Digital Clock using Javascript

As you can see in the video this is a real-time working digital clock with ‘Am’ and ‘PM’ indicators. I hope this video help beginner to understand the code behind the working digital clock.

You can use it in your sites and projects after a few changes of codes according to your requirements. And I believe you can take this digital clock at the next level with your creativity. If you like this program (Digital Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Digital Clock using Javascript [Source Codes]

To create this program (Digital Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #131419;
}
.clock{
  background: #131419;
  height: 120px;
  
  line-height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
  font-size: 60px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
}

That’s all, now you’ve successfully created a Digital Clock using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Build A Working Analog Clock using HTML CSS & Javascript

CodingNepal — Sun, 26 Apr 2020 07:09:00 +0000

Hello reader, Today in this blog you’ll learn how to Build A Working Analog Clock using HTML CSS, and Javascript. Previously I have shared a Responsive Footer Section Design using HTML and CSS. Now it’s time to make an analog clock using javascript.

You can tell JavaScript is the core of any web page, in other words, without JavaScript, a web page just is a dead body. We can create so many basic to high-level programs only using JavaScript (without any javascript libraries).

As you can in the image, this is an Analog Clock using HTML CSS & Javascript. This is a real-time clock, not a dummy. You can find the clock program, but you will get most just CSS stuff. Just a vector of the clock. But I am sharing a live clock, which functions as work in javascript.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Build A Working Analog Clock).

Video Tutorial of A Working Analog Clock in Javascript

I hope your doubts are clear now. As you see in the video this is a real-time working clock. This time takes from your PC, not from the server. If you’re feeling difficulty to do code of this clock, Don’t worry you can easily get the source code of this Javascript Clock from the download link which is given below.

If you like this program (Build A Working Analog Clock) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Working Analog Clock using Javascript [Source Codes]

To build this project (Build A Working Analog Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Clock