The Majora's Mask screen that appears whenever you start a new day

mmclock.css

html {
  font-family: "Arial Narrow", sans-serif
}

div {
  font-size: 200%;
  padding: 50px;
  background-color: black;
  color: white;
  height: 1000px;
  line-height: 60%;
}

mmclock.html

<div align="center" id="page">
  <h2>
    <span id="time-of-day">Dawn</span> of
  </h2>
  <h1 id="number-header">
    The <span id="number">nth</span> Day
    </h1>
    <h3 id="time-header">
      -<span id="time">24</span> Hours Remain-
    </h3>
</div>

mmclock.js

let totalDays = 3;
let currentDay = 0.0;

function getHours(current) {
  return (totalDays - current) * 24
}

function getOrdinal(num) {
  let finalDigit = num % 10;
  switch (finalDigit) {
    case 1:
      return num + "st";
    case 2:
      return num + "nd";
    case 3:
      return num + "rd";
    default:
      return num + "th";
  }
}

function setTime(days) {
  let day = document.getElementById("number");
  let hours = document.getElementById("time");
  let dayNight = document.getElementById("time-of-day");
  let wholeDays = Math.floor(days);

  dayNight.innerHTML = days % 1 == 0 ? "Dawn" : "Night";
  day.innerHTML = wholeDays + 1 == totalDays ? "Final" : getOrdinal(wholeDays + 1);
  hours.innerHTML = getHours(days);
  
  if (wholeDays + 1 > totalDays) {
    let dayHeader = document.getElementById("number-header");
    let hourHeader = document.getElementById("time-header");
    let page = document.getElementById("page");
    
    dayHeader.innerHTML = "A New Day";
    hourHeader.innerHTML = "";
    page.style.backgroundColor = "white";
    page.style.color = "black";
  }
}

setTime(currentDay);

document.getElementById("page").onclick = function() {
  if (currentDay < totalDays) {
    currentDay = currentDay + 0.5;
  }
  setTime(currentDay);
}