Skip to content

Commit 908538a

Browse files
Anujit1Anujit1
committed
added project github profile card and updated project_snapshot
1 parent 98d8972 commit 908538a

File tree

5 files changed

+202
-0
lines changed

5 files changed

+202
-0
lines changed

‎github_profile_card/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Profile Card</title>
6+
7+
<!-- css -->
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<!-- user name submit -->
14+
<div class="user_input">
15+
<form id="github_form">
16+
<label for="user_name_input">GitHub User Name</label>
17+
<input type="text" id="user_name_input" placeholder="Enter User Name" required>
18+
<button type="submit">Submit</button>
19+
</form>
20+
<p id="message"></p>
21+
</div>
22+
23+
24+
<div class="wrapper">
25+
<!-- card -->
26+
<div class="card">
27+
28+
<div class="card_image">
29+
<img src="profile_image.jpg" alt="" id="profile_picture">
30+
</div>
31+
32+
<div class="card_name">
33+
<h2 id="user_name">Example Name</h2>
34+
</div>
35+
36+
<div class="card_about">
37+
<p id="followers">followers: </p>
38+
<button class = "copy_btn" onclick="copyText()">Copy Data</button>
39+
</div>
40+
41+
</div>
42+
</div>
43+
</body>
44+
45+
<!-- js -->
46+
<script src="script.js"></script>
47+
</html>

‎github_profile_card/profile_image.jpg‎

5.97 KB
Loading

‎github_profile_card/script.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const form = document.getElementById('github_form');
2+
const user_name_input = document.getElementById('user_name_input');
3+
const name = document.getElementById('user_name');
4+
const followers = document.getElementById('followers');
5+
const profile_picture = document.getElementById('profile_picture');
6+
7+
let copyText;
8+
9+
form.addEventListener('submit', (e) => {
10+
e.preventDefault();
11+
12+
const user_name = user_name_input.value.trim();
13+
if (!user_name) return;
14+
15+
const requestUrl = `https://api.github.com/users/${user_name}`;
16+
17+
const xhr = new XMLHttpRequest();
18+
xhr.open('GET', requestUrl);
19+
20+
xhr.onreadystatechange = function () {
21+
if (xhr.readyState === 4 && xhr.status === 200) {
22+
const data = JSON.parse(this.responseText);
23+
name.innerHTML = data.name || "No Name";
24+
profile_picture.src = data.avatar_url;
25+
followers.innerHTML = `followers: ${data.followers}`;
26+
27+
copyText = function () {
28+
const text = `{ name : '${data.name}'; avatar_url : '${data.avatar_url}'; followers : ${data.followers}; }`;
29+
navigator.clipboard.writeText(text)
30+
.then(() => alert("Copied!"))
31+
.catch(err => console.error("Failed to copy: ", err));
32+
};
33+
} else if (xhr.readyState === 4 && xhr.status !== 200) {
34+
name.innerHTML = "User not found";
35+
profile_picture.src = "profile_image.jpg";
36+
followers.innerHTML = "";
37+
}
38+
};
39+
40+
xhr.send();
41+
});

‎github_profile_card/style.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f5f5f5;
9+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
10+
}
11+
12+
/* user input */
13+
.user_input {
14+
position: relative;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
top: 80px;
19+
text-align: center;
20+
}
21+
22+
#github_form {
23+
display: flex;
24+
flex-direction: column;
25+
gap: 10px;
26+
align-items: center;
27+
}
28+
29+
#user_name_input {
30+
width: 200px;
31+
height: 30px;
32+
padding: 5px;
33+
text-align: center;
34+
border: 1px solid #ccc;
35+
border-radius: 4px;
36+
}
37+
38+
#github_form button {
39+
width: 100px;
40+
height: 30px;
41+
background-color: #414141;
42+
color: white;
43+
border: none;
44+
border-radius: 4px;
45+
cursor: pointer;
46+
box-shadow: 0 2px 5px black;
47+
}
48+
49+
#github_form button:hover {
50+
background-color: #616161;
51+
box-shadow: none;
52+
}
53+
54+
#message {
55+
margin-top: 10px;
56+
color: #e63946;
57+
}
58+
59+
/* card */
60+
.wrapper {
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
min-height: 80vh;
65+
padding: 50px 0;
66+
}
67+
68+
.card {
69+
width: 250px;
70+
border-radius: 8px;
71+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
72+
text-align: center;
73+
overflow: hidden;
74+
background-color: white;
75+
}
76+
77+
.card_image img {
78+
width: 100%;
79+
height: 250px;
80+
object-fit: cover;
81+
}
82+
83+
.card_about {
84+
display: flex;
85+
justify-content: space-around;
86+
align-items: center;
87+
padding: 0.8em;
88+
}
89+
90+
.copy_btn {
91+
padding: 5px 10px;
92+
cursor: pointer;
93+
background-color: #414141;
94+
color: white;
95+
border: none;
96+
border-radius: 4px;
97+
box-shadow: 0 2px 5px black;
98+
}
99+
100+
.copy_btn:hover {
101+
background-color: #616161;
102+
box-shadow: none;
103+
}
104+
105+
@media (max-width: 500px) {
106+
.user_input {
107+
top: 50px;
108+
}
109+
110+
.wrapper {
111+
min-height: 70vh;
112+
}
113+
114+
}

‎project_Snapshot/GitHub_Profile_Card.png‎

204 KB
Loading

0 commit comments

Comments
 (0)