@@ -3,68 +3,71 @@ const gitHubForm = document.getElementById('gitHubForm');
3
3
4
4
// Listen for submissions on GitHub username input form
5
5
gitHubForm . addEventListener ( 'submit' , ( e ) => {
6
-
6
+
7
7
// Prevent default form submission action
8
8
e . preventDefault ( ) ;
9
9
10
10
// Get the GitHub username input field on the DOM
11
11
let usernameInput = document . getElementById ( 'usernameInput' ) ;
12
12
13
13
// Get the value of the GitHub username input field
14
- let gitHubUsername = usernameInput . value ;
14
+ let gitHubUsername = usernameInput . value ;
15
15
16
16
// Run GitHub API function, passing in the GitHub username
17
17
requestUserRepos ( gitHubUsername ) ;
18
18
19
19
} )
20
20
21
21
22
- function requestUserRepos ( username ) {
23
-
22
+ function requestUserRepos ( username ) {
23
+
24
24
// Create new XMLHttpRequest object
25
25
const xhr = new XMLHttpRequest ( ) ;
26
-
26
+
27
27
// GitHub endpoint, dynamically passing in specified username
28
28
const url = `https://api.github.com/users/${ username } /repos` ;
29
-
29
+
30
30
// Open a new connection, using a GET request via URL endpoint
31
31
// Providing 3 arguments (GET/POST, The URL, Async True/False)
32
32
xhr . open ( 'GET' , url , true ) ;
33
-
33
+
34
34
// When request is received
35
35
// Process it here
36
- xhr . onload = function ( ) {
37
-
36
+ xhr . onload = function ( ) {
37
+
38
38
// Parse API data into JSON
39
39
const data = JSON . parse ( this . response ) ;
40
-
40
+ let root = document . getElementById ( 'userRepos' ) ;
41
+ while ( root . firstChild ) {
42
+ root . removeChild ( root . firstChild ) ;
43
+ }
41
44
// Loop over each object in data array
42
45
for ( let i in data ) {
43
46
44
47
// Get the ul with id of of userRepos
45
48
let ul = document . getElementById ( 'userRepos' ) ;
46
-
49
+
47
50
// Create variable that will create li's to be added to ul
48
51
let li = document . createElement ( 'li' ) ;
49
-
52
+
50
53
// Add Bootstrap list item class to each li
51
54
li . classList . add ( 'list-group-item' )
52
-
55
+
53
56
// Create the html markup for each li
54
57
li . innerHTML = ( `
55
58
<p><strong>Repo:</strong> ${ data [ i ] . name } </p>
56
59
<p><strong>Description:</strong> ${ data [ i ] . description } </p>
57
60
<p><strong>URL:</strong> <a href="${ data [ i ] . html_url } ">${ data [ i ] . html_url } </a></p>
58
61
` ) ;
59
-
62
+
60
63
// Append each li to the ul
61
64
ul . appendChild ( li ) ;
62
-
65
+
63
66
}
64
67
65
68
}
66
-
69
+
67
70
// Send the request to the server
68
71
xhr . send ( ) ;
69
-
72
+
70
73
}
0 commit comments