Make a Digital Clock with Date using JavaScript

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

Now I have added the HTML code needed to create the digital clock. One colon was used between each time to see the time. That is, two colonies have been used between the three periods of the hour, minute, and second.

<div class="alarm-clock">

  <div class="date">

    <span class="month"></span>

    <span class="day"></span>,

    <span class="year"></span>

  </div>

  <div class="time">

    <span class="hours"></span>

    <span class="colon"> :</span>

    <span class="minutes"></span>

    <span class="colon"> : </span>

    <span class="seconds"></span>

  </div>

</div>

 Now some basic CSS code has been added to design it. Here a background color is used and a backdrop-filter is used to make the background a bit opaque.

.alarm-clock {

  position: relative;

  padding: 7px;

  backdrop-filter: blur(10px);

  border-radius: 10px;

  background-color: rgba(255,255,255,0.17);

}

Step 3: Activate Digital Clock with Date using JavaScript

Now is the time to implement it with JavaScript. Here I have given below the complete explanation of complete JavaScript. Hopefully, you won't have too much trouble understanding the JavaScript below.

First, some of the class functions are assigned a constant. Because we can't directly use any ID or class function in JavaScript. Time is then taken from the device using JavaScript's new date. The current information of hours, minutes, seconds, months, days, and the whole year has been received in the same manner.

I have stored all the information in a function called set date. Then, using setInterval, the set date function is updated every 1 second. As you can see here used 1000 milliseconds, which means these calculations will be updated every one second. As these calculations are updated every second, we can see the change in time every second.

//Need to determine the constant of some id functions.

//No html function can be used directly in JavaScript

const hours = document.querySelector('.hours');

const minutes = document.querySelector('.minutes');

const seconds = document.querySelector('.seconds');

const month = document.querySelector('.month');

const day = document.querySelector('.day');

const year = document.querySelector('.year');

function setDate() {

  //The "new Date" method helps to get the current time from the device

  const now = new Date();

  

  // Now the information of month, day, year has to be received from the device

  const mm = now.getMonth();

  const dd = now.getDate();

  const yyyy = now.getFullYear();

  

  //Now the information of sec, min, hours has to be received from the device

  const secs = now.getSeconds();

  const mins = now.getMinutes();

  const hrs = now.getHours();

  

  //I have stored the names of all the months in the constant named "monthName"

  const monthName = [

  'January', 'February', 'March', 'April',

  'May', 'June', 'July', 'August', 'September',

  'October', 'November', 'December'];

 //Zero will be added when the time is below 10

  

  //As a result, time will always be two characters long

  if (hrs < 10) {

    hours.innerHTML = '0' + hrs;

  } else {

    hours.innerHTML = hrs;

  }

  if (secs < 10) {

    seconds.innerHTML = '0' + secs;

  } else {

    seconds.innerHTML = secs;

  }

  if (mins < 10) {

    minutes.innerHTML = '0' + mins;

  } else {

    minutes.innerHTML = mins;

  }

//"innerHTML" is used to display all the information in the webpage

  month.innerHTML = monthName[mm];

  day.innerHTML = dd;

  year.innerHTML = yyyy;

}

  //All of the above calculations are stored in "setDate".

//Now with the help of "setInterval" that calculation has to be updated every 1 second. This will update the time every second.

  

//1 second = 1000 milliseconds

setInterval(setDate, 1000);

Step 4: Design the time viewing space with CSS

Now we have to design the places to show the time. The following CSS codes have helped to design the text that has been used to show the time here.

.alarm-clock .time {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px 40px 19px;

  background-color: rgba(255,255,255,0.13);

  border-radius: 10px;

  font-family: "Orbitron", sans-serif;

  font-size: 62px;

}

.alarm-clock .time span {

  position: relative;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  color: #09ecf8;

  text-shadow: 0 0 15px #375f08;

  line-height: 1.75;

  margin-bottom: 10px;

}

Step 5: Add animation to colon

Now animation has been added to the colon that was used. These colonies will be on and off every 0.5 seconds.

.alarm-clock .time span.colon {

  width: 14px;

  padding: 15px;

  text-align: center;

  animation: blink 2s infinite;

}

@keyframes blink {

  0% {

    opacity: 0;

  }

  30% {

    opacity: 1;

  }

  50% {

    opacity: 0;

  }

  70% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

Step 6: Design the date box in Digital Clock

Now I have designed the place to see the date. A small box has been created to view the date as you saw in the demo above. I used the following CSS code to make that box.

.alarm-clock .date {

  position: absolute;

  bottom: 1px;

  left: 50%;

 background-color: rgba(255,255,255,0.27);

  padding: 8px;

  color: white;

  font-size: 18px;

  font-weight: 500;

  font-family: sans-serif;

  text-transform: uppercase;

  transform: translateX(-50%);

  z-index: 9;

}

Hopefully from the above tutorial, you have learned how I created this Digital Clock with Date using JavaScript. If you have any problems, you can definitely let me know in the comments. Above is the demo section which will help you to get the live experience. 

There is also a video that will give you step-by-step tutorials. You can download the source code required to create JavaScript Digital Clock with Date with the help of the download button below.

 Earlier I shared with you many more designs on digital and analog clocks. You can watch those tutorials if you like the design.

The download will start automatically