The Palos Publishing Company

Categories We Write About

Build a real-time clock display

Written by

Bernardo Palos

in

Here’s a simple HTML, CSS, and JavaScript implementation of a real-time clock display. You can run this code in any modern browser.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-Time Clock</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #121212;
      font-family: Arial, sans-serif;
      color: #ffffff;
      margin: 0;
    }

    .clock {
      font-size: 4rem;
      background: #1e1e1e;
      padding: 30px 50px;
      border-radius: 15px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }
  </style>
</head>
<body>
  <div class="clock" id="clock">00:00:00</div>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const timeString = `${hours}:${minutes}:${seconds}`;
      document.getElementById('clock').textContent = timeString;
    }

    setInterval(updateClock, 1000);
    updateClock(); // initial call to avoid 1-second delay
  </script>
</body>
</html>

Features:

  • Real-time update every second using setInterval.

  • Styled using dark theme with a glowing box-shadow.

  • Uses padStart to maintain two-digit formatting.

You can embed this directly into any webpage or develop it further into a widget.

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

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

Check Out Our Newest Posts we wrote about

Categories We Write About