GeorgeHernandez/now.html

## now.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Now</title>
    <!--
      README
      Display the date and time info
      Via: https://gist.github.com/GeorgeHernandez/9190e4d046d3440882b02ae766265d51
      Usage: Save this file as a local copy, then open in a browser.
    -->
    <style>
      body {
        background-color: black;
        color: gray;
      }
      h1 {
        font-family: Roboto Mono, courier, monospace;
      }
    </style>
  </head>
  <body>
    <h1 id="now"></h1>
    <script>
      const showNow = () => {
        const now = new Date();

        // Get the date and time in different formats
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const dayOfWeek = now.getDay();
        const daysInMonth = new Date(year, month, 0).getDate();
        const isLeapYear =
          (year % 4 === 0 && !(year % 100 === 0)) || year % 400 === 0;
        const daysInYear = isLeapYear ? 366 : 365;
        const dayOfYear = Math.floor(
          (now.getTime() - new Date(now.getFullYear(), 0, 1, 0, 0, 0)) /
            (1000 * 60 * 60 * 24)
        );
        const hour = now.getHours();
        const minute = now.getMinutes();
        const second = now.getSeconds();
        const timezoneOffset = -now.getTimezoneOffset();

        // Alas English month names need 3 character to be distinct:
        const months = [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ];
        const monthName = months[month - 1];
        // English day names only need 2 character to be distinct, but alas 3 is expecte:
        const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
        const dayOfWeekName = days[dayOfWeek];
        const hourAmpm = hour > 12 ? hour - 12 : hour;
        const ampm = hour >= 12 ? "PM" : "AM";
        const localTimezone = new Intl.DateTimeFormat().resolvedOptions()
          .timeZone;

        // Pad some values
        const monthPadded = pad(month, 2);
        const dayPadded = pad(day, 2);
        const daysInMonthPadded = pad(daysInMonth);
        const dayOfYearPadded = pad(dayOfYear, 3);
        const hourPadded = pad(hour, 2);
        const hourAmpmPadded = pad(hourAmpm, 2);
        const minutePadded = pad(minute, 2);
        const secondPadded = pad(second, 2);
        const timezoneOffsetPadded = getTimezoneOffsetPadded(timezoneOffset);

        function pad(number, targetLength, padCharacter = "0") {
          const paddedNumber = String(number);
          const paddingLength = targetLength - paddedNumber.length;
          const padding = padCharacter.repeat(paddingLength);

          return padding + paddedNumber;
        }
        function getTimezoneOffsetPadded(timezoneOffset) {
          // Get the absolute value of the timezone offset.
          const absOffset = Math.abs(timezoneOffset);

          // Pad the minutes to two digits.
          const paddedMinutes = pad(absOffset % 60, 2);

          // Convert the timezone offset to a string.
          const timezoneOffsetString =
            (timezoneOffset >= 0 ? "+" : "-") +
            pad(Math.floor(absOffset / 60), 2) +
            ":" +
            paddedMinutes;

          return timezoneOffsetString;
        }

        // Display the date and time
        const lines = [];
        lines.push(`${year}-${monthPadded}-${dayPadded} ${dayOfWeekName}`);
        lines.push(
          `${dayOfYearPadded}/${daysInYear} ${daysInMonthPadded} ${monthName}`
        );
        lines.push(
          `${hourPadded}:${minutePadded}:${secondPadded}${timezoneOffsetPadded}`
        );
        lines.push(`${hourAmpmPadded}:${minutePadded} ${ampm}`);
        lines.push(`${localTimezone}`);
        // lines.push(`➕🌱⏳🌳🙏🈚💮⏭️🎬🕉️Ω`);
        // lines.push(`➕🤔🥰🤗😎🏡`);
        // lines.push(`➖😵‍💫👿🤑😨🌐`);
        document.getElementById("now").innerHTML = lines.join("<br>");
      };
      // Set the interval in ms to refresh the time
      setInterval(showNow, 1000);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Now</title>
	<!--
	README
	Display the date and time info
	Via: https://gist.github.com/GeorgeHernandez/9190e4d046d3440882b02ae766265d51
	Usage: Save this file as a local copy, then open in a browser.
	-->
	<style>
	body {
	background-color: black;
	color: gray;
	}
	h1 {
	font-family: Roboto Mono, courier, monospace;
	}
	</style>
	</head>
	<body>
	<h1 id="now"></h1>
	<script>
	const showNow = () => {
	const now = new Date();

	// Get the date and time in different formats
	const year = now.getFullYear();
	const month = now.getMonth() + 1;
	const day = now.getDate();
	const dayOfWeek = now.getDay();
	const daysInMonth = new Date(year, month, 0).getDate();
	const isLeapYear =
	(year % 4 === 0 && !(year % 100 === 0)) \|\| year % 400 === 0;
	const daysInYear = isLeapYear ? 366 : 365;
	const dayOfYear = Math.floor(
	(now.getTime() - new Date(now.getFullYear(), 0, 1, 0, 0, 0)) /
	(1000 * 60 * 60 * 24)
	);
	const hour = now.getHours();
	const minute = now.getMinutes();
	const second = now.getSeconds();
	const timezoneOffset = -now.getTimezoneOffset();

	// Alas English month names need 3 character to be distinct:
	const months = [
	"Jan",
	"Feb",
	"Mar",
	"Apr",
	"May",
	"Jun",
	"Jul",
	"Aug",
	"Sep",
	"Oct",
	"Nov",
	"Dec",
	];
	const monthName = months[month - 1];
	// English day names only need 2 character to be distinct, but alas 3 is expecte:
	const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
	const dayOfWeekName = days[dayOfWeek];
	const hourAmpm = hour > 12 ? hour - 12 : hour;
	const ampm = hour >= 12 ? "PM" : "AM";
	const localTimezone = new Intl.DateTimeFormat().resolvedOptions()
	.timeZone;

	// Pad some values
	const monthPadded = pad(month, 2);
	const dayPadded = pad(day, 2);
	const daysInMonthPadded = pad(daysInMonth);
	const dayOfYearPadded = pad(dayOfYear, 3);
	const hourPadded = pad(hour, 2);
	const hourAmpmPadded = pad(hourAmpm, 2);
	const minutePadded = pad(minute, 2);
	const secondPadded = pad(second, 2);
	const timezoneOffsetPadded = getTimezoneOffsetPadded(timezoneOffset);

	function pad(number, targetLength, padCharacter = "0") {
	const paddedNumber = String(number);
	const paddingLength = targetLength - paddedNumber.length;
	const padding = padCharacter.repeat(paddingLength);

	return padding + paddedNumber;
	}
	function getTimezoneOffsetPadded(timezoneOffset) {
	// Get the absolute value of the timezone offset.
	const absOffset = Math.abs(timezoneOffset);

	// Pad the minutes to two digits.
	const paddedMinutes = pad(absOffset % 60, 2);

	// Convert the timezone offset to a string.
	const timezoneOffsetString =
	(timezoneOffset >= 0 ? "+" : "-") +
	pad(Math.floor(absOffset / 60), 2) +
	":" +
	paddedMinutes;

	return timezoneOffsetString;
	}

	// Display the date and time
	const lines = [];
	lines.push(`${year}-${monthPadded}-${dayPadded} ${dayOfWeekName}`);
	lines.push(
	`${dayOfYearPadded}/${daysInYear} ${daysInMonthPadded} ${monthName}`
	);
	lines.push(
	`${hourPadded}:${minutePadded}:${secondPadded}${timezoneOffsetPadded}`
	);
	lines.push(`${hourAmpmPadded}:${minutePadded} ${ampm}`);
	lines.push(`${localTimezone}`);
	// lines.push(`➕🌱⏳🌳🙏🈚💮⏭️🎬🕉️Ω`);
	// lines.push(`➕🤔🥰🤗😎🏡`);
	// lines.push(`➖😵‍💫👿🤑😨🌐`);
	document.getElementById("now").innerHTML = lines.join("<br>");
	};
	// Set the interval in ms to refresh the time
	setInterval(showNow, 1000);
	</script>
	</body>
	</html>