JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="search" placeholder="planet">
<div class="output">

</div>

JavaScript

const media = 'image';
const searchInput = document.querySelector('.search');
const output = document.querySelector('.output')

searchInput.addEventListener('change', searchData);

//get value of what is typed into search input.
async function searchData() {
  let search = this.value;
  const finalData = await getData(search);
  render(finalData);
}

function render(data) {
	output.innerHTML = JSON.stringify(data)
}


// pass the search variable into the endpoint in getData function.
function getData(search) {
  const endpoint = `https://images-api.nasa.gov/search?q=${search}&media_type=${media}`;

  return fetch(endpoint)
    .then(blob => blob.json())
    .then(data => data.collection.items);
}