-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
98 lines (81 loc) · 2.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Teste Inlog Front-end Developer - Github Api</title>
</head>
<style>
.gh-user-repos {
text-align: center;
width: 500px;
margin: auto;
}
.gh-user-repos div {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
</style>
<body>
<!-- Este código é apenas um exemplo mas pode ser utilizado como base ;)-->
<div id="gh-user-repos" class="gh-user-repos">
</div>
<script src="credentials.js"></script>
<script>
loadUserRepos();
function loadUserRepos() {
getUserRepos('octocat')
.then((result) => {
let htmlContainer = document.getElementById('gh-user-repos');
result.forEach((item, idx) => {
htmlContainer.insertBefore(renderTemplate(idx), htmlContainer.firstChild);
});
function renderTemplate(idx) {
let container = document.createElement('div');
container.innerHTML = `
<a href="${result[idx].html_url}">${result[idx].full_name}</a>
<p>language: ${result[idx].language}</p>
<p>stars: ${result[idx].stargazers_count}</p>
<p>forks: ${result[idx].forks}</p>
<p>issues: ${result[idx].forks}</p>`;
return container;
}
})
.catch((fail) => console.log(fail));
}
function getUserRepos(username) {
let queryString = `/users/${username}/repos`;
return new Promise(function (resolve, reject) {
query(queryString).then(success).catch(fail);
function success(result) {
return resolve(result);
}
function fail(reason) {
return reject(reason);
}
});
}
function query(path) {
let apiUrl = 'https://api.github.com' + path;
let auth = btoa(credentials.username + ":" + credentials.password);
let myHeaders = new Headers({
"Accept": "application/vnd.github.v3+json",
"Authorization": "Basic " + auth
});
let myInit = {
method: 'GET',
headers: myHeaders,
};
return fetch(apiUrl, myInit)
.then(function (response) {
// Converter para JSON
return response.json();
})
.then(function (obj) {
// obj /retorna um objeto javascript
return obj;
});
}
</script>
</body>
</html>