Breaking News: Grepper is joining You.com. Read the official announcement!

digital clock

Mudassir Ameen answered on October 20, 2022 Popularity 10/10 Helpfulness 4/10

answer digital clock

digital clock

Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DIGITAL CLOCK BY MD</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>
  <body onload="updateClock(); setInterval(()=>{updateClock()}, 1000)">
    <div class="container">
      <h1 id="clock" style="display: inline"></h1>
      <p
        id="dayStatus"
        style="display: inline; font-size: 25px; color: blue"
      ></p>
      <p id="currentDay" style="color: blue"></p>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
    <script>
      let clock = document.getElementById("clock");
      let dayStatus = document.getElementById("dayStatus");
      let currentDay = document.getElementById("currentDay");

      function updateClock() {
        let currentTime = new Date();
        let currenthour = currentTime.getHours();
        let currentMinute = currentTime.getMinutes();
        let currentseconds = currentTime.getSeconds();
        let currentDaystatus;
        let currentMonth = currentTime.toLocaleString("en-us", { month: "long" });
        let days = [
          "Sunday",
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
        ];
        let currentDayName = days[currentTime.getDay()];

        currentDaystatus = currenthour < 12 ? "AM" : "PM";
        currenthour = currenthour > 12 ? currenthour - 12 : currenthour;
        currenthour = currenthour == 0 ? 12 : currenthour;
        currenthour = currenthour < 10 ? "0" + currenthour : currenthour;
        currentMinute = currentMinute < 10 ? "0" + currentMinute : currentMinute;
        currentseconds = currentseconds < 10 ? "0" + currentseconds : currentseconds;

        clock.innerHTML = currenthour + ":" + currentMinute + ":" + currentseconds;

        dayStatus.innerHTML = currentDaystatus;

        currentDay.innerHTML =
          currentDayName +
          ", " +
          currentMonth +
          " " +
          currentTime.getDate() +
          ", " +
          currentTime.getFullYear();
      }
    </script>
  </body>
</html>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: clock css digital html javascript

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Mudassir Ameen

0 Answers Avg Quality 2/10

digital clock

Contents

More Related Answers

digital clock

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.