Create a Live Digital Clock Using JavaScript (Beginner Guide)

🕒 Build a Digital Clock That Updates Every Second Using JavaScript

A digital clock is a great beginner JavaScript project to understand time, DOM manipulation, and real-time updates. In this tutorial, you’ll learn how to create a simple yet powerful digital clock that updates every second using HTML, CSS, and JavaScript.

✅ What You’ll Learn:

How to get the current time using JavaScript
How to display time on a webpage using HTML
How to style it with CSS
How to update the time every second using setInterval()

🛠️ Step-by-Step Guide to Build a Digital Clock

🧩 Step 1: Set Up Your HTML File

This is the structure where our clock will appear.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Digital Clock</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="clock-container">
    <h1 id="clock">00:00:00</h1>
  </div>

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

🔍 Explanation:

<!DOCTYPE html>: Declares this as an HTML5 document.
<div class="clock-container">: A container to hold our clock.
<h1 id="clock">: We’ll update this element with JavaScript to show the time.
<script src="script.js">: Loads our JavaScript code.

🎨 Step 2: Add Some CSS to Make It Look Good

Create a file named style.css in the same folder and add this:

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

.clock-container {
  text-align: center;
}

#clock {
  font-size: 5rem;
  letter-spacing: 5px;
}

🔍 Explanation:

We center the clock both vertically and horizontally using Flexbox.
The clock text is styled to be large and easily readable.

💻 Step 3: Write JavaScript to Display and Update the Time

Create a file called script.js and add the following code:

function updateClock() {
  const now = new Date(); // Get current date and time

  let hours = now.getHours();    // Get hours
  let minutes = now.getMinutes(); // Get minutes
  let seconds = now.getSeconds(); // Get seconds

  // Add leading zero if needed (e.g., 09 instead of 9)
  hours = String(hours).padStart(2, '0');
  minutes = String(minutes).padStart(2, '0');
  seconds = String(seconds).padStart(2, '0');

  const currentTime = `${hours}:${minutes}:${seconds}`;

  // Display the time in the h1 element with id="clock"
  document.getElementById('clock').textContent = currentTime;
}

// Call the function once immediately
updateClock();

// Update the clock every 1000 milliseconds (1 second)
setInterval(updateClock, 1000);

🔍 Explanation:

new Date(): Gives us the current date and time.
getHours(), getMinutes(), getSeconds(): Extract time components.
padStart(2, '0'): Ensures the numbers are two digits.
document.getElementById('clock'): Selects the HTML element to display time.
setInterval(updateClock, 1000): Repeats updateClock() every second.

🎯 Final Output

When you open your HTML file in a browser, you’ll see a live digital clock that updates every second automatically — just like a real one!

Create a Live Digital Clock Using JavaScript (Beginner Guide)

Follow us on

🕒 Build a Digital Clock That Updates Every Second Using JavaScript

✅ What You’ll Learn:

🛠️ Step-by-Step Guide to Build a Digital Clock

🧩 Step 1: Set Up Your HTML File

🔍 Explanation:

🎨 Step 2: Add Some CSS to Make It Look Good

🔍 Explanation:

💻 Step 3: Write JavaScript to Display and Update the Time

🔍 Explanation:

🎯 Final Output

📦 Complete File Structure:

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us