javascript-projects/fetch_planets.html at main · wbennett721/javascript-projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
   <head>
      <title>Fetch Planets</title>
      <script>
         window.addEventListener("load", function(){
            fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){
                response.json().then(function(json) {

                    const destination = document.getElementById("destination");
                    destination.addEventListener("click", function(){
                        let idx = Math.floor(Math.random()*json.length);
         destination.innerHTML = `
            <div>
               <h3>Planet ${json[idx].name}</h3>
               <img src=${json[idx].image} height=250></img>
            </div>
;
`;
      });
   });
});

      // TODO: do something after fetching and receiving a response
   });

      </script>
   </head>
   <body>
      <h1>Destination</h1>
      <div id="destination">
         <h3>Planet</h3>
      </div>
   </body>
</html>