alx-higher_level_programming/0x14-javascript-web_scraping/heroes.html at master · samuelselasi/alx-higher_level_programming · 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">

		<title>Our superheroes</title>

		<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<header>

		</header>

		<section>

		</section>

		<script>
			async function populate() {
				const requestURL =
					"https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
				const request = new Request(requestURL);

				const response = await fetch(request);
				const superHeroes = await response.json();

				populateHeader(superHeroes);
				populateHeroes(superHeroes);
			}

			function populateHeader(obj) {
				const header = document.querySelector("header");
				const myH1 = document.createElement("h1");
				myH1.textContent = obj.squadName;
				header.appendChild(myH1);

				const myPara = document.createElement("p");
				myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
				header.appendChild(myPara);
			}

			function populateHeroes(obj) {
				const section = document.querySelector("section");
				const heroes = obj.members;

				for (const hero of heroes) {
					const myArticle = document.createElement("article");
					const myH2 = document.createElement("h2");
					const myPara1 = document.createElement("p");
					const myPara2 = document.createElement("p");
					const myPara3 = document.createElement("p");
					const myList = document.createElement("ul");

					myH2.textContent = hero.name;
					myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
					myPara2.textContent = `Age: ${hero.age}`;
					myPara3.textContent = "Superpowers:";

					const superPowers = hero.powers;
					for (const power of superPowers) {
						const listItem = document.createElement("li");
						listItem.textContent = power;
						myList.appendChild(listItem);
					}

					myArticle.appendChild(myH2);
					myArticle.appendChild(myPara1);
					myArticle.appendChild(myPara2);
					myArticle.appendChild(myPara3);
					myArticle.appendChild(myList);

					section.appendChild(myArticle);
				}
			}

			populate();

		</script>
	</body>

</html>