Digital Clock Using HTML,CSS & JavaScript

How to Create Digital Clock Using HTML,CSS & JavaScript

How to Create Digital Clock Using HTML,CSS & JavaScript

Welcome To The Codewithrandom Blog. In This Blog, We Learn How To Create Digital Clock Using Html, Css, And Javascript.we use Html Code For Creating The Structure Of The Digital Clock And Then Use Css For Styling the Digital Clock And In Last We Use Javascript To Add Clock(Time Show) Functionality To the Digital Clock

I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Part.

HTML Code For Digital Clock

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Digital Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class='clock'>
        <p id='time'></pi> 
      </div>
      <span> hover over clock </span>
      <script src="app.js"></script>
</body>
</html>
 There is all the HTML Code for the Digital Clock. Now, you can see the output without the Css and Javascript. then we write Css and Javascript for the Digital Clock.

Only HTML Code Output

Digital Clock Using HTML,CSS & JavaScript
Digital Clock Using HTML,CSS & JavaScript

CSS Code For Digital Clock

*,
*::before,
*::after {
  content: "";
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  flex-direction: column;
  font-size: 1.3em;
  font-weight: bold;
  font-family: monospace;
  color: white;
  background-color: #fff480;
  display: flex;
  justify-content: center;
  align-items: center;
}
span {
  color: #262626;
  position: absolute;
  bottom: 10%;
}
.clock {
  height: 60px;
  width: 120px;
  border: 3px solid black;
  border-radius: 2px;
  background-color: #b4ffdc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1.5);
}
.clock:hover {
  animation: alarm 0.1s infinite;
}
.clock::before {
  height: 30px;
  width: 6.6666666667px;
  position: absolute;
  border-radius: 0 2px 2px 0;
  transform: translateX(63.1578947368px);
  background-image: repeating-linear-gradient(#595959 0 1%, black 0 1.5%);
}
.clock::after {
  height: 4px;
  width: 30px;
  position: absolute;
  background-image: linear-gradient(
    to right,
    #262626 0 40%,
    transparent 0 60%,
    #262626 0 100%
  );
  transform: translateY(-31.914893617px) translateX(-30px);
}
p {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104.347826087px;
  border: 5px solid black;
  border-radius: 2px;
  padding: 5%;
  background: linear-gradient(
      to right,
      transparent 0 64%,
      black 0 67%,
      transparent 0 100%
    ),
    linear-gradient(#595959 0 50%, #262626 0 100%);
}
p::before {
  content: "";
  position: absolute;
  height: 6.6666666667px;
  width: 100px;
  background-color: #262626;
  transform: translateY(33.3333333333px);
}
@keyframes alarm {
  35% {
    transform: scale(1.5) rotate(10deg);
  }
  65% {
    transform: scale(1.5) rotate(-10deg);
  }
}

50+ Html ,Css & Javascript Projects With Source Code

Only HTML + CSS Code Output Of Digital Clock

Digital Clock Using HTML,CSS & JavaScript
Digital Clock Using HTML,CSS & JavaScript

JavaScript Code For Digital Clock

const displayTime = () => {
    let date = new Date;
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();
    let amPm = ''

    // am pm 
    hour < 12 ? amPm = 'AM' : amPm = 'PM'

    // 12hr clock 
    if (hour > 12) {
        hour -= 12
    }

    // padding 
    let padHour = String(hour).padStart(2, '0');
    let padMin = String(minute).padStart(2, '0');
    // let padSec = String(second).padStart(2, '0');

    // display
    time.textContent = `${padHour}:${padMin}  ${amPm}`;

    // update in near real-time
    requestAnimationFrame(displayTime);
}


displayTime();

Final output Of Digital Clock Using HTML,CSS & JavaScript

Digital Clock Using HTML,CSS & JavaScript
Digital Clock Using HTML,CSS & JavaScript

 

Now that we have completed our Digital Clock. our updated output with Html,Css and JavaScript. I hope you like the  Digital Clock. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Portfolio Website using HTML and CSS (Source Code)

Thank you!

This post teaches us How to Create Digital Clock Using HTML,CSS & JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – Anna Pawl



Leave a Reply