How to Design a Digital Clock Using JavaScript - Code Masala Bytes - Helping Developers Solve Real World Problems

Creating a digital clock with JavaScript is a good starter project for developers who want to hone their web development skills. Digital clocks are essential for many websites. Especially at critical times like booking websites. public transport app and flight schedule This tutorial will guide you step-by-step on how to create a digital clock using JavaScript.

Prerequisites

Before you dive into the code Make sure you have a basic understanding:

HTML: To structure web pages.
CSS: to style digital clocks.
JavaScript: To control the functions and logic of the clock.

Approach

Follow these steps to create a digital clock:

HTML: Structure your page using <div> tags to display clocks. Start with a simulated time format such as “HH:MM”.
CSS: Use CSS to style the clock and page layout.
JavaScript: Write a function to display the current time and refresh it every second using setInterval().

Step-by-Step Guide

1. HTML Setup

First, create an HTML file and add a <div> element to hold the clock.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital Clock</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="clock">00:00:00 AM</div>
    <script src="script.js"></script>
</body>
</html>

This basic structure consists of placeholders for the clock and links to your CSS and JavaScript files.

2. Styling with CSS

Add some basic styles to the style.css file to make the clock look attractive:

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #282c34;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

#clock {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 2px;
}

You can customize the style according to your design needs. Consider using digital fonts to give the watch a realistic look. You can download fonts online and use the @font-face feature to include them.

3. JavaScript Logic

Now let’s add a JavaScript function to display the current time. Create a script.js file and add the following code:

JavaScript

// Call the showTime function every second
setInterval(showTime, 1000);

// Define the showTime function
function showTime() {
    let time = new Date(); // Get current time
    let hour = time.getHours();
    let min = time.getMinutes();
    let sec = time.getSeconds();
    let am_pm = "AM";

    // Convert to 12-hour format
    if (hour >= 12) {
        am_pm = "PM";
        if (hour > 12) hour -= 12;
    } else if (hour === 0) {
        hour = 12;
    }

    // Add leading zeros to hours, minutes, and seconds
    hour = hour < 10 ? "0" + hour : hour;
    min = min < 10 ? "0" + min : min;
    sec = sec < 10 ? "0" + sec : sec;

    // Construct the time string
    let currentTime = `${hour}:${min}:${sec} ${am_pm}`;

    // Display the time in the #clock element
    document.getElementById("clock").innerHTML = currentTime;
}

// Call the function to show time immediately
showTime();

This script defines the showTime function, which retrieves the current time using a new Date() and formats it as a 12-hour clock with AM/PM. The time is updated every second using setInterval().

Additional Customizations

You can use digital fonts from online sources to make it look more beautiful. Download font file Include them in your project. and apply it via CSS:

CSS

@font-face {
    font-family: 'DigitalFont';
    src: url('path-to-font-file.ttf');
}

#clock {
    font-family: 'DigitalFont', sans-serif;
}

This will give your digital clock a professional and authentic feel.

Share This Post: