<article>

  <div class="side">
    <p id="cal">
      <span class="month">Jan</span>
      <span class="day">1</span>
    </p>
    <h1 id="YCTH-1" class="YCTH Your-Current-Time-Here A-Time"></h1>
  </div>

</article>

<!-- <footer>
Copyright&copy: 2021 by NCR with The SunShining
</footer>
-->

body {
  text-align: center;
  background-color: #ffffff;
  color: #222222;

  font-family: "Offside", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.side {
  border-radius: 20px;
  border: 3px solid;
  border-color: #222222;

  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.YCTH {
  font-size: 15vw;
}

#cal {
  position: absolute;
  top: 0px;
  font-size: 20px;
}

// Time

$(document).ready(function () {
  YourtimeOne();
});

function YourtimeOne() {
  var dt = new Date();
  document.getElementById("YCTH-1").innerHTML = dt.toLocaleTimeString();
  window.setTimeout("YourtimeOne()", 1000); // Here 1000(milliseconds) means one 1 Sec
}

// Date

$(document).ready(function () {
  // Create a new Date object to get the current date
  const currentDate = new Date();

  // Get the current month (zero-based index, so we add 1)
  const currentMonth = currentDate.toLocaleString("default", { month: "long" });

  // Get the current day of the month
  const currentDay = currentDate.getDate();

  // Update the HTML elements with the current month and day
  document.querySelector(".month").textContent = currentMonth;
  document.querySelector(".day").textContent = currentDay;
});

// Color

$(document).ready(function () {
  let isDarkMode = false; // Initialize the flag

  $(".side").click(function () {
    // Toggle background color, text color, and border color
    if (isDarkMode) {
      $("body").css({
        "background-color": "#ffffff",
        color: "#222222"
      });
      $(".side").css("border-color", "#222222");
    } else {
      $("body").css({
        "background-color": "#222222",
        color: "#ffffff"
      });
      $(".side").css("border-color", "#ffffff");
    }

    // Update the flag
    isDarkMode = !isDarkMode;
  });
});