clock.html

<!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>JS - Digital Clock</title>
  <style>
    body{
      background-color: black;
      color: turquoise;
      text-align: center;
      font-size: xx-large;
    }
    .clock{
      background-color: black;
      color: white;
      font-size: 100px;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      padding-bottom: 90px;
    }
    button{
      color: black;       
      font-family: cursive;
      cursor: pointer;
      font-size: xx-large;
      background-color: cadetblue;
    }
  </style>

</head>
<body>
<h1>Digital Clock</h1>
  <div id="MyClockDisplay" class="clock">
  </div>


 



    <script type="text/javascript">
    function showTime(){
      var date = new Date();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();
      var session = "AM";

      if(h == 0){
        h = 12;        
      }

      if(h > 12){
        h = h - 12;
        session = "PM"
      }

      if(h < 10){
        h = "0" +h;
      }

      if(m < 10){
        m = "0" + m;
      }

      if(s < 10){
        s = "0" + s;
      }

      var time = h + ":" + m + ":" + s + "" +  session;
      document.getElementById("MyClockDisplay").innerText = time;
      document.getElementById("MyClockDisplay").textContent = time;
      setTimeout(showTime, 1000);

    }

    showTime();
    

    </script>
  
  
</body>
</html>