@@ -3,68 +3,88 @@ 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
-
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" ) {
45
45
let ul = document . getElementById ( 'userRepos' ) ;
46
-
46
+
47
47
// Create variable that will create li's to be added to ul
48
48
let li = document . createElement ( 'li' ) ;
49
-
49
+
50
50
// Add Bootstrap list item class to each li
51
51
li . classList . add ( 'list-group-item' )
52
-
53
- // Create the html markup for each li
52
+ // Create the html markup for each li
54
53
li . innerHTML = ( `
54
+ <p><strong>No account exists with username:</strong> ${ username } </p>` ) ;
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 } </p>` )
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 = ( `
55
74
<p><strong>Repo:</strong> ${ data [ i ] . name } </p>
56
75
<p><strong>Description:</strong> ${ data [ i ] . description } </p>
57
76
<p><strong>URL:</strong> <a href="${ data [ i ] . html_url } ">${ data [ i ] . html_url } </a></p>
58
77
` ) ;
59
-
60
- // Append each li to the ul
61
- ul . appendChild ( li ) ;
62
-
63
- }
64
78
79
+ // Append each li to the ul
80
+ ul . appendChild ( li ) ;
81
+
82
+ }
83
+
84
+ }
65
85
}
66
-
86
+
67
87
// Send the request to the server
68
88
xhr . send ( ) ;
69
-
89
+
70
90
}
0 commit comments