Skip to content

Commit 34a3b9b

Browse files
gixxerbladegixxerblade
committed
committed
1 parent ec23abd commit 34a3b9b

File tree

3 files changed

+92
-0
lines changed

3 files changed

+92
-0
lines changed

‎WeekEight/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<link
9+
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>Document</title>
13+
</head>
14+
<body>
15+
<h1>Authors</h1>
16+
<ul id="authors"></ul>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎WeekEight/script.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const ul = document.getElementById("authors");
2+
const url = "https://randomuser.me/api/?results=10";
3+
function createNode(element) {
4+
return document.createElement(element); // Create the type of element you pass in the parameters
5+
}
6+
7+
function append(parent, el) {
8+
return parent.appendChild(el); // Append the second parameter(element) to the first one
9+
}
10+
11+
fetch(url)
12+
.then(resp => resp.json()) // Transform the data into json
13+
.then(function(data) {
14+
let authors = data.results; // Get the results
15+
return authors.map(function(author) {
16+
// Map through the results and for each run the code below
17+
let li = createNode("li"), // Create the elements we need
18+
img = createNode("img"),
19+
span = createNode("span");
20+
li.setAttribute('id', 'author');
21+
img.src = author.picture.medium; // Add the source of the image to be the src of the img element
22+
span.innerHTML = `${author.name.first} ${author.name.last}`; // Make the HTML of our span to be the first and last name of our author
23+
append(li, img); // Append all our elements
24+
append(li, span);
25+
append(ul, li);
26+
});
27+
})
28+
.catch(function(error) {
29+
console.log(error);
30+
});

‎WeekEight/style.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
width: 100vw;
8+
height: 100vh;
9+
font-size: 16px;
10+
font-family: "Poppins", sans-serif;
11+
background: #eafbea;
12+
text-align: center;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
flex-flow: column wrap;
17+
}
18+
h1 {
19+
margin: 40px;
20+
font-size: 50px;
21+
font-weight: 800;
22+
}
23+
#authors {
24+
display: flex;
25+
flex-flow: row wrap;
26+
justify-content: center;
27+
align-items: center;
28+
}
29+
#author {
30+
display: flex;
31+
flex-flow: column nowrap;
32+
justify-content: space-around;
33+
align-items: center;
34+
margin: 20px;
35+
}
36+
span {
37+
text-align: center;
38+
font-size: 20px;
39+
margin: 10px;
40+
}
41+
img{
42+
width: 100px;
43+
}

0 commit comments

Comments
 (0)