Skip to content

Instantly share code, notes, and snippets.

@theRemix
Forked from mrbarbasa/github_api_intro.md
Last active August 29, 2015 14:17
Show Gist options
  • Save theRemix/af582ee4865e58e841d9 to your computer and use it in GitHub Desktop.
Save theRemix/af582ee4865e58e841d9 to your computer and use it in GitHub Desktop.
Intro to Github API Exercise

Intro to GitHub API Exercise

  1. In your DevLeague temp directory, create a directory called github_api_intro.

  2. In github_api_intro, create the following files and directories: js/app.js, css/styles.css (optional), index.html.

  3. Create the basic HTML5 structure and include the JS and CSS files in your index.html. Be sure to reference jQuery before the js/app.js file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Run your app using the http-server command.

  1. Within the <body> tags, create a <div> containing an <input> type text with id username_field and a <button> with an id of request_button the content "Request Repos".

  2. In js/app.js, write an Immediately Invoking Anonymous Function. The rest of your JS code should be written within this function.

  3. Create an asynchronous GET request to the following URL to retrieve all the repos from the devleague organization:

https://api.github.com/orgs/devleague/repos

Note: Visit the URL in your browser to see what data is returned or console.log the data.

  1. With the data retrieved from step 6, display the name of each repo returned as a list on the page.

  2. Create a click event listener for the request_button you implemented in step 4 so that it retrieves the value of the username_field (this will be a GitHub username).

  3. Then create a function listUserRepos that takes a GitHub username as a param and fires an async GET request to the following URL. Then add an event listener that listens for click events on the request_button and will call the listUserRepos function.

https://api.github.com/users/:username/repos

Note: Replace :username above with the GitHub user's username. (from username_field)

  1. Inside the listUserRepos function, with the data retrieved from step 9, display the username as an <h2> and then list the names of the user's repos below it.

  2. Create a GET request to list all the commit messages for a single repo. Display this data to the page.

https://api.github.com/repos/:owner/:repo/commits

Note: Replace :owner with a GitHub user or organization of your choice and :repo with the name of a repo of your choice.

  1. Create a GET request to list all the commit messages authored by Jon theRemix. Display this data to the page.
https://api.github.com/repos/devleague/100-Specs/commits?author=theRemix

Note: The repo above has multiple authors. If you do not specify an author param, you will receive commits by all authors of the repo.

  1. Refactor your GET requests into a single function (call listUserRepos something else) that fires any GET request to the GitHub API and then displays a list of items with the data retrieved.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment