GitHub:

Lets now integrate the GitHUb API and use it to get GitHubs users' repositories.

  1. The HTML code:
    1. The body:

      2. .center-form is the enclosing <div>, and is for the styling of the input element and results.

      octocat is the GitHub mascot and publicly facing user, while oninput="fetchGitHubInformation()" calls the function when data is inputted into the input box.

      The two <div> beneath is where we display the information we shall retrieve from GitHub:

      #gh-user-data is where the user's data will be displayed. The user's name, follow and following count and number of repos.

      #gh-repo-data will be the stylised repos.

    2. The head:

      3. In the <head> element we add the following:

      This is of course to tell our page to load the JavaScript page and thus be able to call fetchGitHubInformation(). We also need a jQuery script.


  2. The JavaScript:
    1. fetchGitHubInformation():

      2. We have created the function and given it the argument event. The function contains the variable username, which is assigned the val() being filled in in the inout field.

      If the username is empty (ie, like deleting the "octocat" text before filling it with a username stem), the HTML of the #gh-user-data filled with a <p> element containg the text "Please enter a GitHub username"

      In the second part of the function, #gh-repo-data is being filled with the <div> element classes stated in the code. These fetch the slider from the CSS, and the slider is displayed. (The CSS code can be viewed as a text file here.)


    2. Pomises:

      3. A promise in code is very much like a promise in real life:

      .when() you do this, .then() I will do that.

      It is this that we now insert into the code:

      The .when() block says that when the jQuery command getJSON finds the username being tyoped into the input box on the page, .then() it should action either of the arguments response or errorResponse of its function:

      function(response)

      Fill the #gh-user-data div's with the function userInformationHTML() with the userData information, that being the user's name and @ tag.

      function(errorResponse)

      either fill the #gh-user-data div with "No info found for t"user-name")" if a 404 error is returned, or

      display in console the error number, and return the appropriate responseJSON.message message. This is a good way to find errors when debugging code.


    3. userInformationHTML():

      4. Above is mentioned the function userInformationHTML() that contains the promises. But this function has not yet been written. This is our next step. It will be written above the existing function fetchGitHubInformation().

      This function simply fills the div #gh-user-data with tags to be populated with the user's name, @ tag, avatar etc. Here is a list of the different properties one can return.


    4. Getting the repositories:

      5. We add a second command to the .when().then() promise.:

      Notice that the variables userData and repoData have been assigned an index#. This is because the .when() method packs its response as [array], and thus we need to call its first index.


    5. repoInformationHTML():

      6. Now, we need to display the repo data. So we create a function and call it repoInformationHTML(repos), where (repos) is the argument. We call it this as the function will call for the repo information, and then display it in the HTML of this page.

      The function calls the Object "repos" which is the list of repositories for that user on GitHub. The data is returned as an [array], thus we can both find its .length and iterate through it, and this is what .map() is doing. For each of the entries in repos, in other words, for each repo, the map function is returning a li entry. These entries are an [array], thus the variable listItemsHTML is being converted to a "string", with each separating comma of the "string" being replaced, using the .join("") method.


    6. Bug squashing:

      7. There is a bug in the code so far, in that when the input box is cleared, the last entry's repos are still displayed. So lets squash the bug. To do so, we just need to clear the entries with an empty "string" for when the input box is empty. Within fetchGitHubInformation(event), we insert these two lines of code at the beginning of the function:

      Now, we want the default GitHub username "octocat" displayed when we load the page. For this, we can add one line of jQuery outside of the functions at the bottom of all of the code:

      Thus, when the page loads, the jQuery runs the function fetchGitHubInformation(), which then calls the value="octocat" within the code of the HTML input element.


    7. API throttling:

      8. The Gitub API throttles access to it if one tries to access it too often. Because of this, we need to add a more friendly message for the user if (s)he tries to retrieve data too often. The error that is returned if we access too often is a 403 error. Thus, we need to add an if statement containing a message to the user if a 403 error is returned:

      So what does this mean?

      1. let resetTime = new Date

        2. Assigns the variable resetTime as a new time Object

      2. (errorResponse.getResponseHeader(`X-RateLimit-Reset`)

        3. Tells that new time Object to be the result X-RateLimit-Reset that is given in the responseHeaders of the username's API entry.

      3. *1000);

        4. The time given is in the UNIX timestamp format. This is the number of seconds elapsed since 01/01/1970. As JavaScript works in milliseconds since that date, we multiply the UNIX timestamp by 1000.

      4. resetTime.toLocaleTimeString()

        5. Converts the UNIX timestamp to local time.

      Thus, instead of seeing garbled numbers appear in front of us when we exceed the number of requests allowed, the error message we see on the screen is presented to us in our local time. So, we can try again, for example, at 17:31.26...

      But, how do we know where to look for these details?

      We use cURL.

      We type into the console:

And the final result:

APIs: Google Maps
SDKs: emailJS