@@ -3,68 +3,71 @@ const gitHubForm = document.getElementById('gitHubForm');
33
44// Listen for submissions on GitHub username input form
55gitHubForm . 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 } ;
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 }
5659 <p><strong>Description:</strong> ${ data [ i ] . description }
5760 <p><strong>URL:</strong> <a href="${ data [ i ] . html_url } ${ data [ i ] . html_url }
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}
0 commit comments