Html Coding for Digital Clock

Here's a simple HTML, CSS, and JavaScript code snippet for adding a digital clock to your Blogger site.

Steps to Add the Digital Clock:

1. Open Blogger and go to the Layout section.
2. Click on Add a Gadget and select HTML/JavaScript.
3. Paste the following code and save it.

---

HTML, CSS & JavaScript Code for Digital Clock

Coding 1:

 <div id="clock-container">

  <div id="digital-clock"></div>

</div>

<style>

  #clock-container {

    text-align: center;

    font-size: 24px;

    font-family: Arial, sans-serif;

    font-weight: bold;

    background: black;

    color: lime;

    padding: 10px;

    border-radius: 10px;

    display: inline-block;

  }

</style>

<script>

  function updateClock() {

    var now = new Date();

    var hours = now.getHours();

    var minutes = now.getMinutes();

    var seconds = now.getSeconds();

    var amPm = hours >= 12 ? 'PM' : 'AM';

    hours = hours % 12 || 12; // Convert to 12-hour format

    minutes = minutes < 10 ? '0' + minutes : minutes;

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

    var timeString = hours + ":" + minutes + ":" + seconds + " " + amPm;

    document.getElementById('digital-clock').innerHTML = timeString;

  }

  setInterval(updateClock, 1000);

  updateClock();

</script>