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
+ }
0 commit comments