Skip to content

Commit 65acf27

Browse files
AzmathDeveloperAzmathDeveloper
authored
Add files via upload
0 parents  commit 65acf27

File tree

3 files changed

+214
-0
lines changed

3 files changed

+214
-0
lines changed

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
<title>GitHub Profile</title>
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<form id="form" class="user-form">
11+
<input type="text" placeholder="Search a GitHub User" id="search" />
12+
</form>
13+
<main id="main"></main>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous" ></script>
15+
<script src="script.js" /></script>
16+
</body>
17+
</html>

‎script.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
const APIURL = "https://api.github.com/users/";
2+
const form = document.getElementById("form");
3+
const main = document.getElementById("main");
4+
const search = document.getElementById("search");
5+
6+
const createUserCard = (user) => {
7+
const cardHTML = `
8+
<div class="card">
9+
<div>
10+
<img
11+
src="${user.avatar_url}"
12+
alt="${user.name}"
13+
class="avatar"
14+
/>
15+
</div>
16+
<div class="user-info">
17+
<h2>${user.name}</h2>
18+
<p>
19+
${user.bio}
20+
</p>
21+
<ul>
22+
<li>${user.followers}<strong>Followers</strong></li>
23+
<li>${user.following}<strong>Following</strong></li>
24+
<li>${user.public_repos}<strong>Repos</strong></li>
25+
</ul>
26+
<div id="repos">
27+
</div>
28+
</div>
29+
</div>
30+
`;
31+
main.innerHTML = cardHTML;
32+
};
33+
34+
const createErrorCard = (message) => {
35+
const cardHTML = `
36+
<div class="card"><h1>${message}</h1></div>
37+
`;
38+
main.innerHTML = cardHTML;
39+
};
40+
41+
const addReposToCard = (repos) => {
42+
const reposElement = document.getElementById("repos");
43+
repos.slice(0, 5).forEach((repo) => {
44+
const repoElement = document.createElement("a");
45+
repoElement.classList.add("repo");
46+
repoElement.href = repo.html_url;
47+
repoElement.target = "_blank";
48+
repoElement.innerText = repo.name;
49+
reposElement.appendChild(repoElement);
50+
});
51+
};
52+
53+
const getUser = async (username) => {
54+
try {
55+
const { data } = await axios(APIURL + username);
56+
createUserCard(data);
57+
getRepos(username);
58+
} catch (error) {
59+
if (error.response.status == 404)
60+
createErrorCard("No profile with this username");
61+
}
62+
};
63+
64+
const getRepos = async (username) => {
65+
try {
66+
const { data } = await axios(APIURL + username + "/repos?sort=created");
67+
addReposToCard(data);
68+
} catch (error) {
69+
createErrorCard("Problem fetching repos");
70+
}
71+
};
72+
73+
form.addEventListener("submit", (e) => {
74+
e.preventDefault();
75+
const user = search.value;
76+
if (user) {
77+
getUser(user);
78+
search.value = "";
79+
}
80+
});

‎style.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #2a2a72;
9+
color: #fff;
10+
font-family: "Poppins", sans-serif;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
margin: 0;
18+
}
19+
20+
.user-form {
21+
width: 95%;
22+
max-width: 700px;
23+
}
24+
25+
.user-form input {
26+
width: 100%;
27+
display: block;
28+
background-color: #4c2885;
29+
border: none;
30+
border-radius: 10px;
31+
color: #fff;
32+
padding: 1rem;
33+
margin-bottom: 2rem;
34+
font-family: inherit;
35+
font-size: 1rem;
36+
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
37+
0 15px 40px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
.user-form input:focus {
41+
outline: none;
42+
}
43+
44+
.user-form input::placeholder {
45+
color: #bbb;
46+
}
47+
48+
.card {
49+
max-width: 800px;
50+
background-color: #4c2885;
51+
border-radius: 20px;
52+
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
53+
0 15px 40px rgba(0, 0, 0, 0.1);
54+
display: flex;
55+
padding: 3rem;
56+
margin: 0 1.5rem;
57+
}
58+
59+
.avatar {
60+
border-radius: 50%;
61+
border: 10px solid #2a2a72;
62+
height: 150px;
63+
width: 150px;
64+
}
65+
66+
.user-info {
67+
color: #eee;
68+
margin-left: 2rem;
69+
}
70+
71+
.user-info h2 {
72+
margin-top: 0;
73+
}
74+
75+
.user-info ul {
76+
list-style-type: none;
77+
display: flex;
78+
justify-content: space-between;
79+
padding: 0;
80+
max-width: 400px;
81+
}
82+
83+
.user-info ul li {
84+
display: flex;
85+
align-items: center;
86+
}
87+
88+
.user-info ul li strong {
89+
font-size: 0.9rem;
90+
margin-left: 0.5rem;
91+
}
92+
93+
.repo {
94+
text-decoration: none;
95+
color: #fff;
96+
background-color: #212a72;
97+
font-size: 0.7rem;
98+
padding: 0.25rem 0.5rem;
99+
margin-right: 0.5rem;
100+
margin-bottom: 0.5rem;
101+
display: inline-block;
102+
}
103+
104+
@media (max-width: 500px) {
105+
.card {
106+
flex-direction: column;
107+
align-items: center;
108+
}
109+
110+
.user-form {
111+
max-width: 400px;
112+
}
113+
114+
.user-info {
115+
margin-left: 0;
116+
}
117+
}

0 commit comments

Comments
 (0)