noelleleigh/timerOverlay.html

## timerOverlay.html
<!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>Timer</title>
    <style>
      body {
        margin: 0;
        background-color: rgb(3, 99, 163);
        font-size: 48px;
        font-family: monospace;
        display: flex;
        justify-content: flex-end;
      }

      .container {
        color: white;
        background-color: black;
      }

      .container dl {
        margin: 0;
        padding: 0.3em;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
      }

      .timer-label-container,
      .timer-container {
        margin: 0px;
        text-align: right;
      }
      #timer-label {
        margin: 0;
      }
    </style>
  </head>

  <body>
    <aside class="container" aria-label="Timer">
      <dl>
        <dt class="timer-label-container"><p id="timer-label"></p></dt>
        <dd class="timer-container"><time id="timer"></time></dd>
      </dl>
    </aside>

    <script>
      // Content variables
      const countdownLabel = "Time until raid";
      const countupLabel = "Time in raid";
      const startTime = new Date("2022-03-05 13:00:00");

      // Constants for math
      const MS_IN_HOUR = 3_600_000;
      const MS_IN_MINUTE = 60_000;
      const MS_IN_SECOND = 1_000;

      /**
       * Return an object containing hours, minutes, and seconds from the
       * current datetime, as well as whether it's a countdown or not.
       * @param {Date} date
       */
      function durationFromNow(date) {
        const now = new Date();
        let countdown = now <= date;

        let distance = Math.abs(now - date);

        const hours = Math.floor(distance / MS_IN_HOUR);
        distance -= hours * MS_IN_HOUR;

        const minutes = Math.floor(distance / MS_IN_MINUTE);
        distance -= minutes * MS_IN_MINUTE;

        const seconds = Math.floor(distance / MS_IN_SECOND);

        return { countdown, hours, minutes, seconds };
      }

      function pad2(value) {
        return String(value).padStart(2, "0");
      }

      function iso8601Duration(duration) {
        return `P${duration.hours}H${duration.minutes}M${duration.seconds}S`;
      }

      function renderTimer() {
        const duration = durationFromNow(startTime);
        const [hours, minutes, seconds] = [
          duration.hours,
          duration.minutes,
          duration.seconds,
        ].map(pad2);
        const timerValue = `${hours}:${minutes}:${seconds}`;
        const timerLabel = document.getElementById("timer-label");
        timerLabel.textContent = duration.countdown
          ? countdownLabel
          : countupLabel;
        const timer = document.getElementById("timer");
        timer.setAttribute("datetime", iso8601Duration(duration));
        timer.textContent = timerValue;
      }
      renderTimer();
      setInterval(renderTimer, 1000);
    </script>
  </body>
</html>
	<!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>Timer</title>
	<style>
	body {
	margin: 0;
	background-color: rgb(3, 99, 163);
	font-size: 48px;
	font-family: monospace;
	display: flex;
	justify-content: flex-end;
	}

	.container {
	color: white;
	background-color: black;
	}

	.container dl {
	margin: 0;
	padding: 0.3em;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	}

	.timer-label-container,
	.timer-container {
	margin: 0px;
	text-align: right;
	}
	#timer-label {
	margin: 0;
	}
	</style>
	</head>

	<body>
	<aside class="container" aria-label="Timer">
	<dl>
	<dt class="timer-label-container"><p id="timer-label"></p></dt>
	<dd class="timer-container"><time id="timer"></time></dd>
	</dl>
	</aside>

	<script>
	// Content variables
	const countdownLabel = "Time until raid";
	const countupLabel = "Time in raid";
	const startTime = new Date("2022-03-05 13:00:00");

	// Constants for math
	const MS_IN_HOUR = 3_600_000;
	const MS_IN_MINUTE = 60_000;
	const MS_IN_SECOND = 1_000;

	/**
	* Return an object containing hours, minutes, and seconds from the
	* current datetime, as well as whether it's a countdown or not.
	* @param {Date} date
	*/
	function durationFromNow(date) {
	const now = new Date();
	let countdown = now <= date;

	let distance = Math.abs(now - date);

	const hours = Math.floor(distance / MS_IN_HOUR);
	distance -= hours * MS_IN_HOUR;

	const minutes = Math.floor(distance / MS_IN_MINUTE);
	distance -= minutes * MS_IN_MINUTE;

	const seconds = Math.floor(distance / MS_IN_SECOND);

	return { countdown, hours, minutes, seconds };
	}

	function pad2(value) {
	return String(value).padStart(2, "0");
	}

	function iso8601Duration(duration) {
	return `P${duration.hours}H${duration.minutes}M${duration.seconds}S`;
	}

	function renderTimer() {
	const duration = durationFromNow(startTime);
	const [hours, minutes, seconds] = [
	duration.hours,
	duration.minutes,
	duration.seconds,
	].map(pad2);
	const timerValue = `${hours}:${minutes}:${seconds}`;
	const timerLabel = document.getElementById("timer-label");
	timerLabel.textContent = duration.countdown
	? countdownLabel
	: countupLabel;
	const timer = document.getElementById("timer");
	timer.setAttribute("datetime", iso8601Duration(duration));
	timer.textContent = timerValue;
	}
	renderTimer();
	setInterval(renderTimer, 1000);
	</script>
	</body>
	</html>