How to Create a Digital Clock in JavaScript

How to Create a Digital Clock in JavaScript

JavaScript Digital Clock

If you want to create a Simple Digital Clock using JavaScript then this tutorial is for you. There are many types of digital clock tutorials available on the Internet. However, this design is made in the easiest way. 

I used only three lines of JavaScript to create this simple digital clock. I have already created many types of JavaScript clocks. If you want to create an advanced and stylish digital clock then you can search this blog.

 However, there are many beginners who want a very simple design. This simple JavaScript digital clock tutorial would be perfect for them. Here I have given step by step tutorial and required source code.

JavaScript Digital Clock

If you want to know how Working Digital Clockworks then be sure to follow the demo section below. Here you will find the required preview and source code.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

As you can see, I have created a box on top of a web page. In this box, first, you can see the time, then you can see a text. During this time you will see the time in hours, minutes, and seconds. 

It has AM and PM options. I have already created a digital clock with the date. If you need to show the date with your time, you can see that design.

Create a digital clock using Javascript

Some HTML, some CSS, and 3-line JavaScript have been used for designing. The current time has been taken from your device using the newDate () method. newDate () is a JavaScript method that will take the current time from your device.

1: Basic structure of the clock

First, a box is created using the following HTML CSS. In this box, you can see all the information related to time.

<div class=”container”>
</div>

I designed the webpage with the code below and then designed the box. This box has no specific width height. This will determine the amount of content and the size of the padding.

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background-color: #08798c;
font-family: sans-serif;
}
.container {
border-radius: 10px;
background: #f7f9f7;
box-shadow: 0px 0px 20px #282d28;
padding: 2rem 3rem 3rem 3rem;
color: #191414;
cursor: default;
}
Basic structure of the clock

2: Create time viewing area (more…)

Continue ReadingHow to Create a Digital Clock in JavaScript
Simple Digital Clock using javascript

Simple Digital Clock using javascript (For Beginners)

Simple Digital Clock using javascript

Simple Digital Clock Javascript is a great UI design. You can create this kind of digital clock with the help of basic HTML, CSS, and javascript.

In this article, I am going to show you how to create a simple digital clock using HTML, CSS, and JavaScript code. I have shown many more types of analog and digital clocks before. In the meantime, I have made more such clocks where I have added dates and months along with time.

 We know that clocks are both analog and digital. Digital watches are much easier to make than analog watches. If you know basic HTML and CSS JavaScript you can easily create such a design. This is basically the role of JavaScript code. HTML and CSS have also been used to design and structure.

 This clock has the opportunity to view hours, minutes, and seconds. There are also AM and PM options.

Video Tutorial of Simple Digital Clock Javascript

 If you want to know how it is made, you can watch the video tutorial below. In this video, I have shown step by step how I made this Simple Digital Clock using HTML, CSS, and javascript code.

Hopefully, you have learned from the above video tutorial how I made this digital clock. I made a small box on a web page as you saw in the video above. 

I used black as the background color of the box and used a border all around to make it brighter. Then I made this clock work using JavaScript code.

First I took the current time from the device using JavaScript’s new Date () method. Then I updated it every one second or 1000 milliseconds using setTimeout. Use the demo section below to see a live experience of how this works.

See the Pen
digital clock 3 by Foolish Developer (@fghty)
on CodePen.

Hopefully, you have learned how to make this javascript digital clock from the video and demo section above. 

How to Make a Digital Clock using javascript (more…)

Continue ReadingSimple Digital Clock using javascript (For Beginners)
Simple Analog Clock using javascript

Simple Analog Clock using javascript (For Beginners)

Simple Analog Clock using javascript

Simple Analog Clock javascript is a web element that helps show the exact time. You can easily create an analog clock with the help of JavaScript.

In this article, I am going to show you how to create a simple analog clock using JavaScript code. I have designed many more types of JavaScript analog and digital clocks before. This design will be of great help to those who want to learn how to design an analog clock for the first time.

 I made this design using simple HTML, CSS, and JavaScript code. Since I made it for Beginners, here I have tried to use the simplest code. Here is a complete explanation of what each code is used for. This will allow you to learn how to make it very easily.

 First I set the background color of the web page. Here I have used images to make numbers and symbols from 1 to 12. But you can make these numbers manually if you want. I have already made many more designs where I have shown you how to make these numbers manually. Then I made three hands in this watch using HTML and CSS code. I used JavaScript to make those hands work.

Simple Analog Clock Javascript [Live Demo]

 Below is a live demo so you can better understand how it works. Here you will find the necessary source code which you can copy and use in your own work.

See the Pen
simple analog clock 1 by Foolish Developer (@fghty)
on CodePen.

The time used here is not the time on any server. It basically uses time from your device using JavaScript’s new Date function.

 

Below the article, there is a download button with the help of which you can download the source code if needed. Hopefully, the live demo above has helped you fully understand how this analog clock works.

How to make a simple analog clock using JavaScript (more…)

Continue ReadingSimple Analog Clock using javascript (For Beginners)
Simple Analog Clock using HTML, CSS and JavaScript

Simple Analog Clock using HTML, CSS and JavaScript

In this article, I will show you how to make an analog clock using HTML CSS and JavaScript programming code. Earlier I made many more types of analog and digital clocks with the help of JavaScript programming code. If you know basic CSS and JavaScript, you can easily create an analog clock. 

This type of design is largely based on JavaScript programming code. The time that is seen in this case depends on the time of your device. As you can see in the picture above it is a rectangular analog clock. In this, I have added numbers from 1 to 12 which indicate time. Of these I have used three hands, one hand will indicate the time, one minute, and the other the second. I have designed each hand to be a different color. I have used an image to make the numbers that appear in the background.

 If you want to add these numbers manually, you can see another analog watch design I made. Manually I added this number from 1 to 12 to the watch made in that article. Basically in the case of analog clocks, it will take the time of your device once then it will run at its own interval every second.
You can watch the demo below to know better.

See the Pen
analog clock 2 by shantanu jana (@fghty)
on CodePen.

Hopefully from the demo above you know how this digital clockworks. If you want to get the required source code on this watch, you can copy that source code from the section above.

(more…)

Continue ReadingSimple Analog Clock using HTML, CSS and JavaScript
How to Create a digital clock with date using JavaScript

How to Create a digital clock with date using JavaScript

In this article, you are going to learn how to make a digital clock using HTML, CSS, and JavaScript programming code. Earlier I shared with you many more types of analog and digital clock-making methods. In this article, I have shown you how to make a completely simple digital watch design.

 There are basically two types of clock, an analog and a digital. Digital clocks are much easier to make than analog clocks. In this watch, I have added a date with time, not just time. That means together you will see time, date, month, date everything. 

This design is based on JavaScript programming code. If you know the basic JavaScript programming code then you will definitely know how to make this design.

Simple Digital clock using Javascript [Live Demo]

If you want to know how it works then you can watch the live demo below. From below you can copy the required source code i.e. HTML, CSS, and JavaScript, and use it in your own work.

See the Pen
digital clock 2 by shantanu jana (@fghty)
on CodePen.

If you want to know how to make this digital with the help of video then you can follow the video tutorial below. This is a youtube video where I showed you step by step how I made this digital watch. We hope this tutorial helps you.

How to Create a digital clock using JavaScript 

First of all, you create an HTML and CSS file. You can add CSS code to the Html file using style tags. In this case, I have used a very small amount of HTML and CSS code, so even if you do not create a separate file for the CSS code. 

Step 1: Create the basic structure of the clock

The HTML programming code below is basically the basic HTML structure. You copy the following structure and paste it into your HTML file. The CSS codes below are mainly used to design the background of this digital watch. The CSS code below has helped to create and design the box you saw in the demo.

   <div class=”time”>
       
  </div>
       

body {
    font-family: “Work Sans”, sans-serif;
    margin-left: 50px;
    margin-top: 150px;
    background: rgb(230, 230, 230);
}
.time {
    background: rgb(12, 12, 12);
    color: #fff;
    border: 7px solid rgb(255, 252, 252);
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    padding: 8px;
    text-align: center;
    width: 500px;
}

Step 2: Add time, am / pm, date options (more…)

Continue ReadingHow to Create a digital clock with date using JavaScript