Fetch_JSON/fetch_planets.html at main · wreed3/Fetch_JSON · 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
36
37
38
<!-- 26.5.1 JSON
1.b
2.a -->


<!DOCTYPE html>
<html>
   <head>
      <title>Fetch Planets</title>
      <script>
         window.addEventListener("load", function(){
            // TODO: fetch planets JSON

            fetch("https://handlers.education.launchcode.org/static/planets.json").then(function(response){
                response.json().then(function(json){
                   console.log(json);
                  const destination = document.getElementById("destination");
                  let index = 0;
                  destination.addEventListener('click', function(){
                     destination.innerHTML = `
                        <div>
                           <h3>Planet ${json[index].name}</h3>
                           <img src=${json[index].image} height=250></img>
                        </div> `;
                        index = (index + 1) % json.length;
                  });
                });
            });
         });
      </script>
   </head>
   <body>
      <h1>Destination</h1>
      <div id="destination">
         <h3>Planet</h3>
      </div>
   </body>
</html>