Archived NASA APOD

Using NASA APOD API to get archived APOD media.

by liderrick

HTML

<h2>Archived NASA Astronomy Picture of the Day (APOD)</h2>

<label for="date" id="dateLabel">Date: </label>
<input type="date" id="date" name="date">

<label for="resolution" id="resolutionLabel">Photo Resolution: </label>
<input type="radio" name="resolution" id="hdRadio" value="hd" checked>
<label for="hd" id="hdLabel">HD (if available)</label>

<input type="radio" name="resolution" id="stdRadio" value="std">
<label for="std" id="stdLabel">Standard</label>

<input type="submit" id="submitDate">

<figure id="dateAPOD">

  <div id="datePhotoDiv"></div>

  <figcaption id="dateCaption1"></figcaption>
  <figcaption id="dateCaption2"></figcaption>
  <figcaption id="dateCaption3"></figcaption>
  <figcaption id="dateCaption4"></figcaption>
</figure>

CSS

img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  align-content: center;
}

figure {
  padding: 10px;
  text-align: center;
}

figcaption {
  text-align: left;
}

.title {
  font-style: bold;
}

#todayAPOD {
  border: solid lightgrey;
}

iframe {
  width: 960px;
  height: 540px;
  border: 0;
}

#resolutionLabel {
  margin-left: 30px;
}

#stdRadio {
  margin-left: 15px;
}

#submitDate {
  margin-left: 50px;
}

JavaScript

var apiKey = "Q04R5uu3AmDLtMki1TxSp3QhLzIAbSH2qnmf7rT7";

function archivedAPODSetup() {

  /* Binds the Date submit button */
  document.getElementById("submitDate").addEventListener("click", function(event) {

    /* Prevents page from refreshing after clicking submit */
    event.preventDefault();

    /* Clears text content of captions */
    document.getElementById("dateCaption1").textContent = "";
    document.getElementById("dateCaption2").textContent = "";
    document.getElementById("dateCaption3").textContent = "";
    document.getElementById("dateCaption4").textContent = "";

    /* Clears img or iframe from datePhotoDiv */
    var datePhotoDivNode = document.getElementById("datePhotoDiv");
    while (datePhotoDivNode.hasChildNodes() == true) {
      datePhotoDivNode.removeChild(datePhotoDivNode.lastChild);
    }

    var inputDate = document.getElementById("date").value;
    var inputDateObj = new Date(inputDate);
    var currentDateObj = new Date();

    /* Informs user to select a date if no date is selected or a date in future is selected */
    if (inputDate == "" || inputDateObj > currentDateObj) {
      document.getElementById("dateAPOD").style.border = "solid lightgrey";
      document.getElementById("dateCaption1").textContent = "Please select a valid date.";
      return;
    }

    var req = new XMLHttpRequest();

    req.open("GET", "https://api.nasa.gov/planetary/apod?date=" + inputDate + "&api_key=" + apiKey, true);

    req.addEventListener("load", function() {
      if (req.status >= 200 && req.status < 400) {
        var response = JSON.parse(req.responseText);

        if (response.media_type == "image") {
          var img = document.createElement("img");
          img.id = "datePhoto";
          document.getElementById("datePhotoDiv").appendChild(img);

          if (response.hasOwnProperty("hdurl")) {
            if (document.getElementById("hdRadio").checked == true) {
              document.getElementById("datePhoto").src =...