In this article, you will learn how to create Digital Clock with Date using JavaScript. Earlier I shared with you many more types of digital and analog clocks designs. This digital watch is made with a Glassmorphism design.
Glassmorphism design is a very popular CSS effect that adds extraordinary beauty to any project. We all use digital watches. Making digital clocks from analog clocks is much easier. The time shown here will be taken from the device i.e. the time that will be on your device will be shown here. This time JavaScript’s newDate method is used to receive.
I fully explained how I took the time from the device to show in this project. There is no reason to worry if you are a beginner. Here I have shared step-by-step tutorials and given possible explanations of each line. As I said before you will see the date with this JavaScript digital clock. That means both time and date can be seen.
If you want to make this digital clock, you must have a basic idea about JavaScript HTML, and CSS. Below I have given a complete step-by-step tutorial on how I created this JavaScript Digital Clock with Date. As I said before it is made with the help of Glassmorphism design. In the case of Glassmorphism design, the background is somewhat transparent, meaning that the content in the background can be seen.
Digital Clock with Date using JavaScript
First, we created two colorful circles on the webpage. Here the background of the project(Digital Clock with Date using JavaScript) is almost transparent so the two colorful circles behind it can be seen somewhat clearly. First, a box was created to show the time here.
Then I made another small box where the date will be shown. Arrangements have been made here to show the month, day, and year between the dates.
See the Pen
Untitled by Raj Template (@RajTemplate)
on CodePen.
Hopefully, the demo above has helped you to know how it works. Above you will find the required source code. However, you can download the source code with the help of the button below the article.
First, we created two colorful circles using HTML and CSS. Then I made the basic design. After all, using JavaScript takes time from the device to make it work.
Step 1: Create two colorful circles
We have created two colorful circles on the webpage using the following HTML and CSS codes. I have created an area to see these. Those two circles can be seen in that area.
<div class=”background”>
<div class=”shape”></div>
<div class=”shape”></div>
</div>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: #080710;
height: 100vh;
}
The width of that area: 430px and height: 520px. Here the height of the circles, the width 140px, and the border-radius helped to convert it into a circle.
.background{
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 140px;
width: 140px;
position: absolute;
border-radius: 50%;
}
The following codes have been used to locate that circle. Different positions and background colors have been added for the two circles.
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: 70px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -80px;
bottom: 80px;
}
Step 2: HTML code to create a digital clock (more…)
