Simple Digital Clock with Date using JavaScript
Tags: html, javascript, webdev, beginners
Published: 2021-12-25 15:46:58

In this article you will learn how to create Simple [Digital Clock with Date using javaScript](https://www.foolishdeveloper.com/2021/12/javascript-digital-clock-with-date.html) 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.

{% youtube Pg6Xjb60cI4 %}

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](https://www.foolishdeveloper.com/2021/12/javascript-digital-clock-with-date.html) 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.

```html
<div class="background">
  <div class="shape"></div>
  <div class="shape"></div>
</div>
```

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

![Design the webpage](https://blogger.googleusercontent.com/img/a/AVvXsEjGpA3XGVERMnOBCpi-fJ3JeeR6N2phRaEonDumEr1McJ5ADkNqZtMfQo-6Bcd44nVYs51GeUbPPLCnSYSlxVyb0Amp7Cu4wpqJmEsZKsdEk6BgeRY1dsgo8K2C4uTCZU4uej25v--v7rzGBhcvgTEpZV3EHUnDSz5eciLE8qDrBVio5TI8JwWkzIq43Q=s16000)
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.


```css
.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.
```css
.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;
}
```
![two circles](https://blogger.googleusercontent.com/img/a/AVvXsEiyb2i9YyHVgQgNK9nZkDC4KJOgMfwWIngMFNP6jGRB7KnNacCKPsIdWCNVXVYbFQhr189V8p6Sc7lfqGAzpAbRoOubcuwz0DHbNw374RhZmCVPrQG2rVXXDzlTL6-w4XZJ1-cB6zSWOy4u2vf8KWbZK6YBet6H19k33jCP60ndSh7vONmeHV1I7ZtgAQ=s16000)

### 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.
```html
<div class="alarm-clock">

</div>
```

```css
.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.

![Basic structure of digital clock ](https://blogger.googleusercontent.com/img/a/AVvXsEitexAazO46k5wBz9m5FCZzrIg-7YitNrOdDM-C5PrVbU2e5We48TpQ_Y4B02fGIW_2rRVvNySx07t65SRYqjWpcWu-y9paVdfBb-vClPRCRuk_5wFRyDFZJbbkoDhIFygp2kWuowNr51UGsbA7MWBo-xz5vP92RObOP3YhwSsUi8WmiF1Mun3DKacZNA=s16000)
### 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.
```html
<div class="time">
   <span class="hours"></span>
   <span class="colon"> :</span>
   <span class="minutes"></span>
   <span class="colon"> : </span>
   <span class="seconds"></span>
</div>
```

```css
.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.

```css
.alarm-clock .time span.colon {
  width: 14px;
  padding: 15px;
  text-align: center;
  animation: blink 2s infinite;
}
```

```css
@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.

![Add code to view time](https://blogger.googleusercontent.com/img/a/AVvXsEjcJ7IGSCqNoBQwev_9Utv6v4G_OrRia_MzfZNzYqDRUfxIn_a8pFf0XhZag_AjExxRPYZwfT7B6TH0dJEkw2knoRYScwJex1rjLB737spmjcyXZWem4dvHnxWaMc7b_wX0sZ99_UaqGIOnU800JwKP_QSxsgU92sT2s5N2p9U7npTQVZYTmRjvGbAxkw=s16000)

### 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.
```html
<div class="date">
  <span class="month"></span>
  <span class="day"></span>,
  <span class="year"></span>
</div>
```

```css
.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 Date`cannot 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](https://blogger.googleusercontent.com/img/a/AVvXsEj8BGxHBnYilo8nYIGTr63WsWQlx95OFHj9tP0CtSsH10OgszHROyL__BsKUxg4CXCR9Sv1IqZgpkXRcD-eZqW3TtjUnBSVHoSmyPK9tEXZAbhks7wy6TdVnxYQgSBs6RlW6ngfd3xBwr9RnZQ7EwE7njZuM2GHPKDgGbKzod1V-ISVQpAc38Nivhz_qA=s16000)


### 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.

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

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.
```javascript
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.
```javascript
  const now = new Date();
```
Now the current information of month day and year has been collected and stored in different constants.

```javascript
  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.
```javascript
  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"`.
```javascript
  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. 

```javascript
  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.

```javascript
  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.

```javascript
setInterval(setDate, 1000);
```
![Digital Clock with Date using JavaScript
](https://blogger.googleusercontent.com/img/a/AVvXsEj8BGxHBnYilo8nYIGTr63WsWQlx95OFHj9tP0CtSsH10OgszHROyL__BsKUxg4CXCR9Sv1IqZgpkXRcD-eZqW3TtjUnBSVHoSmyPK9tEXZAbhks7wy6TdVnxYQgSBs6RlW6ngfd3xBwr9RnZQ7EwE7njZuM2GHPKDgGbKzod1V-ISVQpAc38Nivhz_qA=s16000)
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](https://www.foolishdeveloper.com/2021/12/javascript-digital-clock-with-date.html) needed to create this JavaScript Digital Clock with Date.

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