index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>NASA APOD</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }

      .photo {
        width: 100vw;
        height: 100vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="photo"></div>
    <script>
      const getPhoto = async (
        url = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY"
      ) => {
        const request = await fetch(url);
        const json = await request.json();

        if (request.status === 429) {
          throw new Error("Too many requests");
        }
        // Throw an error if the request limit on the demo API key is met

        if (json.media_type === "image") {
          document.querySelector(
            ".photo"
          ).style.backgroundImage = `url(${json.hdurl})`;
        } else {
          const date = new Date();
          date.setDate(date.getDate() - 1);
          // Yesterday's date to be formatted below

          let day = date.getDate();
          let month = date.getMonth() + 1;
          const year = date.getFullYear();

          if (day < 10) {
            day = "0" + day;
          }
          if (month < 10) {
            month = "0" + month;
          }
          // Add a 0 in front in case the month or date is less than 10

          const yesterday = `${year}-${month}-${day}`;
          // NASA's API requires that the date be formatted as yyyy-mm-dd

          getPhoto(
            `https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=${yesterday}`
          );
        }
        // If today's picture is not an image, get yesterday's date and request that picture
      };

      getPhoto();

      setInterval(() => {
        const utcHour = new Date().getUTCHours();
        // Get the current hour in UTC

        if (utcHour === 5) {
          getPhoto();
        }
        // 5am UTC is equal to midnight EST, when the photo is updated
      }, 1000 * 60 * 60);
      // Refresh every hour
    </script>
  </body>
</html>