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

Computer Hardware and Software

Image
Table of Contents 1. Computer Hardware 1.1 Computer Hardware Types 1.1.1 Input Devices 1.1.2 Processing Devices 1.1.3 Output Devices 1.1.4 Memory and Storage Devices 2. Computer Software 2.1 Types of Computer Software 1. Computer Hardware 1.1 Computer Hardware Types Computer hardware refers to the physical components that make up a computer system. These components are essential for the system to function and interact with software. 1.1.1 Input Devices Input devices allow users to provide data and commands to the computer. Some common input devices include: Keyboard: Used for typing text and commands. Mouse: A pointing device used to interact with...
Read More

How to Block a Website? A Simple Guide for All Devices

Image
Ever feel like you're spending way too much time on social media? Or maybe you want to make sure certain websites are off-limits for your kids? Whatever your reason, blocking a website is actually pretty easy. In this guide, I'll walk you through different ways to block a website on any device—whether you're on Windows, Mac, Android, or iPhone. Method 1: Block Websites Using the Hosts File (Windows and macOS) If you want a super effective way to block websites on your computer, tweaking the hosts file is the way to go. This method works system-wide, so once a site is blocked, no one using that computer can access it. Steps for Windows: Open Notepad as Administrator. Click File > Open and head over to C:\Windows\System32\drivers\etc\ . Change the file type to All Files and open hosts . Scroll to the bottom and add this: 127.0.0.1 facebook.com 127.0.0.1 www.facebook.com ...
Read More

How Do Browsers Make Money If They Are Free To Use?

Image
Have you ever wonder how the Internet browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge, etc make money. Does this browser even make money, or are they free to use? None of us pay money to browse the Internet through these browsers, right. Even you are reading this on the web browser for free. If everything is free, then how do Internet browsers make money? Do Popular Web Browsers Even Make Money? Yes, they make lots of money through the browser. If you think the browser is free, you are wrong. Always remember, If you are not paying for the product, you are the product. All the popular web browsers make money in different ways. But How? Let's start with the most popular web browser Google Chrome. How Google Chrome Earn Money? If you use Google Chrome, then you will see that the default search engine is Google. On the search result page of Google, you will see ads. By showing the ads, Google Chrome generates money. And If you visit any website on Google Ch...
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

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

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log ...
Read More

Is TypeScript Frontend or Backend?

Image
If you’ve been diving into web development, you’ve probably come across TypeScript. And if you’re wondering, “Is TypeScript for the frontend or backend?” , you’re not alone! It’s a common question, especially for beginners. Let’s break it down in a simple and friendly way. First, What is TypeScript? TypeScript is basically JavaScript with superpowers. It’s developed by Microsoft and adds static typing to JavaScript, meaning you can catch errors before even running the code. TypeScript for the Frontend Yes, TypeScript is widely used for frontend development! Frameworks and libraries like React, Angular, and Vue support TypeScript, making it a favorite choice for building interactive web applications. Why use TypeScript in the frontend? Better Code Quality: It helps catch bugs early. Improved Autocomplete & IntelliSense: You get better support in VS Code and other editors. Scalability: When your app grows, TypeS...
Read More

2 Free Alternative of MS-Office

Image
 As you already MS-Office is not free software. You have to purchase the MS-Office package to use MS-Word, MS-Excel, and MS-PowerPoint. So for that, I have searched and found the two alternatives to MS-Office, and they are totally free. They are: FreeOffice It is totally free Office software. You can download and install it for free. You will get Text Maker, PlanMaker, and Presentation as an alternative to MS-Word, MS-Excel, and MS-PowerPoint.    ( Click Here, To Download FreeOffice ) Google Docs Google Docs is really the best Office Software. You can create a document, excel sheet, and presentation using Google Docs. It is totally free. You need to go to the site for creating your documents, presentation, and spreadsheet files. ( Click Here, To Go To Google Docs ) I Hope This Was Helpful. Don't Forget To Give Us Your Feedback:)
Read More

The Impact of Artificial Intelligence (AI) on Web Development

Image
Artificial intelligence (AI) is revolutionizing numerous industries, and web development is no exception. AI has the potential to transform web development in numerous ways, from improving the user experience to automating tedious development tasks. In this blog post, we will explore the impact of AI on web development and how it is changing the way developers build websites and web applications. 1. Personalization Personalization is a key aspect of user experience, and AI can help web developers create personalized experiences for their users. By using machine learning algorithms, web developers can analyze user data and behavior to create personalized content, recommend products or services, and tailor the user experience to each individual user. 2. Chatbots Chatbots are becoming increasingly popular in customer service, and they can be used to improve the user experience on websites and web applications. AI-powered chatbots can interact with users in a conversational manner, answeri...
Read More