-
Notifications
You must be signed in to change notification settings - Fork 9
/
script.js
111 lines (93 loc) · 3.61 KB
/
script.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const githubUsername = document.querySelector(".username-input");
const createCardBtn = document.querySelector(".create-card-btn");
const avatar = document.querySelector(".avatar");
const profileName = document.querySelector(".name");
const username = document.querySelector(".username");
const followers = document.querySelector(".followers");
const following = document.querySelector(".following");
const publicRepos = document.querySelector(".public-repos");
const userCardOuterDiv = document.querySelector(".user-card-outerDiv");
const profileLink = document.querySelector(".profile-link");
const userCardDiv = document.querySelector(".user-card-div");
const colorInputFrom = document.querySelector(".color-inputs-form");
const colorInput = document.querySelectorAll(".color-input");
const color1 = document.querySelector("#color-1");
const color2 = document.querySelector("#color-2");
const fillPercent = document.querySelector("#fill-percentage");
const resetBtn = document.querySelector("#reset-background");
const selectCustomBackground = document.querySelector(
".select-custom-background"
);
const selectCustomImg = document.querySelector(".select-custom-img");
const images = document.querySelectorAll(".img");
// Spinner
const spinnerDiv = document.querySelector(".spinner-div");
function hide_spinner() { }
createCardBtn.onclick = async () => {
let tempUsername = githubUsername.value;
if (tempUsername.length == 0) return;
spinnerDiv.style.display = "flex";
let request = await fetch(`https://api.github.com/users/${tempUsername}`);
let res = await request.json();
spinnerDiv.style.display = "none";
userCardOuterDiv.style.display = "flex";
avatar.src = res.avatar_url;
profileName.innerText = res.name;
username.innerText = res.login;
followers.innerText = res.followers;
following.innerText = res.following;
publicRepos.innerText = res.public_repos;
profileLink.innerText = `github.com/${res.login}`;
selectCustomBackground.style.display = "flex";
selectCustomImg.style.display = "flex";
};
githubUsername.onkeydown = (e) => {
if (e.keyCode == 13) {
createCardBtn.click();
}
};
document.querySelector(".download-btn").onclick = () => {
domtoimage
.toBlob(document.querySelector(".user-card-div"))
.then(function (blob) {
window.saveAs(blob, `${username.innerText}.png`);
});
};
const createBackgroundGradient = () => {
const colorFrom = color1.value;
const colorTo = color2.value;
const fill = fillPercent.value;
userCardDiv.style.background = `linear-gradient(to right, ${colorFrom} ${fill}%, ${colorTo})`;
};
for (let i = 0; i < colorInput.length; i++) {
colorInput[i].addEventListener("input", () => createBackgroundGradient());
}
colorInputFrom.addEventListener("reset", () => {
color1.value = "#4A00E0";
color2.value = "#8E2DE2";
fillPercent.value = 0;
createBackgroundGradient();
});
createBackgroundGradient();
//! REMOVE ACTIVE-IMG function
const removeActiveImg = function (clicked) {
images.forEach(function (e) {
e.classList.remove("active-img");
});
clicked.target.classList.add("active-img");
};
//! Event Listener on image background
images.forEach(function (e) {
e.addEventListener("click", function (e) {
removeActiveImg(e);
const imageURL = e.target.getAttribute("data-set");
if (imageURL === "true") {
createBackgroundGradient();
userCardDiv.classList.remove("active-img-bg");
userCardDiv.style.background = `linear-gradient(to right, ${color1.value} ${fillPercent}%, ${color2.value})`;
} else {
userCardDiv.classList.add("active-img-bg");
userCardDiv.style.background = `url(${imageURL})`;
}
});
});