How to create Digital Clock with CSS and JavaScript

Create Digital Clock

There are 2 types of clock

  1. Analog Clock
  2. Digital Clock

We will create a Digital clock (as it is easy to make) with vanilla CSS and JavaScript. Create Digital Clock is a beginner’s must-do project.

Approach: The approach is to use the date object, which will call the function every second to refresh the browser screen

Let’ see the HTML template code for it.

1. HTML Code

<!DOCTYPE html>
<html lang="en">       
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock | @code.architects</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>

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

Now adding the Google fonts links in the head section after <title>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">

Appending the body content to the HTML file

<div class="container">
    <div class="time">
        <span id="hour">00</span>
        <span class="blink-colon">:</span>
        <span id="minute">00</span>
        <span class="blink-colon">:</span>
        <span id="second">00</span>
    </div>
    <div class="date-container">
        <span id="date">01/01/2014</span>,
        <span id="day">Sunday</span>
    </div>
</div>

2. CSS Code

Using CSS, we will be styling the HTML Code to make look cool. There are many CSS frameworks available in the market, but we would be using none xD. We will be using Flex property to align the content perfectly center to the screen. The CSS template code is like

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Inconsolata', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #2c2f3b;
}

Main Styling of HTML Code with Keyframes animation

.container {
    border: 10px solid rgb(0, 240, 240);
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-size: 32px;
    border-radius: 50%
    background: rgb(36, 37, 51);
    box-shadow:0 0 12px rgba(0,240,240,0.3), 0 0 12px rgba(0,0,0,0.4) inset;
}
.blink-colon {
    animation: blink 1s infinite;
}       
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    30% {
        opacity: 0.4;
    }
}       
.date-container {
    margin-top: 6px;
    font-size: 16px;
    color: rgba(255,255,255,0.8)       
}

3. JavaScript Code

Using the date() method to get the real time client time & date. The function updateTime() will be called every second from the setInterval() method

window.onload = function () {
    setInterval(updateTime, 1000);
};

Now the updateTime() function to complete the work. We need the call the new Date() every time the function gets called so, the time gets updated. Store the new Date() in a variable, let’s say d. So, d.getHours() will return the client hours in 24 hours format. d.getMinutes() returns minutes & so on. d.getDay() returns the current day number. 0 for Sunday, 1 for Monday till 6 for Saturday. We are using a switch case to convert them.

function updateTime() {
    //Clock Time
    const hourEL = document.querySelector("#hour");
    const minuteEL = document.querySelector("#minute");
    const secondEL = document.querySelector("#second");
    let d = new Date();
    let hours = d.getHours();
    let minutes = d.getMinutes();
    let seconds = d.getSeconds();
    <em>if</em> (hours >= 0 && hours <= 9) hours = "0" + hours;
    <em>if</em> (minutes >= 0 && minutes <= 9) minutes = "0" + minutes;
    <em>if</em> (seconds >= 0 && seconds <= 9) seconds = "0" + seconds;
    hourEL.innerHTML = hours;
    minuteEL.innerHTML = minutes;
    secondEL.innerHTML = seconds;

    // Clock Date
    const dateEl = document.querySelector("#date");
    let date = d.getDate();
    <em>if</em> (date >= 0 && date <= 9) date = "0" + date;
    let month = d.getMonth();
    <em>if</em> (month >= 0 && month <= 9) month = "0" + month;
    let year = d.getFullYear();
    <em>if</em> (year >= 0 && year <= 9) year = "0" + year;
    dateEl.innerHTML = `${date}/${month}/${year}`;

    // Clock Day
    const dayEL = document.querySelector("#day");
    let daynumber = d.getDay();
    let day = "";
    <em>switch</em> (daynumber) {
        <em>case</em> 0: day = "Sunday"; <em>break</em>;
        <em>case</em> 1: day = "Monday"; <em>break</em>;
        <em>case</em> 2: day = "Tuesday"; <em>break</em>;
        <em>case</em> 3: day = "Wednesday"; <em>break</em>;
        <em>case</em> 4: day = "Thrusday"; <em>break</em>;
        <em>case</em> 5: day = "Friday"; <em>break</em>;
        <em>case</em> 6: day = "Saturday"; <em>break</em>;
    }
    dayEL.innerHTML = day;
}

That’s it!!

Output

create Digital Clock

To see the live output, click here & visit our other blog here

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

three × four =