Latest Posts

Using jQuery to create a digital clock

Posted on by Zubair Shaik

Loading

Creating a digital clock using jQuery is a great project to understand how JavaScript and jQuery work together for real-time updates. In this guide, we will build a digital clock that updates every second, displaying the current time in HH:MM:SS AM/PM format.

Table of Contents

  1. Introduction
  2. Setting Up the Environment
  3. Structuring the HTML
  4. Styling the Clock with CSS
  5. Implementing Clock Logic with jQuery
  6. Enhancing the Clock with Additional Features
  7. Optimizing Performance
  8. Conclusion

1. Introduction

A digital clock is a clock that displays time digitally instead of using an analog dial. This project will use HTML, CSS, and jQuery to build a fully functional digital clock.

Features:

  • Displays the current time in HH:MM:SS AM/PM format.
  • Updates the time dynamically every second.
  • Uses jQuery for DOM manipulation.
  • Additional enhancements like changing themes, date display, and animations.

2. Setting Up the Environment

Before we start coding, ensure you have:

  • A code editor (VS Code, Sublime Text, or Notepad++).
  • A web browser (Chrome, Firefox, Edge, etc.).
  • Basic knowledge of HTML, CSS, and jQuery.
  • jQuery library included in the project.

3. Structuring the HTML

The first step is to create a simple HTML structure.

<!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">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="clock-container">
        <h1>Digital Clock</h1>
        <div id="clock"></div>
        <div id="date"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

  • The <h1> tag displays the title “Digital Clock”.
  • The <div id="clock"> displays the current time.
  • The <div id="date"> displays the current date.

4. Styling the Clock with CSS

Let’s make the clock visually appealing.

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
    color: white;
    margin: 0;
}

.clock-container {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background-color: #333;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

h1 {
    font-size: 24px;
}

#clock {
    font-size: 50px;
    font-weight: bold;
    margin-top: 10px;
}

#date {
    font-size: 20px;
    margin-top: 5px;
}

Explanation:

  • The body is styled to have a black background with centered content.
  • The clock-container gives a modern digital clock feel with a dark theme.
  • The #clock and #date elements are styled to look prominent.

5. Implementing Clock Logic with jQuery

Now, let’s write the jQuery script to update the time dynamically.

$(document).ready(function() {
    function updateClock() {
        let now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        let amPm = hours >= 12 ? "PM" : "AM";

        hours = hours % 12;
        hours = hours ? hours : 12; // Convert 0 to 12
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        let timeString = `${hours}:${minutes}:${seconds} ${amPm}`;
        let dateString = now.toDateString();

        $("#clock").text(timeString);
        $("#date").text(dateString);
    }

    setInterval(updateClock, 1000);
    updateClock();
});

Explanation:

  1. updateClock() function:
    • Gets the current date and time using new Date().
    • Extracts hours, minutes, and seconds.
    • Converts 24-hour format to 12-hour format.
    • Ensures two-digit format for minutes and seconds.
    • Updates the time every 1 second using setInterval(updateClock, 1000).

6. Enhancing the Clock with Additional Features

6.1 Adding Multiple Themes

Allow users to switch between light and dark modes.

<button id="toggle-theme">Switch Theme</button>

.light-mode {
    background-color: white;
    color: black;
}

.dark-mode {
    background-color: black;
    color: white;
}

$("#toggle-theme").click(function() {
    $("body").toggleClass("light-mode dark-mode");
});

6.2 Adding Fade-in Animation

Make the clock appear smoothly.

#clock {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

$(document).ready(function() {
    setTimeout(() => { $("#clock").css("opacity", "1"); }, 500);
});

6.3 Adding Background Color Change

Change the background color every hour.

function changeBackground() {
    let colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#A133FF"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    $("body").css("background-color", randomColor);
}

setInterval(changeBackground, 3600000); // Change every hour

7. Optimizing Performance

7.1 Use requestAnimationFrame() Instead of setInterval()

This makes the animation smoother and reduces CPU load.

function updateClockEfficiently() {
    requestAnimationFrame(updateClockEfficiently);
    updateClock();
}

updateClockEfficiently();

7.2 Minify jQuery Code

Use a minified version of jQuery and JavaScript.

We have successfully built a digital clock using jQuery with:

  • Live time updates
  • Date display
  • Dark and light themes
  • Smooth animations

You can further enhance this project by adding:

  • Alarms
  • Custom fonts
  • Weather integration

Let me know if you want any additional features!

Leave a Reply

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