Skip to content

Commit f14e2ea

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #20 from KryptonANSHU/Github_profiles
GitHub profiles Search App
2 parents b6856ea + 46320b4 commit f14e2ea

5 files changed

Lines changed: 213 additions & 0 deletions

File tree

‎Github Search Profile App/Readme.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
This App Searches the Github Profile and shows Info regarding the User.
2+
3+
YOU NEED TO DO THIS BEFORE RUNNING THE APP ON LIVESERVER
4+
nmp install axios
5+
6+
![image](https://user-images.githubusercontent.com/72062616/193442652-6c5d2d4a-37ee-413d-af50-bea7507f7e11.png)
7+
8+
9+
10+
![image](https://user-images.githubusercontent.com/72062616/193442673-4c52b9a0-c48a-40c5-9e3c-e74252774179.png)

‎Github Search Profile App/img.jpg‎

5.4 MB
Loading

‎Github Search Profile App/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
9+
<title>Github Search</title>
10+
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
12+
integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
13+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
14+
15+
<link rel="stylesheet" href="style.css">
16+
17+
</head>
18+
19+
<body>
20+
<div class="upper">
21+
<input type="text" id="searchbar" placeholder="Enter Github Username">
22+
<button id="btn">Search</button>
23+
</div>
24+
25+
<div class="bottom">
26+
27+
28+
29+
</div>
30+
31+
32+
<script src="script.js"></script>
33+
</body>
34+
35+
</html>

‎Github Search Profile App/script.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
3+
const APIURL = 'https://api.github.com/users'
4+
const btn = document.getElementById('btn')
5+
const searchbar = document.getElementById('searchbar')
6+
7+
8+
const getUser = async (username)=>{
9+
try{
10+
console.log('in try')
11+
12+
const response = await axios.get(`https://api.github.com/users/${username}`);
13+
console.log(response.data)
14+
updatedata(response.data);
15+
}
16+
catch(e){
17+
console.log(e.name)
18+
console.log(e.message)
19+
}
20+
}
21+
22+
23+
24+
25+
26+
function updatedata(data){
27+
let filldata ='';
28+
const div = document.createElement("div");
29+
30+
31+
filldata =
32+
`
33+
<div class = "card">
34+
<img src="${data.avatar_url}" alt="Error">
35+
<p class="bold">Bio</p>
36+
<p class="light">${data.bio}</p>
37+
<p class="bold">Locataion</p>
38+
<p class="light">${data.location}</p>
39+
<p class="bold">Number of Public Repos</p>
40+
<p class="light">${data.public_repos}</p>
41+
<p class="bold">Number of Followers</p>
42+
<p class="light">${data.followers}</p>
43+
44+
<p class="light"><a href = "${data.blog}" class = "bold" target = "_blank" >LinkedIN</a></p>
45+
</div>
46+
47+
`;
48+
49+
div.innerHTML = filldata;
50+
div.classList.add('card')
51+
const bottom = document.querySelector('.bottom').appendChild(div);
52+
53+
}
54+
55+
56+
57+
58+
btn.addEventListener('click',()=>{
59+
const username = searchbar.value;
60+
getUser(username);
61+
62+
})

‎Github Search Profile App/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
2+
3+
*{
4+
margin: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
9+
10+
body{
11+
background-color: #161b22;
12+
color: white;
13+
height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
.upper{
21+
/* border: 2px solid white; */
22+
display: flex;
23+
flex-direction: column;
24+
padding: 20px;
25+
width: 100vw;
26+
justify-content: center;
27+
align-items: center;
28+
29+
}
30+
31+
.upper input[type=text]{
32+
33+
font-size: large;
34+
width: 20%;
35+
border-radius: 6px;
36+
height: 40px;
37+
outline: none;
38+
border: none;
39+
/* background-color: #01040959; */
40+
background-color: rgb(233, 223, 223)
41+
}
42+
43+
::placeholder{
44+
color: grey;
45+
text-align: center;
46+
}
47+
/*
48+
.upper input[type = text]:hover{
49+
color: grey;
50+
} */
51+
52+
.upper button{
53+
text-transform: uppercase;
54+
font-size: 20px;
55+
border: none;
56+
background-color: #010409d2;
57+
color: grey;
58+
border-radius: 6px;
59+
height: 40px;
60+
width: 20%;
61+
margin: 30px;
62+
cursor: pointer;
63+
transition: font-size 500ms ease;
64+
}
65+
.upper button:hover{
66+
font-size: 15px;
67+
}
68+
69+
/* ---------------------- */
70+
71+
.bottom{
72+
height: 60%;
73+
width: 100%;
74+
/* border: 2px solid white; */
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
}
79+
80+
.card{
81+
width: 80%;
82+
height: 100%;
83+
display: flex;
84+
height: max-content;
85+
flex-direction: column;
86+
justify-content: center;
87+
align-items: center;
88+
/* border: 2px solid white; */
89+
}
90+
91+
.card .bold{
92+
margin-top: 10px;
93+
font-size: 20px;
94+
font-weight: bolder;
95+
color: rgb(236, 116, 116);
96+
}
97+
98+
.card .light{
99+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
100+
font-size: 20px;
101+
margin-bottom: 10px;
102+
}
103+
.card img{
104+
height: 60px;
105+
border-radius: 100px;
106+
}

0 commit comments

Comments
 (0)