8000 added the necessary changes · Jithin2182/github-api-tutorial@48b5e77 · GitHub
[go: up one dir, main page]

Skip to content

Commit 48b5e77

Browse files
committed
added the necessary changes
1 parent e26954e commit 48b5e77

File tree

2 files changed

+36
-30
lines changed

2 files changed

+36
-30
lines changed

app.js

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,71 @@ 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-
40+
let root = document.getElementById('userRepos');
41+
while (root.firstChild) {
42+
root.removeChild(root.firstChild);
43+
}
4144
// Loop over each object in data array
4245
for (let i in data) {
4346

4447
// Get the ul with id of of userRepos
4548
let ul = document.getElementById('userRepos');
46-
49+
4750
// Create variable that will create li's to be added to ul
4851
let li = document.createElement('li');
49-
52+
5053
// Add Bootstrap list item class to each li
5154
li.classList.add('list-group-item')
52-
55+
5356
// Create the html markup for each li
5457
li.innerHTML = (`
5558
<p><strong>Repo:</strong> ${data[i].name}</p>
5659
<p><strong>Description:</strong> ${data[i].description}</p>
5760
<p><strong>URL:</strong> <a href="${data[i].html_url}">${data[i].html_url}</a></p>
5861
`);
59-
62+
6063
// Append each li to the ul
6164
ul.appendChild(li);
62-
65+
6366
}
6467

6568
}
66-
69+
6770
// Send the request to the server
6871
xhr.send();
69-
72+
7073
}

index.html

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
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>
67

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

1011
</head>
12+
1113
<body>
1214

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

20-
</ul>
21-
22-
<script src="app.js"></script>
22+
</ul>
23+
24+
<script src="app.js"></script>
2325
</body>
26+
2427
</html>

0 commit comments

Comments
 (0)
0