<div id="wrapper">
    <div id="spaceTitle"></div>
    <div id="centerImage">
      <div id="spaceDate"></div>
      <div id="spaceCopyright"></div>
    </div>
      <div id="mediaContent">

       <img id="mediaContentTwo">
    </div>
    <div id="spaceBody"></div>
  </div>
@import url('https://fonts.googleapis.com/css?family=Expletus+Sans');
body {
  color: white;
  background-color: black;
}

img {
  width: auto;
  height: auto;
  max-height: 50%;
  max-width: 70%;
}

#wrapper {
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}

#mediaContentVideo {
  text-align: center;
}

#mediaContentImage {
  text-align: center;
  max-width: 50%;
}

#spaceTitle {
  text-align: center;
  font-size: 40px;
  font-family: 'Expletus Sans', 'Times New Roman';
  text-shadow: 1px 1px 1px red;
  border-bottom: 1px solid aliceblue;
  max-width: 80%;
  margin: 0 auto;
}

#spaceBody {
  margin: 0 auto;
  max-width: 80%;
  padding-top: 2%;
  text-align: justify;
}

#spaceDate {
  float: left;
  margin: 0 auto;
  width: 15%;
  text-align: center;
  font-size: 22px;
  font-family: 'Expletus Sans', 'Times New Roman';
  text-shadow: 1px 1px 1px red;
}

#spaceCopyright {
  margin: 0 auto;
  float: right;
  width: 15%;
  text-align: center;
  font-size: 22px;
  font-family: 'Expletus Sans', 'Times New Roman';
  text-shadow: 1px 1px 1px red;
}

#centerImage {
  text-align: center;
/* display: inline-block;*/
  margin-top: 1%;
}

.infoLabel {
  border-bottom: 1px solid aliceblue;
  text-shadow: 1px 1px 1px aliceblue;
}

@media screen and (max-width: 600px) {
  #spaceTitle {
    font-size: 18px;
  }
  #spaceDate {
    font-size: 14px;
  }
  #spaceCopyright {
    font-size: 14px;
  }
  #spaceBody {
    font-size: 12px;
  }
  #centerImage {
    text-align: center;
  }
}
//Please note, if copying make sure to insert your own API-key after "api_key=", you may get one at https://api.nasa.gov/#apply-for-an-api-key

let nasa = (function () {
  let nasa = null;
  $.ajax({
    async: false,
    global: false,
    url: "https://api.nasa.gov/planetary/apod?api_key=WJvasr9SXaUJcquJxFlEL0zwNx7RJ5owbBePUsPD",
    dataType: "json",
    success: function (data) {
      nasa = data;
    }
  });
  return nasa;
})();

let setTitle = function () {
  document.getElementById('spaceTitle').innerHTML = nasa.title;
}

//REFACTOR 
let setMedia = function () {

  let type = nasa.media_type;

  if (type === 'image') {

    //Check for HD first
    if (nasa.hdurl !== null) {
      document.getElementById('mediaContentTwo').src = nasa.hdurl;
    }

    //No HD, so load non-hd
    if (nasa.hdurl === null && nasa.url !== null) {
      document.getElementById('mediaContentTwo').src = nasa.url;
    }

    //In case of 404 or image error
    if (nasa.hdurl === null && nasa.url === null) {
      document.getElementById('mediaContent').innerHTML = 'Oh no! There was an error loading the image! Please check back later!';
    }
  }

  //Check for type video and set src to video url
  if (type === 'video') {
 document.getElementById('mediaContent').innerHTML += `<iframe id="mediaContentVideo" width="50%" height="80%" src=${nasa.url}></iframe>`;
  }
}

let setExplanation = function () {
  document.getElementById('spaceBody').innerHTML = nasa.explanation;
}

let setDate = function () {
  document.getElementById('spaceDate').innerHTML = '<p class="infoLabel">Date </p>' + nasa.date;
}

let setCopyright = function () {
  //Copyright can be empty if no attribution is necessary
  if (nasa.spaceCopyright !== undefined && nasa.spaceCopyright !== null) {
    document.getElementById('spaceCopyright').innerHTML = '<p class="infoLabel">Copyright </p>' + nasa.copyright;
  }

  if (nasa.spaceCopyright === null || nasa.spaceCopyright === undefined) {
    document.getElementById('spaceCopyright').innerHTML = '<p class="infoLabel">Copyright </p><p>None</p>';
  }
}

let runAll = function () {
  setTitle();
  setMedia();
  setExplanation();
  setDate();
  setCopyright();
}

runAll();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js