Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to design In this tutorial, you can learn how to design a digital clock with date and time using CSS, HTML, and Vanilla Javascript. This digital clock includes Date (Day, Month, Year), Time (Hours, Minutes, Seconds), and Period (AM/PM). This clock is in 12 hours format. So this tutorial will be helpful for you to design an awesome digital clock with your creative ideas. Let's see how to design this working digital clock javascript.

First, create the index.html file and the style.css file. After you created these two files, then start the HTML part of the digital clock in the index.html file. After the HTML part of the digital clock is complete then link the style.css file to the index.html file between the <head></head> tags as you can see in the video. Then go to the style.css file and start the styling part of the digital clock. After the styling part is complete then go back to the index.html file to code the javascript part of the digital clock. In the index.html file before body close tag open <script></script> tags and complete the javascript part of the digital clock as you can see in the video. So that's all, Hope this video will be helpful for you to design a working digital clock with awesome ideas.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Digital Clock With Date</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body onload="initClock()">

<div class="datetime">
      <div class="date">
        <span id="dayname">Day</span>,
        <span id="month">Month</span>
        <span id="daynum">00</span>,
        <span id="year">Year</span>
      </div>
      <div class="time">
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

if(hou >= 12){
            pe = "PM";
          }
          if(hou == 0){
            hou = 12;
          }
          if(hou > 12){
            hou = hou - 12;
          }

Number.prototype.pad = function(digits){
            for(var n = this.toString(); n.length < digits; n = 0 + n);
            return n;
          }

var months = ["January", "February", "March", "April", "May", "June", "July", "Augest", "September", "October", "November", "December"];
          var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
          var ids = ["dayname", "month", "daynum", "year", "hour", "minutes", "seconds", "period"];
          var values = [week[dname], months[mo], dnum.pad(2), yr, hou.pad(2), min.pad(2), sec.pad(2), pe];
          for(var i = 0; i < ids.length; i++)
          document.getElementById(ids[i]).firstChild.nodeValue = values[i];
    }

function initClock(){
      updateClock();
      window.setInterval("updateClock()", 1);
    }
    </script>

</body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #10101E;
}

.datetime{
  color: #fff;
  background: #10101E;
  font-family: "Segoe UI", sans-serif;
  width: 340px;
  padding: 15px 10px;
  border: 3px solid #2E94E3;
  border-radius: 5px;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
  transition: 0.5s;
  transition-property: background, box-shadow;
}

.datetime:hover{
  background: #2E94E3;
  box-shadow: 0 0 30px #2E94E3;
}

.date{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time{
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time span:not(:last-child){
  position: relative;
  margin: 0 6px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time span:last-child{
  background: #2E94E3;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 0 5px;
  border-radius: 3px;
}

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

AnonymousJuly 11, 2021 at 3:19 AM
Outstanding
EKSSeptember 11, 2021 at 1:12 AM
I use html cose in my side with elementor but did not working, no animation show and even date and time, would you like to guide me that what is the error?
JayantaJanuary 16, 2022 at 8:54 AM
Thank You, So much. I use this by editing a few of your Code.
AnonymousJuly 19, 2022 at 12:20 PM
looks great, would just like to add some more code to it so it can be used
AnonymousJanuary 4, 2023 at 8:48 AM
How to make it into 24 hour clock?

Wednesday, January 13, 2021

Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form