Skip to content

Commit b076b93

Browse files
jfullstackdevjfullstackdev
authored
Merge pull request #1 from timwheelercom/master
changes
2 parents e26954e + 00ebefe commit b076b93

File tree

4 files changed

+64
-38
lines changed

4 files changed

+64
-38
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# github-api-tutorial
2+
👨‍💻⚡️🛠 A Quick Tutorial on Building a Simple Web App w/ the GitHub API

‎app.js‎

Lines changed: 45 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,88 @@ const gitHubForm = document.getElementById('gitHubForm');
33

44
// Listen for submissions on GitHub username input form
55
gitHubForm.addEventListener('submit', (e) => {
6-
6+
77
// Prevent default form submission action
88
e.preventDefault();
99

1010
// Get the GitHub username input field on the DOM
1111
let usernameInput = document.getElementById('usernameInput');
1212

1313
// Get the value of the GitHub username input field
14-
let gitHubUsername = usernameInput.value;
14+
let gitHubUsername = usernameInput.value;
1515

1616
// Run GitHub API function, passing in the GitHub username
1717
requestUserRepos(gitHubUsername);
1818

1919
})
2020

2121

22-
function requestUserRepos(username){
23-
22+
function requestUserRepos(username) {
23+
2424
// Create new XMLHttpRequest object
2525
const xhr = new XMLHttpRequest();
26-
26+
2727
// GitHub endpoint, dynamically passing in specified username
2828
const url = `https://api.github.com/users/${username}/repos`;
29-
29+
3030
// Open a new connection, using a GET request via URL endpoint
3131
// Providing 3 arguments (GET/POST, The URL, Async True/False)
3232
xhr.open('GET', url, true);
33-
33+
3434
// When request is received
3535
// Process it here
36-
xhr.onload = function () {
37-
36+
xhr.onload = function() {
37+
3838
// Parse API data into JSON
3939
const data = JSON.parse(this.response);
40-
41-
// Loop over each object in data array
42-
for (let i in data) {
43-
44-
// Get the ul with id of of userRepos
40+
let root = document.getElementById('userRepos');
41+
while (root.firstChild) {
42+
root.removeChild(root.firstChild);
43+
}
44+
if (data.message === "Not Found") {
4545
let ul = document.getElementById('userRepos');
46-
46+
4747
// Create variable that will create li's to be added to ul
4848
let li = document.createElement('li');
49-
49+
5050
// Add Bootstrap list item class to each li
5151
li.classList.add('list-group-item')
52-
53-
// Create the html markup for each li
52+
// Create the html markup for each li
5453
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 {
58+
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');
68+
69+
// Add Bootstrap list item class to each li
70+
li.classList.add('list-group-item')
71+
72+
// Create the html markup for each li
73+
li.innerHTML = (`
5574
<p><strong>Repo:</strong> ${data[i].name}</p>
5675
<p><strong>Description:</strong> ${data[i].description}</p>
5776
<p><strong>URL:</strong> <a href="${data[i].html_url}">${data[i].html_url}</a></p>
5877
`);
59-
60-
// Append each li to the ul
61-
ul.appendChild(li);
62-
63-
}
6478

79+
// Append each li to the ul
80+
ul.appendChild(li);
81+
82+
}
83+
84+
}
6585
}
66-
86+
6787
// Send the request to the server
6888
xhr.send();
69-
89+
7090
}

‎assets/favicon.png‎

22.3 KB
Loading

‎index.html‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>GitHub API</title>
5+
<meta charset="UTF-8">
6+
<title>GitHub API</title>
7+
<link rel="icon" type="image/png" href="assets/favicon.png">
68

7-
<!-- Import the Bootstrap CSS CDN -->
8-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9+
<!-- 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">
911

1012
</head>
13+
1114
<body>
1215

13-
<h3 class="text-center mt-5">GitHub API</h3>
14-
<form id="gitHubForm" class="form-inline mx-auto" style="width: 280px">
15-
<input id="usernameInput" class="form-control mb-5" type="text" name="username" placeholder="GitHub Username">
16-
<input type="submit" class="btn btn-primary ml-2 mb-5" value="Submit">
17-
</form>
18-
<ul id="userRepos" class="list-group mx-auto mb-5" style="width: 500px">
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">
1922

20-
</ul>
21-
22-
<script src="app.js"></script>
23+
</ul>
24+
25+
<script src="app.js"></script>
2326
</body>
27+
2428
</html>

0 commit comments

Comments
 (0)