Here is the html is very simple but it does what it needs.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css.css">
<script src="/script.js"></script>
<title>Nasa</title>
</head>
<body>
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="wrapper">
<h1>Nasa Images</h1>
<div class="search">
<form id="form">
<input type="text" id="searchbox" placeholder="Search...">
<input type="button" id="search" placeholder="Search" value="Search">
</form>
</div>
<div id="content" class="contentbox">
</div>
</div>
</body>
<footer>
</footer>
</html>
Here is the js I don’t know if this is the best way to doit but I hope it makes sense.
// Window load will wait for the website to load and then run the script
window.addEventListener('load' , function(){
const bnt = document.querySelector('#search') //Declaring the button
const box = document.querySelector('#searchbox').value//Declaring the Search Box
async function search(){ //In this fuction the script will take rhe users imput make a searcha
and save the information sendt from the API/Server
let q = document.querySelector('#searchbox').value
let url = "https://images-api.nasa.gov/search?q="+q+"&description&media_type=image"
let response = await fetch (url);
console.log(response)
let data = await response.json()
console.log(data)
displayData(data)
console.log(q)
}
function displayData(data){ //In this fuction we will display the data recived from the server
document.querySelector('#content').innerHTML += " <h1>"+data.collection.items[0].data[0].description+"</h1>"
document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[0].links[0].href+"' width='955' />";
document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[1].links[0].href+"' width='955' />";
document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[2].links[0].href+"' width='955' />";
document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[3].links[0].href+"' width='955' />";
document.querySelector('#content').innerHTML += "<br /><img src='"+data.collection.items[4].links[0].href+"' width='955' />";
}
bnt.addEventListener('click', search); //This event will tell the script when the button as
been pressed and will run the fuction search
})
I am new to this and I have done loops in the past but I don’t know how will I be able to create a loop for this situation.