Skip to content

Commit e9103c0

Browse files
author
shubham vashishtha
committed
init commit
0 parents  commit e9103c0

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎index.html

Lines changed: 19 additions & 0 deletions
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 http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Github Profiles</title>
8+
<link rel="stylesheet" href="./styles.css">
9+
</head>
10+
<body>
11+
<form class="user-form" id="form">
12+
<input type="text" id="search" placeholder="Search a Github User">
13+
</form>
14+
<main id="main">
15+
</main>
16+
<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>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎script.js

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

‎styles.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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: white;
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: 100%;
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: white;
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::placeholder {
41+
color: #bbb;
42+
}
43+
44+
.user-form input:focus {
45+
outline: none;
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+
}

0 commit comments

Comments
 (0)