<!DOCTYPE html>
<html lang="en">
<head> 
  <title>Digital Clock</title>     

      <style>
      .digital-clock {
               width: 330px;
               background: darkgreen;
               border-radius: 10px;
               font-family: Arial;
               font-size: 48px;
               font-weight: bold;
               color: white;
               text-align: center;
               letter-spacing: 3px;
               padding: 10px; 
}
      </style>

</head>
   <body>

<div  align="center">
      <div class="digital-clock"></div>
</div>

<script>
           setInterval (()=>{
                const time = document.querySelector(".digital-clock");
                let date = new Date();
                let hours =date.getHours();
                let minutes = date.getMinutes();
                let seconds = date.getSeconds();
                let AM_PM = "AM";

                if (hours > 11) {
                     AM_PM = "PM";
                     hours = hours - 12;
}
                if (hours == 0) {
                     hours = 12;
}
                if (seconds < 10) {
                    seconds = "0" + seconds;
}
                if (minutes < 10) {
                    minutes = "0" + minutes;
}
                if (hours < 10) {
                    hours = "0" + hours;
}
                time.textContent = hours + ":" + minutes + ":" + seconds + " " + AM_PM;
});
</script>

   </body>
</html>
Comforting Tools

Pages

Popular Posts

Creating Digital Clock

Contact Form
