forked from LaunchCodeEducation/javascript-projects
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
59 lines (47 loc) · 1.92 KB
/
Copy pathscript.js
File metadata and controls
59 lines (47 loc) · 1.92 KB
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
window.addEventListener('load', function() {
fetch('https://handlers.education.launchcode.org/static/astronauts.json')
.then(function(response) {
return response.json();
})
.then(function(data) {
displayAstronauts(data);
})
.catch(function(error) {
console.error('Error fetching data:', error);
});
});
function displayAstronauts(astronautsList) {
const div = document.getElementById("container");
astronautsList.sort(function(a, b) {
return b.hoursInSpace - a.hoursInSpace;
});
const countElement = document.createElement('p');
countElement.textContent = 'Total Astronauts: ' + astronautsList.length;
div.appendChild(countElement);
for (let x = 0; x < astronautsList.length; x++) {
const person = document.createElement("div");
person.classList.add("astronaut");
const h3 = document.createElement("h3");
h3.innerHTML = `${astronautsList[x].firstName} ${astronautsList[x].lastName}`;
person.appendChild(h3);
const ul = document.createElement("ul");
const liHours = document.createElement("li");
liHours.innerHTML = `Hours in Space: ${astronautsList[x].hoursInSpace}`;
ul.appendChild(liHours);
const liActive = document.createElement("li");
liActive.innerHTML = `Active: ${astronautsList[x].active}`;
if (astronautsList[x].active) {
liActive.style.color = 'green';
}
ul.appendChild(liActive);
const liSkills = document.createElement("li");
liSkills.innerHTML = `Skills: ${astronautsList[x].skills.join(', ')}`;
ul.appendChild(liSkills);
person.appendChild(ul);
const img = document.createElement('img');
img.src = astronautsList[x].picture;
img.classList.add("avatar");
person.appendChild(img);
div.appendChild(person);
}
}