8000 initial commit · Lighterchu/github-api-tutorial@e26954e · GitHub
[go: up one dir, main page]
Skip to content

Commit e26954e

Browse files
timmywheelstimmywheels
committed
initial commit
0 parents  commit e26954e

File tree

2 files changed

+94
-0
lines changed

2 files changed

+94
-0
lines changed

‎app.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Get the GitHub username input form
2+
const gitHubForm = document.getElementById('gitHubForm');
3+
4+
// Listen for submissions on GitHub username input form
5+
gitHubForm.addEventListener('submit', (e) => {
6+
7+
// Prevent default form submission action
8+
e.preventDefault();
9+
10+
// Get the GitHub username input field on the DOM
11+
let usernameInput = document.getElementById('usernameInput');
12+
13+
// Get the value of the GitHub username input field
14+
let gitHubUsername = usernameInput.value;
15+
16+
// 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);
33+
34+
// When request is received
35+
// Process it here
36+
xhr.onload = function () {
37+
38+
// Parse API data into JSON
39+
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
45+
let ul = document.getElementById('userRepos');
46+
47+
// Create variable that will create li's to be added to ul
48+
let li = document.createElement('li');
49+
50+
// Add Bootstrap list item class to each li
51+
li.classList.add('list-group-item')
52+
53+
// Create the html markup for each li
54+
li.innerHTML = (`
55+
<p><strong>Repo:</strong> ${data[i].name}</p>
56+
<p><strong>Description:</strong> ${data[i].description}</p>
57+
<p><strong>URL:</strong> <a href="${data[i].html_url}">${data[i].html_url}</a></p>
58+
`);
59+
60+
// Append each li to the ul
61+
ul.appendChild(li);
62+
63+
}
64+
65+
}
66+
67+
// Send the request to the server
68+
xhr.send();
69+
70+
}

‎index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>GitHub API</title>
6+
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+
10+
</head>
11+
<body>
12+
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">
19+
20+
</ul>
21+
22+
<script src="app.js"></script>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)
0