Shantanu Jana

Posted on Dec 25, 2021 • Edited on Sep 29

Simple Digital Clock with Date using JavaScript

#html #javascript #webdev #beginners

In this article you will learn how to create Simple Digital Clock with Date using javaScript HTML, CSS. Earlier I shared with you many more ways to make digital clock. This digital clock has been created with the help of Glassmorphism design.

It was designed with HTML, CSS and JavaScript enabled this digital watch. This is a bit different from a normal digital watch. Because here you can see the date with time.

You can watch the live demo to see how it works. If you look at the picture above you will understand that there is a small box where the date can be found.

Time and date will be received from your device using New date method. Then using setInterval I instructed to update all those calculations and time every second.

Step 1: Design the webpage

Using the following HTML and CSS codes, I first created two circles on the webpage. These circles are basically a part of Glassmorphism design. You can skip this colorful circle if you want.

<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;
}

First an area has been defined which will contain these two circles. Here the width of the area: 430px and height: 520px. Circle height, width 140px and border-radius: 50% is used to make it completely round.

.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%;
}

Now those two circles have been placed in a certain place and in both cases we have used different linear-gradient colors. You can adjust the positions of the circles as you wish.

.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: Basic structure of digital clock

Now the basic structure of the digital clock has been created. Backdrop-filter: blur (10px) has been used to blur the background of this clock.

<div class="alarm-clock">

</div>

.alarm-clock {
  position: relative;
  padding: 7px;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  background-color: rgba(255,255,255,0.17);
}

📌📌 Remember, time cannot be seen without JavaScript. I have used the image below to understand what will change after using the above HTML and CSS.

Step 3: Add code to view time

Now I have added the necessary HTML to view the time. Hours, minutes and seconds can be found here. A colon has been used in between each period which will help to enhance the beauty a bit.

<div class="time">
   <span class="hours"></span>
   <span class="colon"> :</span>
   <span class="minutes"></span>
   <span class="colon"> : </span>
   <span class="seconds"></span>
</div>

.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 4: Design the colon and add animation

Now the colon has been designed and animation has been added. In the meantime I have used an animation that will help to show and hide some time intervals.

.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;
  }
}

📌📌 Remember, time cannot be seen without JavaScript. I have used the image below to understand what will change after using the above HTML and CSS.

Step 5: Add code to view the date

Now we have created a place to see the date in the digital clock. As I said before, months, days and years can be seen here. Now I have used HTML and CSS code to create its basic structure. Later I implemented it with the help of JavaScript.

<div class="date">
  <span class="month"></span>
  <span class="day"></span>,
  <span class="year"></span>
</div>

.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;
}

📌📌 Remember, time and Datecannot be seen without JavaScript. I have used the image below to understand what will change after using the above HTML, CSS.

Step 6: Activate Digital Clock with Date using JavaScript

Above we have all designed to create this Digital Clock with Date. Now is the time to implement it with JavaScript. For this you must have an idea about basic JavaScript.

First some of the class functions have been assigned a constant. Because I can't directly use the ID function in JavaScript. For that a global constant has to be determined.

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');

In the following function I will add all the calculations. In other words, I will add all the calculations needed to increase this clock in this function.

function setDate() {

}

As I mentioned earlier, the time and date information used here will be collected from the device using JavaScript's New Date Method.

  const now = new Date();

Now the current information of month day and year has been collected and stored in different constants.

  const mm = now.getMonth();
  const dd = now.getDate();
  const yyyy = now.getFullYear();

In the same way hours minutes minutes and seconds are taken from the device and they are stored in some constant.

  const secs = now.getSeconds();
  const mins = now.getMinutes();
  const hrs = now.getHours();

Now I have stored the names of all the months in a constant called "monthName".

  const monthName = [
  'January', 'February', 'March', 'April',
  'May', 'June', 'July', 'August', 'September',
  'October', 'November', 'December'];

Now through a few conditions I have managed to add one zero to the time below 10. When the time is below 10, one zero will be added before that time. As a result, the times will be two numbers.

Then those times have been arranged to show in the webpage using innerhtml. innerhtml helps to display any content within a web page.

I have given the condition here that if the time is less than 10 then one zero will be added and then that time will be seen in the webpage. Then I gave another condition using else. If the time is not below 10, then the time can be seen directly on the webpage.

  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;
  }

Now using the same innerhtml, the information of the month, day and year has been arranged in the webpage.

  month.innerHTML = monthName[mm];
  day.innerHTML = dd;
  year.innerHTML = yyyy;

As I mentioned earlier, all these calculations are stored in a function called set date. Now that function has been instructed to update every 1000 milliseconds or one second.

setInterval helps to update any information after a certain period of time. This will update all these calculations every 1 second and we will see the time change every second.

setInterval(setDate, 1000);

Hopefully from this tutorial you have learned how I created Digital Clock with Date using JavaScript. I have made many more types of digital watches before.

If you have any difficulty in making this JavaScript Digital Clock, please let me know in the comments. You can download the source code needed to create this JavaScript Digital Clock with Date.

Related Post: