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 } ;
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 }
56+ <p><strong>Description:</strong> ${ data [ i ] . description }
57+ <p><strong>URL:</strong> <a href="${ data [ i ] . html_url } ${ data [ i ] . html_url }
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