Skip to content

Commit 58c3dcf

Browse files
techysanojtechysanoj
committed
adding required files
1 parent 2df6b8c commit 58c3dcf

11 files changed

+269
-0
lines changed

‎favicon_io/android-chrome-192x192.png

8.82 KB
Loading

‎favicon_io/android-chrome-512x512.png

25.2 KB
Loading

‎favicon_io/apple-touch-icon.png

7.85 KB
Loading

‎favicon_io/favicon-16x16.png

571 Bytes
Loading

‎favicon_io/favicon-32x32.png

1.23 KB
Loading

‎favicon_io/favicon.ico

15 KB
Binary file not shown.

‎favicon_io/site.webmanifest

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎github.png

18.2 KB
Loading

‎index.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 Viewer</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="icon" type="image/x-icon" href="favicon_io/favicon-16x16.png">
9+
</head>
10+
<body>
11+
<div class="main">
12+
<div class="background">
13+
<h1 class="heading">Github Profile Viewer</h1>
14+
<img src="favicon_io/favicon-32x32.png">
15+
</div>
16+
17+
<div class="enter-details">
18+
<h1>Enter User Name Here - > </h1>
19+
<input class="input-git" type="text" value="techysanoj">
20+
</div>
21+
22+
<button class="get-details">Search Details</button>
23+
</div>
24+
<div class="user-details">
25+
<img class="avatar" src="https://avatars.githubusercontent.com/u/96434101?v=4">
26+
<div class="info">
27+
<div class="box">
28+
<p class="username">@techysanoj</p>
29+
</div>
30+
<div class="box-2">
31+
<p class="bio">👋 Software Engineering student passionate about learning new things. Proficient in machine learning, competitive programming (C++), and front-end web dev.</p>
32+
</div>
33+
<div class="box-3">
34+
<div class="followers">
35+
<p class="followers-text">Followers : </p>
36+
<p class="followers-value">3</p>
37+
</div>
38+
</div>
39+
<div class="box-4">
40+
<div class="following">
41+
<p class="following-text">Following : </p>
42+
<p class="following-value">1</p>
43+
</div>
44+
</div>
45+
46+
</div>
47+
</div>
48+
<script src="script.js"></script>
49+
</body>
50+
</html>

‎script.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Replace 'YOUR_GITHUB_USERNAME' with the actual GitHub username
2+
let user = document.querySelector(".input-git");
3+
let username = '';
4+
let text = document.querySelector(".username")
5+
function updateInputValue(event) {
6+
// Update username variable with the latest input value
7+
username = event.target.value;
8+
}
9+
10+
user.addEventListener("input", updateInputValue);
11+
12+
// Fetch user profile data
13+
async function fetchUserProfile() {
14+
console.log(username, user);
15+
try {
16+
const response = await fetch(`https://api.github.com/users/${username}`);
17+
const data = await response.json();
18+
// Update your HTML elements with the fetched user data
19+
text.innerText = '@' + data.login;
20+
let imgs = document.querySelector(".avatar");
21+
imgs.src = data.avatar_url;
22+
let bio = document.querySelector(".bio");
23+
bio.innerText = data.bio;
24+
let followersValue = document.querySelector(".followers-value");
25+
followersValue.innerText = data.followers;
26+
let followingValue = document.querySelector(".following-value");
27+
followingValue.textContent = data.following;
28+
} catch (error) {
29+
console.error('Error fetching user data:', error);
30+
}
31+
}
32+
33+
// Fetch user repositories
34+
async function fetchUserRepositories() {
35+
try {
36+
const response = await fetch(`https://api.github.com/users/${username}/repos`);
37+
const repos = await response.json();
38+
// Update your HTML elements with the repository data
39+
const repoList = document.getElementById('repositories');
40+
repos.forEach((repo) => {
41+
const listItem = document.createElement('li');
42+
listItem.innerHTML = `<a href="${repo.html_url}" target="_blank">${repo.name}</a>`;
43+
repoList.appendChild(listItem);
44+
});
45+
} catch (error) {
46+
console.error('Error fetching repositories:', error);
47+
}
48+
}
49+
50+
// Call the functions to fetch data
51+
let btn = document.querySelector(".get-details");
52+
btn.addEventListener("click", fetchUserProfile);

‎style.css

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
text-align: center;
5+
}
6+
7+
body{
8+
background-color: #00224D;
9+
color: #d2d908;
10+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
11+
}
12+
.main{
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
.enter-details{
19+
display: flex;
20+
justify-content: center;
21+
gap: 1rem;
22+
align-items: center;
23+
}
24+
.background{
25+
background-color:#ffffff;
26+
height:4rem;
27+
gap: 1.5rem;
28+
width: 100%;
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
color: black;
33+
}
34+
35+
.input-git{
36+
margin: 1.5rem 0 1.5rem 0;
37+
height: 3rem;
38+
width: 9rem;
39+
font-size: 1rem;
40+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
41+
background-color: black;
42+
color: #EAEAEA;
43+
text-align: center;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
border-radius: 1.5rem;
48+
box-shadow: 3px 3px 1px #F9ED69;
49+
gap: 1rem;
50+
}
51+
52+
.get-details{
53+
margin: 1.5rem 0 1.5rem 0;
54+
height: 3.5rem;
55+
width: 10rem;
56+
font-size: 1.2rem;
57+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
58+
background-color: black;
59+
color: #EAEAEA;
60+
text-align: center;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
border-radius: 1.5rem;
65+
box-shadow: 3px 3px 1px #F9ED69;
66+
gap: 1rem;
67+
cursor: pointer;
68+
}
69+
.get-details:hover {
70+
background-color: #FF204E;
71+
}
72+
73+
.user-details{
74+
margin-bottom: 1.5rem;
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
}
79+
80+
.user-details img{
81+
margin-bottom: 1.5rem;
82+
margin: 0 1.5rem 0 1.5rem;
83+
border-radius: 50%;
84+
box-shadow: 5px 7px 1px #f7ff5c;
85+
}
86+
87+
.info {
88+
margin-bottom: 1.5rem;
89+
display: flex;
90+
flex-direction: column;
91+
justify-content:flex-start;
92+
align-items: center;
93+
color: #EAEAEA;
94+
}
95+
.box{
96+
gap: 1rem;
97+
margin-bottom: 0.5rem;
98+
padding: 1rem;
99+
background-color: #3AA6B9;
100+
color: #F6FFDE;
101+
box-shadow: 3px 5px 1px #f7ff5c;
102+
border-radius: 7rem;
103+
justify-content: space-between;
104+
105+
}
106+
.username{
107+
margin: 0.5rem 0 0.5rem 0;
108+
font-size: 2rem;
109+
}
110+
111+
.bio{
112+
height: auto;
113+
width: 30rem;
114+
margin: 0.5rem 0 0.5rem 0;
115+
font-size: 1.5rem;
116+
}
117+
118+
.followers{
119+
display: flex;
120+
gap: 1rem;
121+
margin:0.5rem 0 0.5rem 0;
122+
font-size: 1.5rem;
123+
}
124+
.following{
125+
display: flex;
126+
gap: 1rem;
127+
margin:0.5rem 0 0.5rem 0;
128+
font-size: 1.5rem;
129+
}
130+
131+
.box-2{
132+
gap: 1rem;
133+
margin-top: 0.5rem;
134+
margin-bottom: 1rem;
135+
padding: 1rem;
136+
background-color: #007270;
137+
color: white;
138+
box-shadow: 1px 3px 1px #F9ED69;
139+
border-radius: 2rem;
140+
justify-content: space-between;
141+
}
142+
143+
.box-3{
144+
gap: 1rem;
145+
margin-top: 0.5rem;
146+
margin-bottom: 1rem;
147+
padding: 1rem;
148+
background-color: #FF204E;
149+
color: white;
150+
box-shadow: 1px 3px 1px #F9ED69;
151+
border-radius: 2rem;
152+
justify-content: space-between;
153+
154+
}
155+
.box-4{
156+
gap: 1rem;
157+
margin-top: 0.5rem;
158+
margin-bottom: 1rem;
159+
padding: 1rem;
160+
background-color: #5356FF;
161+
color: white;
162+
box-shadow: 1px 3px 1px #F9ED69;
163+
border-radius: 2rem;
164+
justify-content: space-between;
165+
166+
}

0 commit comments

Comments
 (0)