Skip to content

Commit 5ae9adf

Browse files
DaniloMirandaNGDaniloMirandaNG
committed
refatoração de código
1 parent d2e3ba5 commit 5ae9adf

File tree

3 files changed

+84
-38
lines changed

3 files changed

+84
-38
lines changed

‎css/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ body, html {
22
height: 100%;
33
}
44

5-
section img {
5+
.avatar {
66
height: 188px;
77
width: 188px;
88
}

‎index.html

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,46 @@
3636
</div>
3737
</section>
3838

39-
<div id="loadData" class="container mt-5 d-none">
39+
<section id="data" class="container mt-5">
40+
</section>
41+
42+
<div id="loadRepositories" class="container d-none">
4043
<img src="images/skeleton.gif" class="img-fluid">
4144
</div>
4245

43-
<section id="data" class="container mt-5 d-none">
44-
<div class="card text-center">
45-
<div class="card-header text-muted"></div>
46-
<div class="card-body">
47-
<img class="img-fluid">
48-
</div>
49-
<div class="card-footer">
50-
<i class="fas fa-user-friends"></i>&nbsp;<span></span> |
51-
<i class="fas fa-people-arrows"></i>&nbsp;<span></span> |
52-
<i class="fas fa-sort-amount-up"></i>&nbsp;<span></span>
53-
</div>
54-
</div>
46+
<section class="container mt-5 h-75">
47+
<div id="repositories" class="row"></div>
5548
</section>
5649

57-
<div id="loadRepositories" class="container mt-5 d-none">
58-
<img src="images/skeleton.gif" class="img-fluid">
59-
</div>
50+
<footer>
51+
<div class="container">
52+
<hr>
53+
<div class="row">
54+
<div class="col-sm-6 d-flex align-items-center mb-3 mb-sm-0">
55+
<span class="lead"><i class="fas fa-search"></i> Search github profiles</span>
56+
</div>
57+
58+
<div class="col-sm-4 ml-auto">
59+
<p class="text-muted mb-1">Useful links</p>
60+
<a class="btn btn-outline-dark btn-block btn-lg" href="https://www.linkedin.com/in/danilo-miranda-877851135/" target="_blank">
61+
<i class="fab fa-linkedin-in fa-lg"></i>
62+
</a>
63+
<a class="btn btn-outline-dark btn-block btn-lg" href="https://github.com/TechFring" target="_blank">
64+
<i class="fab fa-github fa-lg"></i>
65+
</a>
66+
</div>
67+
</div>
6068

61-
<section id="repositories"></section>
69+
<div class="row">
70+
<div class="col my-4">
71+
<blockquote class="blockquote text-center">
72+
<footer class="blockquote-footer">Developed by <cite>Danilo Miranda Ferreira</cite>
73+
</footer>
74+
</blockquote>
75+
</div>
76+
</div>
77+
</div>
78+
</footer>
6279

6380
<!-- Optional JavaScript -->
6481
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

‎js/requests.js

Lines changed: 49 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,39 @@ function searchProfile(username) {
66
beforeSend: () => {
77
toggleClassSpinner();
88
$('#spn').attr('role', 'status');
9-
10-
$('#loadData').removeClass('d-none');
11-
$('#data').addClass('d-none');
9+
$('#data').append('<img src="images/skeleton.gif" class="img-fluid">');
1210
},
1311
success: data => {
12+
console.log(data);
1413
toggleClassSpinner();
1514
$('#spn').attr('role', '');
1615

17-
$('#loadData').addClass('d-none')
18-
$('#data').removeClass('d-none');
16+
$('#data').empty();
1917

20-
$('#data').find('.card-header').text(data.login);
21-
$('#data').find('img').attr('src', data.avatar_url);
22-
$('#data').find('span:first').text(`${data.followers} followers`);
23-
$('#data').find('span:odd').text(`${data.following} following`);
24-
$('#data').find('span:last').text(`${data.public_repos} repositories`);
18+
$('#data').append(
19+
`<div class="card text-center">
20+
<div class="card-header text-muted">
21+
<a href="${data.html_url}" target="_blank">
22+
<span>${data.login} <i class="fas fa-link"></i></span>
23+
</a>
24+
</div>
25+
<div class="card-body">
26+
<a href="${data.html_url}" target="_blank">
27+
<img src="${data.avatar_url}" class="img-fluid avatar">
28+
</a>
29+
</div>
30+
<div class="card-footer">
31+
<span><i class="fas fa-user-friends"></i> ${data.followers} followers |</span>
32+
<span><i class="fas fa-people-arrows"></i> ${data.following} following |</span>
33+
<span><i class="fas fa-sort-amount-up"></i> ${data.public_repos} repositories</span>
34+
</div>
35+
</div>`
36+
);
2537
},
2638
error: () => {
2739
toggleClassSpinner();
2840
$('#spn').attr('role', '');
29-
30-
$('#loadData').addClass('d-none');
31-
$('#data').addClass('d-none');
41+
$('#data').empty();
3242
alertify.error('Profile not found');
3343
}
3444
});
@@ -40,18 +50,37 @@ function searchRepositories(username) {
4050
url: `https://api.github.com/users/${username}/repos`,
4151
dataType: 'json',
4252
beforeSend: () => {
43-
$('#loadRepositories').removeClass('d-none');
44-
$('#repositories').addClass('d-none');
53+
$('#repositories').append('<img src="images/skeleton.gif" class="img-fluid">');
4554
},
4655
success: data => {
47-
console.log(data);
56+
$('#repositories').empty();
57+
58+
data.forEach((v, i) => {
59+
if (i < 6) {
60+
$('#repositories').append(
61+
`<div class="col-md-6 col-lg-4 mb-4">
62+
<div class="card">
63+
<div class="card-header text-center">
64+
<i class="fas fa-star"></i> ${v.stargazers_count}
65+
</div>
66+
<div class="card-body">
67+
<p>Description: ${v.description}</p>
68+
<p>Language: ${v.language}</p>
69+
<a class="btn btn-outline-dark" href="${v.html_url}" target="_blank">Go to repository</a>
70+
</div>
71+
<div class="card-footer text-center">
72+
<span class="text-muted">${v.name}</span>
73+
</div>
74+
</div>
75+
</div>`
76+
);
77+
}
78+
});
4879

49-
$('#loadRepositories').addClass('d-none');
50-
$('#repositories').removeClass('d-none');
80+
$('#repositories').parent().prepend('<p class="lead">Repositories</p>');
5181
},
5282
error: error => {
53-
$('#loadRepositories').addClass('d-none');
54-
$('#repositories').removeClass('d-none');
83+
$('#repositories').empty();
5584
}
5685
});
5786
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy