Digital Clock Using HTML CSS and JavaScript

How to Create a Digital Clock Using JavaScript Complete Source Code

by

Hi, guys I am back with another fantastic project in this project I created a Digital Clock Using HTML, CSS & JavaScript.

I provide my readers and followers with the complete source code for this project without any cost or subscription requirements. The code files are available for free download and use.

Digital Clock

A digital clock is a timekeeping display that presents the current time in a numerical or digital format, as opposed to an analog clock with hands. Here’s a more detailed explanation:

1. Digital Format: The time is represented using digits to display hours, minutes, and seconds. For example, “12:30:45” would indicate 12 hours, 30 minutes, and 45 seconds.

2. JavaScript Functionality: In web development, a digital clock can be created using JavaScript to dynamically update the displayed time without requiring a page refresh. JavaScript interacts with the Document Object Model (DOM) to manipulate the content of a web page.

3. HTML Structure: The HTML portion of the code sets up the basic structure of the web page. It often includes an element (like a <div>) where the time will be displayed.

4. CSS Styling: CSS is used for styling the digital clock, setting the font size, color, and overall appearance. It helps make the clock visually appealing and consistent with the design of the web page.

5. Real-Time Updates: JavaScript includes a function that fetches the current time from the user’s device. This function is executed at regular intervals (using setInterval), ensuring that the displayed time is continuously updated.

6. User Interaction (Optional): Depending on the project’s requirements, user interaction features can be added. For example, a user might be able to switch between 12-hour and 24-hour formats, or there could be additional functionalities such as time zone conversion.

Creating a digital clock is often one of the initial projects for beginners in web development as it combines HTML for structure, CSS for styling, and JavaScript for dynamic functionality. It serves as a practical exercise for understanding the basics of manipulating web page elements and handling real-time data updates.

About This Project

The Code Hunter team developed this project to assist students in learning coding and programming. If you’re interested in joining our team, please follow us on Instagram.

Created byAhmed Developer
Languages HTML, CSS & JS
Source CodeAvailable Below
PreviewTake Preview
GitHub LinkCode Link

How to Create a Digital Clock Using HTML, CSS, and JS

There are some steps to create this type of Digital Clock Using HTML, CSS, and JavaScript which are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three (3) files for HTML, CSS, and JavaScript.
  3. Make sure the HTML file extension is (.html), and the CSS file extension is (.css).
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. The last step is copying and pasting the given code into your files.

Video Tutorial

If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by Code Traversal.

Digital Clock Using HTML, CSS, and JavaScript – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="container">
        <div class="date"></div>
        <div class="clock">
            <div class="time"></div>
        </div>
    </div>

    <div class="attribute">
        Create by 
        <a href="https://www.linkedin.com/in/ahmed-raza-developer/">
            Ahmed Developer
        </a >
    </div>

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

CSS FILE

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root{
    --clr-primary: rgba(0,213,255,1);
    --clr-container-bg: #fff;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-primary);
    font-family: 'poppins';
    position: relative;
}
.container{
    height: 200px;
    width: 350px;
    background-color: #092646;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.clock{
    color: var(--clr-primary);
    font-family: "Arial", sans-serif;
    font-size: 48px;
    letter-spacing: 2px;
}
  
.date{
    color: #fff;
    font-family: "Arial", sans-serif;
    font-size: 24px;
    letter-spacing: 2px;
}

.attribute{
    position: absolute;
    bottom: 10px;
}

@media (max-width:768px) {
    .container{
        width: 300px;
    }
}

JavaScript FILE

// update date 
function updateDate() {
    const now = new Date();
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    const dateString = now.toLocaleDateString(undefined, options);
    document.querySelector('.date').textContent = dateString;
}

// update time 
function updateTime() {
    const now = new Date();
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
  
    const timeString = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(seconds)}`;
    document.querySelector('.time').textContent = timeString;
  }
  
  function formatTime(time) {
    return time < 10 ? `0${time}` : time;
}

// callback functions 
updateDate();
setInterval(updateTime, 1000);

You Might Like This:

  1. JavaScript Length Converter For Beginners With Complete Source Code
  2. How to Create a Beautiful Product Card Using HTML and CSS Only
  3. How To Create a Profile Card Using HTML and CSS – Complete Source Code

Final Words

This blog has guided readers through the process of crafting a dynamic and interactive digital clock using JavaScript. By providing a complete source code, it empowers both beginners and enthusiasts to delve into the fundamentals of web development.

The project seamlessly integrates HTML for structure, CSS for styling, and JavaScript for real-time functionality, making it an ideal starting point for those eager to grasp the essentials of creating engaging and responsive web applications.

Emphasizing simplicity and practicality, the tutorial fosters a hands-on learning experience, encouraging users to explore and customize the digital clock while gaining valuable insights into the world of JavaScript-based web development. Happy coding!

Leave a Comment