Digital Clock using HTML CSS and JavaScript

Interested in building a functional and stylish digital clock using only HTML, CSS, and JavaScript? In this tutorial, we’ll show you step-by-step how to create a digital clock that displays the current time accurately and attractively. You’ll learn how to use HTML to create the structure of the clock, style it with CSS to give it a professional and sleek appearance, and use JavaScript to make the clock dynamic and interactive. Plus, you’ll gain valuable experience in using CSS and JavaScript to create dynamic and responsive designs. By the end of this tutorial, you’ll have a functional and visually stunning “Digital Clock” that you can use to showcase your skills and engage your website visitors. So, let’s get started on creating an impressive and interactive digital clock using HTML, CSS, and JavaScript!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Digital Clock using HTML CSS and JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="clock">
        <div class="hours">
            <div class="first">
                <div class="number">0</div>
            </div>
            <div class="second">
                <div class="number">0</div>
            </div>
        </div>
        <div class="tick">:</div>
        <div class="minutes">
            <div class="first">
                <div class="number">0</div>
            </div>
            <div class="second">
                <div class="number">0</div>
            </div>
        </div>
        <div class="tick">:</div>
        <div class="seconds">
            <div class="first">
                <div class="number">0</div>
            </div>
            <div class="second infinite">
                <div class="number">0</div>
            </div>
        </div>
    </div>

CSS Code

Create a file style.css and paste the code below.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock {
  height: 20vh;
  color: white;
  font-size: 22vh;
  font-family: sans-serif;
  line-height: 20.4vh;
  display: flex;
  position: relative;
  /*background: green;*/
  overflow: hidden;
}

.clock::before,
.clock::after {
  content: "";
  width: 7ch;
  height: 3vh;
  background: linear-gradient(to top, transparent, black);
  position: absolute;
  z-index: 2;
}

.clock::after {
  bottom: 0;
  background: linear-gradient(to bottom, transparent, black);
}

.clock > div {
  display: flex;
}

.tick {
  line-height: 17vh;
}

.tick-hidden {
  opacity: 0;
}

.move {
  animation: move linear 1s infinite;
}

@keyframes move {
  from {
    transform: translateY(0vh);
  }
  to {
    transform: translateY(-20vh);
  }
}

JavaScript Code

Create a file script.js and paste the code below.

var hoursContainer = document.querySelector('.hours')
var minutesContainer = document.querySelector('.minutes')
var secondsContainer = document.querySelector('.seconds')
var tickElements = Array.from(document.querySelectorAll('.tick'))

var last = new Date(0)
last.setUTCHours(-1)

var tickState = true

function updateTime() {
    var now = new Date

    var lastHours = last.getHours().toString()
    var nowHours = now.getHours().toString()
    if (lastHours !== nowHours) {
        updateContainer(hoursContainer, nowHours)
    }

    var lastMinutes = last.getMinutes().toString()
    var nowMinutes = now.getMinutes().toString()
    if (lastMinutes !== nowMinutes) {
        updateContainer(minutesContainer, nowMinutes)
    }

    var lastSeconds = last.getSeconds().toString()
    var nowSeconds = now.getSeconds().toString()
    if (lastSeconds !== nowSeconds) {
        //tick()
        updateContainer(secondsContainer, nowSeconds)
    }

    last = now
}

function tick() {
    tickElements.forEach(t => t.classList.toggle('tick-hidden'))
}

function updateContainer(container, newTime) {
    var time = newTime.split('')

    if (time.length === 1) {
        time.unshift('0')
    }


    var first = container.firstElementChild
    if (first.lastElementChild.textContent !== time[0]) {
        updateNumber(first, time[0])
    }

    var last = container.lastElementChild
    if (last.lastElementChild.textContent !== time[1]) {
        updateNumber(last, time[1])
    }
}

function updateNumber(element, number) {
    //element.lastElementChild.textContent = number
    var second = element.lastElementChild.cloneNode(true)
    second.textContent = number

    element.appendChild(second)
    element.classList.add('move')

    setTimeout(function () {
        element.classList.remove('move')
    }, 990)
    setTimeout(function () {
        element.removeChild(element.firstElementChild)
    }, 990)
}

setInterval(updateTime, 100)

Final Output

Digital Clock using HTML CSS and JavaScript

Written by: Piyush Patil

Code Credits: @dervondenbergen

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖