Wed Jul 10 2024

Create a Digital Clock from Scratch

File Name: digital-clock-in-js.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Digital Clock</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        font-family: "Montserrat", sans-serif;
      }

      body {
        background: radial-gradient(
          ellipse at center,
          #565656 0%,
          #212121 100%
        );
      }

      section {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      section #timer {
        font-size: 60px;
        color: #fff;
        font-weight: 700;
        display: flex;
        gap: 5px;
      }

      section #timer span {
        width: 80px;
        text-align: center;
      }

      section #date {
        font-size: 20px;
        color: #b9b9b9;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <section>
      <div id="timer"></div>
      <div id="date"></div>
    </section>
    <script>
      const week = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
      const month = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ];

      const showTime = () => {
        const now = new Date();

        const extraH = now.getHours() < 10 ? "0" : "";
        const extraM = now.getMinutes() < 10 ? "0" : "";
        const extraS = now.getSeconds() < 10 ? "0" : "";

        const hour = `<span>${extraH}${now.getHours()}</span>`;
        const minute = `<span>${extraM}${now.getMinutes()}</span>`;
        const second = `<span>${extraS}${now.getSeconds()}</span>`;

        document.getElementById(
          "timer"
        ).innerHTML = `${hour}:${minute}:${second}`;
        document.getElementById("date").innerText = `${week[now.getDay()]}, ${
          month[now.getMonth()]
        } ${now.getDate()} ${now.getFullYear()}`;
      };

      showTime();

      setInterval(showTime, 1000);
    </script>
  </body>
</html>

Author:Geekboots