forked from whiteHatpro/showcase
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
73 lines (68 loc) · 2.51 KB
/
index.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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
const $main = document.querySelector('.page-content');
let card = document.createElement("card");
card.classList.add("card");
let content = document.createElement("content");
content.classList.add("content");
let title = document.createElement("h2");
title.classList.add("title");
let imageDiv = document.createElement("div");
imageDiv.classList.add("imageDiv");
let quoteDiv = document.createElement("div");
quoteDiv.classList.add("quoteDiv");
let paragraph = document.createElement("p");
paragraph.classList.add("copy");
let SocialDiv = document.createElement("div");
SocialDiv.classList.add('socialDiv');
let Github = document.createElement("a");
Github.classList.add("social-icon");
Github.dataset.tooltip = "GitHub";
let GithubIcon = document.createElement("i");
GithubIcon.classList.add("fa");
GithubIcon.classList.add("fa-github");
Github.appendChild(GithubIcon);
let Linkedin = document.createElement("a");
Linkedin.classList.add("social-icon");
Linkedin.dataset.tooltip = "Linkedin";
let LinkedinIcon = document.createElement("i");
LinkedinIcon.classList.add("fa");
LinkedinIcon.classList.add("fa-linkedin");
Linkedin.appendChild(LinkedinIcon);
let Twitter = document.createElement("a");
Twitter.classList.add("social-icon");
Twitter.dataset.tooltip = "Twitter";
let TwitterIcon = document.createElement("i");
TwitterIcon.classList.add("fa");
TwitterIcon.classList.add("fa-twitter");
Twitter.appendChild(TwitterIcon);
SocialDiv.appendChild(Twitter);
SocialDiv.appendChild(Github);
SocialDiv.appendChild(Linkedin);
// Twitter.classList.add("btn");
card.appendChild(imageDiv);
content.appendChild(title);
content.appendChild(paragraph);
content.appendChild(quoteDiv);
content.appendChild(SocialDiv);
card.appendChild(content);
(async () => {
console.log("hello");
const dataForCards = await (await fetch('https://quintessences.github.io/showcase/data.json')).json();
let count = 0;
Github.setAttribute("target", "_blank");
Linkedin.setAttribute("target", "_blank");
Twitter.setAttribute("target", "_blank");
for (user of dataForCards.data) {
imageDiv.style.backgroundImage = `url(${user.picture_url})`;
Github.setAttribute("href", user.github);
Linkedin.setAttribute("href", user.linkedin);
Linkedin.setAttribute("href", user.linkedin);
Twitter.setAttribute("href", user.twitter);
console.log(user);
console.log(count);
count += 1;
title.innerText = `${user.name}`;
paragraph.innerText = `Batch ${user.batch}`;
quoteDiv.innerText = user.quote;
$main.appendChild(card.cloneNode(true));
}
})();