Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

CodingNepal — Sat, 29 Aug 2020 08:39:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Working Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. Earlier I have also shared a blog on how to create a Digital Clock using JavaScript but in that clock, there wasn’t a glowing effect and now it’s time to create a colorful glowing effect on the digital clock.

A digital clock or watch in which the hours, minutes, and sometimes seconds are indicated by digits, as opposed to an analog clock, where the time is indicated by the positions of rotating hands. If you’re searching for Working Analog Clock, I have also created a blog on how to create a Working Analog Clock.

In this program (Digital Clock with Colorful Glowing Effect), on the webpage, there is a digital clock that is displaying the real-time with a colorful gradient glowing background and text effect. Generally, this clock takes real-time from our pcs/computers, not from the server, and shows on the webpage. Using Javascript new Date() method I fetched real-time from my current PC.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Digital Clock with Colorful Glowing Effect ).

Video Tutorial of Digital Clock with Colorful Glowing Effect

In the video, you have seen the working digital clock which is displaying real-time and I hope you have understood the basic codes behind creating this program. As you have seen in the video, I used the only CSS to create a glowing background effect and animate it with the CSS @keyframes property. But to show the real-time I used pure JavaScript.

If you’re a beginner, you can also create this digital clock or the glowing effect because there are no vast codes of CSS and JavaScript on this program. If you like this program (Custom Checkbox Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Working Clock in your HTML pages and websites.

Digital Clock with Colorful Glowing Effect [Source Codes]

To create this program (Digital Clock with Colorful Glowing Effect). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Digital Clock with Glowing Effect | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.wrapper{
  height: 100px;
  width: 360px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display{
  z-index: 999;
  height: 85px;
  width: 345px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time{
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
    filter: hue-rotate(360deg);
  }
}
.wrapper span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child{
  filter: blur(7px);
}
.wrapper span:last-child{
  filter: blur(20px);
}

That’s all, now you’ve successfully created a Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Digital Clock using HTML CSS & Javascript

CodingNepal — Sun, 26 Apr 2020 15:47:00 +0000

Hello readers, Today in this blog you’ll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it’s time to create a Digital Clock using Javascript.

JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image, there is a real-time digital clock, which means you can see time in number with hour, minutes, and seconds.

And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just a time in numbers format and am pm indicator. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Digital Clock).

Video Tutorial of Digital Clock using Javascript

As you can see in the video this is a real-time working digital clock with ‘Am’ and ‘PM’ indicators. I hope this video help beginner to understand the code behind the working digital clock.

You can use it in your sites and projects after a few changes of codes according to your requirements. And I believe you can take this digital clock at the next level with your creativity. If you like this program (Digital Clock) and want to get the source codes of this program. You can easily get it from the download link which is given below.

Working Digital Clock using Javascript [Source Codes]

To create this program (Digital Clock). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.