Skip to content

Commit 60e4dc7

Browse files
ArashZrgArashZrg
committed
working on github search
1 parent aa4a14f commit 60e4dc7

File tree

4 files changed

+125
-176
lines changed

4 files changed

+125
-176
lines changed

‎028-github profiles/IMG_20240317_123628_541.jpg

263 KB
Loading

‎028-github profiles/index.html

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,37 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>github-profiles</title>
67
<link rel="stylesheet" href="style.css" />
7-
<title>GitHub Profiles</title>
8+
<script defer src="script.js"></script>
89
</head>
910
<body>
10-
<form class="user-form" id="form">
11-
<input type="text" placeholder="Search a GitHub User" id="search" />
12-
</form>
13-
<main id="main"></main>
14-
<script
15-
src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"
16-
integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ=="
17-
crossorigin="anonymous"
18-
></script>
19-
<script src="script.js"></script>
11+
<div id="container">
12+
<input spellcheck="false" class="search-box" placeholder="Search a GitHub User"></input>
13+
<div class="info-box">
14+
<img src="IMG_20240317_123628_541.jpg" alt="" id="profile-image">
15+
16+
<div class="text-info">
17+
<h2>Arash Zarghami</h2>
18+
<p>im frontend developer and in</p>
19+
<h1>Front-End</h1>
20+
<p>Developping</p>
21+
</div>
22+
23+
<div id="status">
24+
<p class="followers">11 Followers</p>
25+
<p class="following">11 Following</p>
26+
<p class="repos">5 Repos</p>
27+
</div>
28+
29+
<div id="repos-name">
30+
<div>html-css-javascrtip-project</div>
31+
<div>map-app</div>
32+
<div>drf__project</div>
33+
<div>ArashZrg</div>
34+
<div>University-unit</div>
35+
</div>
36+
</div>
37+
</div>
2038
</body>
2139
</html>

‎028-github profiles/script.js

Lines changed: 0 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +0,0 @@
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-
});

‎028-github profiles/style.css

Lines changed: 96 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,128 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
2-
31
* {
2+
margin: 0;
3+
padding: 0;
44
box-sizing: border-box;
55
}
66

7+
html {
8+
font-size: 10px;
9+
}
10+
711
body {
8-
background-color: #2a2a72;
9-
color: #fff;
10-
font-family: "Poppins", sans-serif;
12+
background-color: rgb(52, 0, 156);
13+
1114
display: flex;
12-
flex-direction: column;
13-
align-items: center;
1415
justify-content: center;
15-
height: 100vh;
16-
overflow: hidden;
17-
margin: 0;
16+
align-items: center;
17+
1818
}
1919

20-
.user-form {
21-
width: 95%;
22-
max-width: 700px;
20+
#container {
21+
width: 70%;
22+
height: 50rem;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
gap: 1rem;
28+
29+
padding: 2rem;
30+
margin-top: 10rem;
2331
}
2432

25-
.user-form input {
26-
width: 100%;
27-
display: block;
28-
background-color: #4c2885;
33+
.search-box {
34+
font-family: 'Courier New', Courier, monospace;
35+
36+
width: 60%;
37+
height: 7rem;
2938
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+
padding: 2rem;
3940

40-
.user-form input:focus {
41-
outline: none;
42-
}
41+
background-color: rgba(150, 40, 181, 0.5);
42+
color: white;
43+
box-shadow: inset 0px 0.1rem 1.1rem -0.3rem rgba(0, 0, 0, 0.7);
4344

44-
.user-form input::placeholder {
45-
color: #bbb;
45+
font-size: 2rem;
46+
border-radius: 1rem;
4647
}
4748

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;
49+
.search-box::placeholder {
50+
font-family: 'Courier New', Courier, monospace;
51+
color: rgb(232, 213, 213);
52+
opacity: 0.8;
5753
}
5854

59-
.avatar {
60-
border-radius: 50%;
61-
border: 10px solid #2a2a72;
62-
height: 150px;
63-
width: 150px;
55+
.search-box:focus {
56+
outline: none;
6457
}
6558

66-
.user-info {
67-
color: #eee;
68-
margin-left: 2rem;
69-
}
59+
.info-box {
60+
background-color: rgba(150, 40, 181, 0.5);
61+
width: 75%;
62+
height: 90%;
7063

71-
.user-info h2 {
72-
margin-top: 0;
73-
}
64+
border: none;
65+
border-radius: 1rem;
7466

75-
.user-info ul {
76-
list-style-type: none;
77-
display: flex;
78-
justify-content: space-between;
79-
padding: 0;
80-
max-width: 400px;
67+
position: relative;
8168
}
8269

83-
.user-info ul li {
84-
display: flex;
85-
align-items: center;
86-
}
8770

88-
.user-info ul li strong {
89-
font-size: 0.9rem;
90-
margin-left: 0.5rem;
71+
#profile-image {
72+
width: 15rem;
73+
height: 15rem;
74+
border-radius: 50%;
75+
border: solid rgba(17, 9, 117, 0.6) 1rem;
76+
position: absolute;
77+
left: 4rem;
78+
top: 2.5rem;
9179
}
9280

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;
81+
82+
.text-info {
83+
font-size: 1.6rem;
84+
position: absolute;
85+
left: 21rem;
86+
line-height: 5rem;
87+
top: 5rem;
88+
color: rgb(226, 209, 209);
89+
font-family: sans-serif;
10290
}
10391

104-
@media (max-width: 500px) {
105-
.card {
106-
flex-direction: column;
107-
align-items: center;
108-
}
10992

110-
.user-form {
111-
max-width: 400px;
112-
}
93+
#status {
94+
display: flex;
95+
gap: 10rem;
96+
font-size: 1.6rem;
97+
position: absolute;
98+
left: 21rem;
99+
line-height: 5rem;
100+
bottom: 10rem;
101+
color: rgb(226, 209, 209);
102+
font-family: sans-serif;
103+
font-weight: bold;
104+
}
113105

114-
.user-info {
115-
margin-left: 0;
116-
}
106+
#repos-name {
107+
width: 51rem;
108+
height: 10rem;
109+
display: flex;
110+
gap: 1.6rem;
111+
flex-wrap: wrap;
112+
justify-content: start;
113+
align-items: start;
114+
position: absolute;
115+
bottom: 2rem;
116+
right: 6.8rem;
117+
padding: 1rem
117118
}
119+
120+
#repos-name>div {
121+
font-size: 1.6rem;
122+
display: flex;
123+
justify-content: start;
124+
align-items: center;
125+
background-color: rgba(17, 9, 117, 0.6);
126+
padding: 0.6rem;
127+
color: white;
128+
}

0 commit comments

Comments
 (0)