<h1>The NASA Astonomy Picture of the Day</h1>

<div id="Searchbutton">
<input type="text" id="search" />
<button id="Button">See Image</button>
</div>

<p id="example">YYYY-MM-DD</p>

<h2 id="title"></h2>
<p id="date"></p>

<div id="writing">
<p id="author"></p>
<p id="info"></p>
</div>
  
<div id="photo"><img src="" id="picture"> </img></div>
body {
  background: black;
}

h1 {
  text-align: center;
  color: white;
}

#date {
  text-align: center;
  color: white;
}

#Searchbutton {
 display: flex;
  align-items: center;
  justify-content: center;
}

h2 {
  text-align: center;
  color: white;
}

img {
  max-height: 100vh;
  max-width: 100vw;
  position: relative;
}

#example {
  text-align: center;
 font-style: italic;
  color: white;
}

#author {
  color: white;
}

#info {
  color: white;
}

#writing {
  margin: 50px;
}

#photo {
  display: flex;
  justify-content: center;
}

function searchAPI(){
  
   let query = document.getElementById('search').value;
  
  fetch(`https://api.nasa.gov/planetary/apod?api_key=LBJ7oQZmmfP2G87Ewie7Pb9FtvKhlAdICPtZabyD&date=${query}`)
      .then(res => res.json())
      .then((out) => {
      
          console.log(out)
      document.getElementById('title').innerHTML = out.title;
      document.getElementById('author').innerHTML = out.copyright;
      document.getElementById('date').innerHTML = out.date;
     document.getElementById('picture').src = out.hdurl;
    document.getElementById('info').innerHTML = out.explanation;
    
      })
  
}



document.getElementById('Button').addEventListener('click', function(){
  
  searchAPI();
  
  
  
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.