Skip to content

Commit 298e8f1

Browse files
timmywheelstimmywheels
committed
update tutorial to use fetch instead of xhr
1 parent d7ed480 commit 298e8f1

4 files changed

Lines changed: 45 additions & 73 deletions

File tree

‎app.js‎

Lines changed: 34 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -14,77 +14,51 @@ gitHubForm.addEventListener('submit', (e) => {
1414
let gitHubUsername = usernameInput.value;
1515

1616
// Run GitHub API function, passing in the GitHub username
17-
requestUserRepos(gitHubUsername);
18-
19-
})
20-
21-
22-
function requestUserRepos(username) {
23-
24-
// Create new XMLHttpRequest object
25-
const xhr = new XMLHttpRequest();
26-
27-
// GitHub endpoint, dynamically passing in specified username
28-
const url = `https://api.github.com/users/${username}/repos`;
29-
30-
// Open a new connection, using a GET request via URL endpoint
31-
// Providing 3 arguments (GET/POST, The URL, Async True/False)
32-
xhr.open('GET', url, true);
17+
requestUserRepos(gitHubUsername)
18+
.then(response => response.json()) // parse response into json
19+
.then(data => {
20+
// update html with data from github
21+
for (let i in data) {
22+
// Get the ul with id of userRepos
3323

34-
// When request is received
35-
// Process it here
36-
xhr.onload = function() {
24+
if (data.message === "Not Found") {
25+
let ul = document.getElementById('userRepos');
3726

38-
// Parse API data into JSON
39-
const data = JSON.parse(this.response);
40-
let root = document.getElementById('userRepos');
41-
while (root.firstChild) {
42-
root.removeChild(root.firstChild);
43-
}
44-
if (data.message === "Not Found") {
45-
let ul = document.getElementById('userRepos');
27+
// Create variable that will create li's to be added to ul
28+
let li = document.createElement('li');
4629

47-
// Create variable that will create li's to be added to ul
48-
let li = document.createElement('li');
30+
// Add Bootstrap list item class to each li
31+
li.classList.add('list-group-item')
32+
// Create the html markup for each li
33+
li.innerHTML = (`
34+
<p><strong>No account exists with username:</strong> ${gitHubUsername}</p>`);
35+
// Append each li to the ul
36+
ul.appendChild(li);
37+
} else {
4938

50-
// Add Bootstrap list item class to each li
51-
li.classList.add('list-group-item')
52-
// Create the html markup for each li
53-
li.innerHTML = (`
54-
<p><strong>No account exists with username:</strong> ${username}</p>`);
55-
// Append each li to the ul
56-
ul.appendChild(li);
57-
} else {
39+
let ul = document.getElementById('userRepos');
5840

59-
// Get the ul with id of of userRepos
60-
let ul = document.getElementById('userRepos');
61-
let p = document.createElement('p');
62-
p.innerHTML = (`<p><strong>Number of Public Repos:${data.length}</p>`)
63-
ul.appendChild(p);
64-
// Loop over each object in data array
65-
for (let i in data) {
66-
// Create variable that will create li's to be added to ul
67-
let li = document.createElement('li');
41+
// Create variable that will create li's to be added to ul
42+
let li = document.createElement('li');
6843

69-
// Add Bootstrap list item class to each li
70-
li.classList.add('list-group-item')
44+
// Add Bootstrap list item class to each li
45+
li.classList.add('list-group-item')
7146

72-
// Create the html markup for each li
73-
li.innerHTML = (`
47+
// Create the html markup for each li
48+
li.innerHTML = (`
7449
<p><strong>Repo:</strong> ${data[i].name}</p>
7550
<p><strong>Description:</strong> ${data[i].description}</p>
7651
<p><strong>URL:</strong> <a href="${data[i].html_url}">${data[i].html_url}</a></p>
7752
`);
7853

79-
// Append each li to the ul
80-
ul.appendChild(li);
81-
54+
// Append each li to the ul
55+
ul.appendChild(li);
56+
}
8257
}
58+
})
59+
})
8360

84-
}
85-
}
86-
87-
// Send the request to the server
88-
xhr.send();
89-
90-
}
61+
function requestUserRepos(username) {
62+
// create a variable to hold the `Promise` returned from `fetch`
63+
return Promise.resolve(fetch(`https://api.github.com/users/${username}/repos`));
64+
}

‎assets/favicon.ico‎

7.53 KB
Binary file not shown.

‎assets/favicon.png‎

-22.3 KB
Binary file not shown.

‎index.html‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,23 @@
44
<head>
55
<meta charset="UTF-8">
66
<title>GitHub API</title>
7-
<link rel="icon" type="image/png" href="assets/favicon.png">
7+
<link rel="icon" type="image/png" href="assets/favicon.ico">
88

99
<!-- Import the Bootstrap CSS CDN -->
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
11+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
1112

1213
</head>
1314

1415
<body>
1516

16-
<h3 class="text-center mt-5">GitHub API</h3>
17-
<form id="gitHubForm" class="form-inline mx-auto" style="width: 280px">
18-
<input id="usernameInput" class="form-control mb-5" type="text" name="username" placeholder="GitHub Username">
19-
<input type="submit" class="btn btn-primary ml-2 mb-5" value="Submit">
20-
</form>
21-
<ul id="userRepos" class="list-group mx-auto mb-5" style="width: 500px">
22-
23-
</ul>
24-
25-
<script src="app.js"></script>
17+
<h3 class="text-center mt-5">GitHub API</h3>
18+
<form id="gitHubForm" class="form-inline mx-auto" style="width: 300px">
19+
<input id="usernameInput" class="form-control mb-5" type="text" name="username" placeholder="GitHub Username">
20+
<input type="submit" class="btn btn-primary ml-2 mb-5" value="Submit">
21+
</form>
22+
<ul id="userRepos" class="list-group mx-auto mb-5" style="width: 500px"></ul>
23+
<script src="app.js"></script>
2624
</body>
2725

28-
</html>
26+
</html>

0 commit comments

Comments
 (0)