Skip to content

Commit bc25b3d

Browse files
committed
solve linter issues
1 parent 42f9f10 commit bc25b3d

File tree

2 files changed

+113
-121
lines changed

2 files changed

+113
-121
lines changed
+15-16
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
1-
const inputUser = document.querySelector("#input");
1+
const inputUser = document.querySelector('#input');
22

3-
const userImg = document.querySelector(".main-info");
4-
const search = document.getElementById("search");
5-
const bio = document.querySelector("#bio");
6-
const repos = document.querySelector("#repo");
7-
const followers = document.querySelector("#followers");
8-
const following = document.querySelector("#following");
3+
const userImg = document.querySelector('.main-info');
4+
const search = document.getElementById('search');
5+
const bio = document.querySelector('#bio');
6+
const repos = document.querySelector('#repo');
7+
const followers = document.querySelector('#followers');
8+
const following = document.querySelector('#following');
99

1010
const fetchUser = (username) => {
1111
fetch(`https://api.github.com/users/${username}`)
1212
.then((data) => data.json())
1313
.then((jsonData) => {
14-
if (jsonData.message === "Not Found") {
15-
alert("User Not Found");
16-
return;
14+
if (jsonData.message === 'Not Found') {
15+
alert('User Not Found');
1716
} else {
1817
userImg.innerHTML = `
1918
<img src="${jsonData.avatar_url}" alt="avatar" id="prof-img">
2019
<span class="name" id="name">${jsonData.name}</span>
2120
<a href="${jsonData.html_url}" id="username">@${jsonData.login}</a>
2221
`;
23-
bio.innerHTML = jsonData.bio ? jsonData.bio : "No bio available.";
22+
bio.innerHTML = jsonData.bio ? jsonData.bio : 'No bio available.';
2423
repos.innerHTML = jsonData.public_repos;
2524
followers.innerHTML = jsonData.followers;
2625
following.innerHTML = jsonData.following;
2726
}
2827
})
2928
.catch((err) => {
30-
console.log("Catch: " + err.message);
29+
console.log(`Catch: ${err.message}`);
3130
});
3231
};
3332

3433
const getUser = () => {
35-
let username = inputUser.value.trim();
34+
const username = inputUser.value.trim();
3635

3736
if (username.length === 0) {
38-
alert("Please enter a valid GitHub username");
37+
alert('Please enter a valid GitHub username');
3938
} else {
4039
fetchUser(username);
4140
}
4241

43-
inputUser.value = "";
42+
inputUser.value = '';
4443
};
4544

4645
// Attach event listener to the search button
47-
search.addEventListener("click", getUser);
46+
search.addEventListener('click', getUser);
+98-105
Original file line numberDiff line numberDiff line change
@@ -1,138 +1,131 @@
1-
*{
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
}
6-
7-
body{
8-
background: url(./assets/github.avif);
9-
background-repeat: no-repeat;
10-
background-size: cover;
11-
background-position: center;
12-
background-blend-mode: darken;
13-
}
14-
15-
16-
.search-container{
17-
18-
width: 550px;
19-
height: 50px;
20-
background-color: #fff;
21-
display: flex;
22-
justify-content: space-evenly;
23-
margin: 0 auto;
24-
margin-top: 50px;
25-
box-shadow: 0 3px 10px gray;
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
265
}
276

28-
#input{
29-
width: 70%;
30-
height: 100%;
31-
background-color: #fff;
32-
border: none;
33-
outline: none;
34-
padding: 5px 160px 5px 15px;
35-
box-sizing: border-box;
7+
body {
8+
background: url(./assets/github.avif);
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
background-position: center;
12+
background-blend-mode: darken;
3613
}
3714

38-
#search{
39-
40-
height: 100%;
41-
width: 30%;
42-
background-color: #000;
43-
color : white;
44-
cursor: pointer;
45-
text-transform: uppercase;
15+
.search-container {
16+
width: 550px;
17+
height: 50px;
18+
background-color: #fff;
19+
display: flex;
20+
justify-content: space-evenly;
21+
margin: 0 auto;
22+
margin-top: 50px;
23+
box-shadow: 0 3px 10px gray;
4624
}
4725

48-
.profile-card{
49-
padding: auto;
50-
width: 500px;
51-
background-color: rgba(255,255,255,0.6);
52-
margin: 25px auto;
53-
border-radius: 15px;
54-
overflow: hidden;
55-
margin-bottom: 15px;
56-
box-shadow: 0 3px 10px gray;
57-
font-family: 'Lobster Two', cursive;
26+
#input {
27+
width: 70%;
28+
height: 100%;
29+
background-color: #fff;
30+
border: none;
31+
outline: none;
32+
padding: 5px 160px 5px 15px;
33+
box-sizing: border-box;
5834
}
5935

36+
#search {
37+
height: 100%;
38+
width: 30%;
39+
background-color: #000;
40+
color: white;
41+
cursor: pointer;
42+
text-transform: uppercase;
43+
}
6044

61-
.main-info{
62-
display: flex;
63-
flex-direction: column;
64-
align-items: center;
65-
border-bottom: 1px solid gray;
45+
.profile-card {
46+
width: 500px;
47+
background-color: rgba(255, 255, 255, 0.6);
48+
margin: 25px auto;
49+
border-radius: 15px;
50+
overflow: hidden;
51+
margin-bottom: 15px;
52+
box-shadow: 0 3px 10px gray;
53+
font-family: 'Lobster Two', cursive;
6654
}
6755

68-
#prof-img{
69-
height: 70px;
70-
width: auto;
71-
border-radius: 50%;
72-
margin: 10px 0;
73-
box-shadow: 0 3px 10px rgb(96, 93, 93);
56+
.main-info {
57+
display: flex;
58+
flex-direction: column;
59+
align-items: center;
60+
border-bottom: 1px solid gray;
7461
}
7562

76-
.name{
77-
margin-top: 15px;
78-
font-size: 25px;
63+
#prof-img {
64+
height: 70px;
65+
width: auto;
66+
border-radius: 50%;
67+
margin: 10px 0;
68+
box-shadow: 0 3px 10px rgb(96, 93, 93);
7969
}
8070

81-
#username{
82-
font-size: 20px;
83-
text-decoration: none;
84-
margin-top: 5px;
85-
margin-bottom: 8px;
71+
.name {
72+
margin-top: 15px;
73+
font-size: 25px;
8674
}
8775

88-
a{
89-
text-decoration: none;
76+
#username {
77+
font-size: 20px;
78+
text-decoration: none;
79+
margin-top: 5px;
80+
margin-bottom: 8px;
9081
}
9182

92-
.bio{
93-
width: 100%;
94-
text-align: center;
95-
padding: 20px 10px;
96-
font-size: 23px;
83+
a {
84+
text-decoration: none;
9785
}
9886

99-
#bio{
100-
font-weight: bold;
101-
color: rgb(28, 99, 109);
87+
.bio {
88+
width: 100%;
89+
text-align: center;
90+
padding: 20px 10px;
91+
font-size: 23px;
10292
}
10393

104-
p{
105-
margin-top: 12px;
94+
#bio {
95+
font-weight: bold;
96+
color: rgb(28, 99, 109);
10697
}
10798

108-
.follow{
109-
width: 100%;
110-
display: flex;
111-
height: 60px;
112-
border-top: 1px solid grey ;
113-
font-size: 20px;
99+
p {
100+
margin-top: 12px;
114101
}
115102

116-
.follow div{
117-
width: 50%;
118-
text-align: center;
119-
padding-top: 15px;
103+
.follow {
104+
width: 100%;
105+
display: flex;
106+
height: 60px;
107+
border-top: 1px solid grey;
108+
font-size: 20px;
120109
}
121110

122-
.followers{
123-
border-right: 1px solid grey;
111+
.follow div {
112+
width: 50%;
113+
text-align: center;
114+
padding-top: 15px;
124115
}
125116

126-
@media screen and (max-width: 600px){
127-
.profile-card{
128-
width: 450px;
129-
margin: 0 45px;
130-
margin-top: 30px;
131-
border-radius: 15px;
132-
overflow: hidden;
133-
margin-bottom: 15px;
134-
box-shadow: 0 3px 10px gray;
135-
font-family: 'Lobster Two';
136-
}
117+
.followers {
118+
border-right: 1px solid grey;
137119
}
138120

121+
@media screen and (max-width: 600px) {
122+
.profile-card {
123+
width: 450px;
124+
margin: 0 45px;
125+
margin-top: 30px;
126+
border-radius: 15px;
127+
overflow: hidden;
128+
margin-bottom: 15px;
129+
box-shadow: 0 3px 10px gray;
130+
}
131+
}

0 commit comments

Comments
 (0)