Your task is to build a website that shows astronauts fetched from an API.
window load event.fetch to the astronauts API https://handlers.education.launchcode.org/static/astronauts.jsonload event handler.Notice that it's an array of objects, due to the outer [ and ]. That means you will have to
use a loop to access each object inside the JSON array.
1[
2 {
3 "id": 1,
4 "active": false,
5 "firstName": "Mae",
6 "lastName": "Jemison",
7 "skills": [
8 "Physician", "Chemical Engineer"
9 ],
10 "hoursInSpace": 190,
11 "picture": "mae-jemison.jpg"
12 },
13 {
14 "id": 2,
15 "active": false,
16 "firstName": "Frederick",
17 "lastName": "Gregory",
18 "skills": [
19 "Information Systems", "Shuttle Pilot", "Fighter Pilot", "Helicopter Pilot", "Colonel USAF"
20 ],
21 "hoursInSpace": 455,
22 "picture": "frederick-gregory.jpg"
23 },
24 {
25 "id": 3,
26 "active": false,
27 "firstName": "Ellen",
28 "lastName": "Ochoa",
29 "skills": [
30 "Physics", "Electrical Engineer"
31 ],
32 "hoursInSpace": 979,
33 "picture": "ellen-ochoa.jpg"
34 },
35 {
36 "id": 4,
37 "active": false,
38 "firstName": "Guion",
39 "lastName": "Bluford",
40 "skills": [
41 "Aerospace Engineer", "Philosophy", "Physics", "Colonel USAF",
42 "Fighter Pilot"
43 ],
44 "hoursInSpace": 686,
45 "picture": "guion-bluford.jpg"
46 },
47 {
48 "id": 5,
49 "active": false,
50 "firstName": "Sally",
51 "lastName": "Ride",
52 "skills": [
53 "Physicist", "Astrophysics"
54 ],
55 "hoursInSpace": 343,
56 "picture": "sally-ride.jpg"
57 },
58 {
59 "id": 6,
60 "active": true,
61 "firstName": "Kjell",
62 "lastName": "Lindgren",
63 "skills": [
64 "Physician", "Surgeon", "Emergency Medicine"
65 ],
66 "hoursInSpace": 15,
67 "picture": "kjell-lindgren.jpg"
68 },
69 {
70 "id": 7,
71 "active": true,
72 "firstName": "Jeanette",
73 "lastName": "Epps",
74 "skills": [
75 "Physicist", "Philosophy", "Aerospace Engineer"
76 ],
77 "hoursInSpace": 0,
78 "picture": "jeanette-epps.jpg"
79 }
80]
Create HTML in this exact format for each astronaut, but include data about
that specific astronaut. For example the HTML below is what should be created
for astronaut Mae Jemison. All HTML created should be added to the
<div id="container"> tag.
Do NOT copy and paste this into your HTML file. Use this as a template to build HTML dynamically for each astronaut returned from the API.
1<div class="astronaut">
2 <div class="bio">
3 <h3>Mae Jemison</h3>
4 <ul>
5 <li>Hours in space: 190</li>
6 <li>Active: false</li>
7 <li>Skills: Physician, Chemical Engineer</li>
8 </ul>
9 </div>
10 <img class="avatar" src="images/mae-jemison.jpg">
11</div>
