-
Notifications
You must be signed in to change notification settings - Fork 0
/
profile_scroller.js
51 lines (45 loc) · 1.54 KB
/
profile_scroller.js
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
//Call a profile by default
nextProfile();
document.getElementById('next').addEventListener('click', nextProfile);
async function getRandomUsers() {
const response = await fetch('https://randomuser.me/api/?results=4');
const data = await response.json();
const profile = data.results;
return profile;
}
function profileIterator(profiles) {
let nextIndex = 0;
return {
next() {
return nextIndex < profiles.length
? { value: profiles[nextIndex++], done: false }
: { done: true };
}
};
}
//Capitalize first letter
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//Next Profile display
function nextProfile() {
getRandomUsers().then(profilesArr => {
const userProfiles = profileIterator(profilesArr);
const currentProfile = userProfiles.next().value;
document.getElementById('profileDisplay').innerHTML = `
<ul class="list-group">
<li class="list-group-item">Name: ${capitalizeFirstLetter(
currentProfile.name.first
)} ${capitalizeFirstLetter(currentProfile.name.last)}</li>
<li class="list-group-item">Age: ${currentProfile.dob.age}</li>
<li class="list-group-item">Location: ${capitalizeFirstLetter(
currentProfile.location.city
)}, ${capitalizeFirstLetter(currentProfile.location.state)}</li>
<li class="list-group-item">Phone: ${currentProfile.phone}</li>
</ul>
`;
document.getElementById('imageDisplay').innerHTML = `
<img src="${currentProfile.picture.large}"></img>
`;
});
}