How to Create a Digital Clock with Date using HTML, CSS & JavaScript

In this tutorial, you’ll learn how to create a beautiful and responsive Digital Clock using HTML, CSS, and JavaScript. This project is perfect for beginners looking to practice DOM manipulation and real-time functionality in JavaScript.

🎬 Watch the Tutorial

🔗 GitHub Source Code

You can find the complete source code on my GitHub repo here:

👉 View on GitHub

🧱 Step 1: HTML Structure

Here’s the base HTML layout for the clock:

<!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 class="clock">
        <div class="time">
            <span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span> <span class="period"></span>
        </div>
        <div class="date">
            <span class="month">Jan</span> <span class="today">10</span>,<span class="year">2025</span>
        </div>
    </div>

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

🎨 Step 2: CSS Styling

This CSS will center the clock and style it beautifully on both desktop and mobile screens.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #282c34;
}
.clock {
    font-family: 'Courier New', Courier, monospace;
    color: #61dafb;
    font-size: 5rem;
    text-align: center;
}
.date {
    font-size: 2rem;
    color: #ffffff;
    margin-top: 20px;
}
@media (max-width: 600px) {
    .clock { font-size: 3rem; }
    .date { font-size: 1.2rem; }
}

⚙️ Step 3: JavaScript Logic

The JavaScript will update the time and date every second using setInterval().

function updateClock() {
    let date = new Date();
    let hour = date.getHours();
    let minute = date.getMinutes();
    let seconds = date.getSeconds();
    let month = date.getMonth();
    let today = date.getDate();
    let year = date.getFullYear();
    let period = hour >= 12 ? 'PM' : 'AM';

    if (hour >= 12) {
        hour = hour - 12;
        if (hour === 0) hour = 12;
    }

    hour = hour < 10 ? '0' + hour : hour;
    minute = minute < 10 ? '0' + minute : minute;
    seconds = seconds < 10 ? '0' + seconds : seconds;

    document.querySelector('.hour').textContent = hour;
    document.querySelector('.minute').textContent = minute;
    document.querySelector('.second').textContent = seconds;
    document.querySelector('.period').textContent = period;

    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    document.querySelector('.month').textContent = monthNames[month];
    document.querySelector('.today').textContent = today < 10 ? '0' + today : today;
    document.querySelector('.year').textContent = year;
}

setInterval(updateClock, 1000);
updateClock(); // Call initially

✅ Result Preview

Here’s what the final result should look like after following all the steps. It shows current time and date and updates every second.



💡 Bonus Tips

  • Try adding day of the week using getDay()
  • Use different fonts or themes for styling
  • Try showing time in 24-hour format as an option

If you liked this project, don’t forget to subscribe to the YouTube channel and check out the full project collection on GitHub!

Trending Posts

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
Read More

🚀 Build a QR Code Generator Using HTML, CSS & JavaScript

Image
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript. This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs : CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js ✅ Features Generate QR codes instantly Accepts text or URL Press Enter to generate Download QR code as PNG Modern UI with smooth design 📌 Full Source Code (HTML, CSS & JavaScript) 📄 HTML Code <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="style.css">   <title>QR Code Generator</title> </head> ...
Read More

Shield Your Small Business: Must-Have Cybersecurity Strategies

Image
Image via Freepik In an era where digital threats loom large, small businesses must prioritize cybersecurity to protect their operations. Cybercriminals increasingly target smaller enterprises, often perceiving them as easier targets due to limited resources and defenses. By adopting robust cybersecurity measures, small businesses can safeguard their digital assets and ensure their longevity and reputation in the market. This article explores practical strategies to help small enterprises bolster their defenses against cyber threats. Embracing Staging Environment Testing Testing updates in a staging environment is essential for spotting bugs and performance issues before they impact your customers. This environment mimics your production setup, helping to identify discrepancies that might lead to security vulnerabilities. By thoroughly vetting updates in this controlled space, you minimize risks to your live system. Implementing role-based access control and conducting regular...
Read More

Bridging the Language Divide: How Modern IT Professionals Can Make Their Work Make Sense

Image
Every IT professional knows the pain of seeing eyes glaze over during a meeting. Firewalls, integrations, or “containers” can sound like code words for confusion. The truth? The best IT communicators aren’t just tech-savvy — they’re translators who turn complexity into clarity, bridging technology and business value. Major Points To earn influence beyond the server room, speak in outcomes, not acronyms. Ground your communication in impact — time saved, risk reduced, performance improved. Use visuals, stories, and empathy to help non-technical audiences grasp the “why,” not just the “how.” Common Translation Gaps — and How to Fix Them Tech Concept What Stakeholders Hear How to Reframe It API Integration “Something with code.” “We’re connecting systems so data moves automatically, saving the team manual work.” Network Redundancy “Extra equipment?” “Backup systems that keep operations ...
Read More

Create Light & Dark Theme Toggle Using HTML, CSS & JavaScript

Image
Dark mode is one of the most popular features in modern websites and apps. In this tutorial, you will learn how to build a simple Light & Dark Theme Toggle using just HTML, CSS, and JavaScript. This small project is perfect for beginners and helps you understand DOM manipulation and event handling. ⭐ GitHub Source Code You can download or view the full project on GitHub: 🔗 View on GitHub 🌗 What We Are Building This project contains a rounded switch. When you click the button: The background switches from light to dark The button slides smoothly The icon changes between ☀️ and 🌙 🧱 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>Light and Dark Theme</title> <link rel="stylesheet" href="style.css"> </hea...
Read More

Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

Image
In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript . This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques. 🎯 What You’ll Learn How to structure a calculator interface using HTML. How to style it beautifully using CSS Grid. How to make it functional using JavaScript. 🧱 Step 1: Create the HTML Structure Start by writing the basic layout for your calculator. Create a file named index.html and paste the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="co...
Read More

The Secret Formula to Grow as a Programmer

Image
Programming is not just a skill; it’s a journey. Whether you’re starting from scratch or have some experience under your belt, growing as a programmer is about more than just writing lines of code. It’s about mindset, discipline, and continuous learning. If you’ve ever wondered why some developers seem to progress faster than others, there’s a reason—it’s not just talent; it’s a formula. Today, we’ll break down the secret formula to grow as a programmer. 1. Embrace the Beginner’s Mindset Every expert programmer was once a beginner. Accept that you won’t know everything and that learning is a continuous process. When you approach coding with curiosity rather than fear, you’ll be more open to learning new languages, frameworks, and technologies. Don’t hesitate to ask questions, experiment, and even make mistakes—because mistakes are powerful learning tools. 2. Master the Fundamentals First Before diving into complex frameworks or libraries, ensure you have a strong grasp of the fun...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

What is PHP Used for in Web Development?

Image
PHP, or Hypertext Preprocessor , has been a staple in the world of web development for decades. Created by Rasmus Lerdorf in 1994, PHP has grown into one of the most widely used server-side scripting languages, powering dynamic websites and applications across the globe. If you're curious about PHP or new to web development, you’ve come to the right place. This guide will break down what PHP is, how it's used, and why it remains a crucial tool for developers in 2025. What Makes PHP Special? PHP is unique because it was specifically designed for web development. Unlike general-purpose programming languages like Python or Java, PHP is optimized for generating web content, making it ideal for building interactive and dynamic websites. Here’s why PHP continues to be a popular choice for developers: Open-Source: PHP is free to use, which makes it perfect for beginners and businesses with tight budgets. Easy to Learn: The syntax of PHP is straightforward, so it’s...
Read More

Different Types of Smartphone Display

Image
 In the market, there are a lot of smartphone displays. Some of them are:   1.TFT-LCD(Thin Film Transistor-Liquid Crystal Display): This type of display is used in a lot of smartphones. It gives you good image quality and higher resolutions than a normal LCD display.But, It has a poor viewing angle and poor image quality in direct sunlight or hard light.  2.IPS-LCD(In-Place Switching-Liquid Crystal Display): This is an improved version of the previous LCD displays with a better viewing angle, better image quality, and higher resolution. But, It is costly too.  3.OLED(Organic Light-Emitting Diode): This display works without a backlight because it emits visible lights. It can display deep black color images, higher resolution, and better image quality. These types of displays consume less power than LCDs. 4.AMOLED(Active Matrix Organic Light-Emitting Diode): Nowadays, AMOLED displays are used in a lot of flagships and mid-ranges phone. It is also better than the OLED ...
Read More