initial attempt at studio

krystalwhite · krystalwhite · commit 7765c01e62cb · 2021-06-04T18:56:44.000-05:00
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <script src="script.js"></script>
+
     <h1>Astronauts</h1>
     <div id="container">
         <!-- List of astronauts will be added here dynamically -->
diff --git a/script.js b/script.js
@@ -1 +1,29 @@
-// TODO: add code here
+window.addEventListener("load", function(){
+    let json = [];
+    fetch("https://handlers.education.launchcode.org/static/astronauts.json").then(function(response) {
+      console.log(response);
+      response.json().then(function(json) {
+        const container = document.getElementById("container");
+        let index = 0;
+            container.addEventListener("click", function(){
+            container.innerHTML = `
+            <div class = "astronaut">
+                <div class = "bio">
+                <h3>${json[index].firstName, json[index].lastName}</h3>
+                <ul> 
+                    <li>Hours in space: ${json[index].hoursInSpace}</li>
+                    <li>Active: ${json[index].active}</li>
+                    <li>Skills: ${json[index].skills}</li>
+                </div>
+                <img class="avatar" src="images/mae-jemison.jpg">
+                </div>
+
+            `;
+            index = (index + 1) % json.length;
+            </div>    
+        });
+            
+        });
+    });
+
+  });
