Digital_Clock.html

<!-- Ques.7: Create a digital clock using JavaScript which shows the current time. -->

<!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>Harsh Digital Clock</title>

    <style>
      @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap");

      body {
        background: black;
      }

      .clock {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color: #17d4fe;
        font-size: 75px;
        font-family: Orbitron;
        letter-spacing: 7px;
        border: 5px solid #17d4fe;
        border-radius: 6px;
        padding: 10px;
      }

      #d1{
        font-size: 55px;
        font-family: Orbitron;
        color: #17d4fe;
        margin-top: 12%;
        margin-left:38%
      }
    </style>
  </head>

  <body>
    <p id="d1"></p>
    <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
    <script>
      function showTime() {
        var date = new Date();
        var h = date.getHours(); // 0 - 23
        var m = date.getMinutes(); // 0 - 59
        var s = date.getSeconds(); // 0 - 59
        var session = "AM";

        if (h == 0) {
          h = 12;
        }

        if (h > 12) {
          h = h - 12;
          session = "PM";
        }

        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        var time = h + ":" + m + ":" + s + " " + session;
        var d = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();

        document.getElementById("MyClockDisplay").innerText = time;
        document.getElementById("MyClockDisplay").textContent = time;
        document.getElementById("d1").innerHTML= d;

        setTimeout(showTime, 1000);
      }

      showTime();
    </script>
  </body>
</html>