DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Simple Digital Clock with Date using JavaScript
Shantanu Jana
Shantanu Jana

Posted on

Simple Digital Clock with Date using JavaScript

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode

Design the webpage
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%;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

two circles

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>
Enter fullscreen mode Exit fullscreen mode
.alarm-clock {
  position: relative;
  padding: 7px;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  background-color: rgba(255,255,255,0.17);
}
Enter fullscreen mode Exit fullscreen mode

πŸ“ŒπŸ“Œ 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.

Basic structure of digital clock

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>
Enter fullscreen mode Exit fullscreen mode
.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;

}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
@keyframes blink {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

πŸ“ŒπŸ“Œ 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.

Add code to view time

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

πŸ“ŒπŸ“Œ 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.

 Add code to view the date

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');
Enter fullscreen mode Exit fullscreen mode

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() {

}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Digital Clock with Date using JavaScript<br>
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.

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Top comments (7)

Collapse
 
codewhiteweb profile image
CodeWhiteWeb

Nice Work MAN!

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
ben profile image
Ben Halpern

Neat

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
spandan profile image
Spandan

Amazing UI
Nice design
Just can't stop appreciating it
Wonderful
Keep it up!

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
vuong1stfb profile image
vuong1stfb

good

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.