@@ -3,68 +3,88 @@ 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-
41- // Loop over each object in data array
42- for ( let i in data ) {
43-
44- // Get the ul with id of of userRepos
40+ let root = document . getElementById ( 'userRepos' ) ;
41+ while ( root . firstChild ) {
42+ root . removeChild ( root . firstChild ) ;
43+ }
44+ if ( data . message === "Not Found" ) {
4545 let ul = document . getElementById ( 'userRepos' ) ;
46-
46+
4747 // Create variable that will create li's to be added to ul
4848 let li = document . createElement ( 'li' ) ;
49-
49+
5050 // Add Bootstrap list item class to each li
5151 li . classList . add ( 'list-group-item' )
52-
53- // Create the html markup for each li
52+ // Create the html markup for each li
5453 li . innerHTML = ( `
54+ <p><strong>No account exists with username:</strong> ${ username } ) ;
55+ // Append each li to the ul
56+ ul . appendChild ( li ) ;
57+ } else {
58+
59+ // Get the ul with id of of userRepos
60+ let ul = document . getElementById ( 'userRepos' ) ;
61+ let p = document . createElement ( 'p' ) ;
62+ p . innerHTML = ( `<p><strong>Number of Public Repos:${ data . length } )
63+ ul . appendChild ( p ) ;
64+ // Loop over each object in data array
65+ for ( let i in data ) {
66+ // Create variable that will create li's to be added to ul
67+ let li = document . createElement ( 'li' ) ;
68+
69+ // Add Bootstrap list item class to each li
70+ li . classList . add ( 'list-group-item' )
71+
72+ // Create the html markup for each li
73+ li . innerHTML = ( `
5574 <p><strong>Repo:</strong> ${ data [ i ] . name }
5675 <p><strong>Description:</strong> ${ data [ i ] . description }
5776 <p><strong>URL:</strong> <a href="${ data [ i ] . html_url } ${ data [ i ] . html_url }
5877 ` ) ;
59-
60- // Append each li to the ul
61- ul . appendChild ( li ) ;
62-
63- }
6478
79+ // Append each li to the ul
80+ ul . appendChild ( li ) ;
81+
82+ }
83+
84+ }
6585 }
66-
86+
6787 // Send the request to the server
6888 xhr . send ( ) ;
69-
89+
7090}
0 commit comments