Javascript Digital Clock With Animation | Digital Clock Code

Javascript Digital Clock With Animation | Digital Clock Code

Welcome🎉 to Code With Random blog. This blog teaches us how we create a Javascript Digital Clock. We use HTML, Css, and javascript for the Javascript Digital Clock. I hope you enjoy our blog so let’s start with a basic HTML structure for the Javascript Digital Clock.

HTML Code

<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 Javascript Digital Clock. Now, you can see an output with a Javascript Digital Clock then we write javascript for the Javascript Digital Clock.

Output

html digital clock

CSS Code

*,
*::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);
  }
}

Css Updated output

css digital clock

Javascript Code

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

javascript digital clock

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

This post teaches us how to create a Javascript Digital Clock using simple HTML & CSS and 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

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Share on:

Leave a Comment