Code Monkey home page Code Monkey logo

dom-ajax-repo's Introduction

My Resume

  1. Fork and Clone this repo
  2. Run npm install then npm start (don't worry if you don't understand these commands now, we will explain them in Node module)
  3. When you run npm start, your browser should open the webpage immediately with hot reload enabled (i.e. when you change files, they will automatically be reflected on the page).

Github API

Github provides an API that provides a way for developers to retrieve information about in JSON format. We will spend most of our time using the repos endpoint which GETs the repos (repositories) of a specified user.

The documentation for the repos endpoint is available on: https://developer.github.com/v3/repos/

Now to the requirements.

Part 1: My Github Page

Requirement 1: Show my Repos

Given I am on the Resume site
When I click on My Github link
Then I should be presented with a list of repositories for my Github user

Requirement 2: Add a link to my repo

Given I am on the My Github page
When I am presented a list of my Repos
Then each repo should have a link to go to the Github page

Hint: If you're unsure about how to create a link from JavaScript, then check this StackOverflow post that has the answer.

Requirement 3: Display the number of Repos

Given I am on the Resume site
When I click on My Github link
Then I should be shown the number of repos in my Github account (in place of the X)

For the above requirements, you need to use the API:

GET https://api.github.com/users/*YOUR GITHUB USERNAME*/repos

Where do I write the code for Part 1 requirements?

Under the folder pages there is the HTML page my-github.html. Inside this file there are references to the script my-github.js and the CSS file my-github.css. These are the files that you will need to change for Part 1 tasks.

tasks 1-3 demo

Part 2: Show Pull Requests submitted against js-exercises

The API: GET https://api.github.com/repos/codeyourfuture/js-exercises/pulls

For the below 3 tasks, you'll need to work in: pull-requests.html & pull-requests.js

First, you need to link the html and JavaScript together. Go to the html page and add a script tag <script src="../js/pull-requests.js"></script>

Where do I write the code for Part 2 requirements?

The file pull-requests.js (that you just linked) is where you need to write the JavaScript to peform these requirements.

Requirement 4: Show ALL Pull Requests

Given I am on the Resume site
When I click on Pull Requests link
Then I should be shown a list of all Pull Requests title as a link
AND the link should take me to the Pull Request on Github (use html_url property from the API response)

Requirement 5: Show Only My Pull Requests

Update the code your wrote for the previous requirement to only show your own Pull Requests. Look at the JSON response and think how you can filter the response.

Requirement 6: Search for my friend's Pull Requests

Add a Search input on the My Pull Requests page. This allows the user to enter a Github username, and while they are searching, we should filter the displayed list of Pull Requests to only show that user's Pull Requests.

Given I am on the the Pull Requests page
When I enter a github user in the search box
Then I should be shown a list of Pull Requests title for that User only

task 6 demo

Hint: This code below listens to keyup event (The keyup event is fired when a key is released) and gets the last value from event parameter

// input is a DOM element we already have using "querySelector"
input.addEventListener('keyup', function(event) {
  const value = event.target.value
  console.log(value)
  // "value" will be the last value of the input field, and will be updated everytime the user types a new letter
})

For the above requirements, you need to use the API:

GET https://api.github.com/repos/codeyourfuture/js-exercises/pulls

hint: This request lists all the pull requests against js-exercises. How can you show only the ones that related to your Github username (How can you filter the list).

Part 3: Update My Github Page to show other Github user's repos

Requirement 7: Display someone else's repos in My Github

Update the My Github page to add a Search input and a Search button. This allows the user to enter a Github username, and when they click Search then the page should display the Pull Requests for that user.

Given I am on My Github page
When I enter a github username in the search box
And I click Enter
Then I should be shown a list of the repos for that user

(stretch goal: if the search box is empty then it should default to my User)

You will need to update the code in my-github.js to finish this final task.

task 7 demo

For the above requirements, you need to use the API:

GET https://api.github.com/users/*A GITHUB USERNAME*/repos

Where do I write the code for Part 3 requirements?

You will need to update the code in my-github.js to finish these tasks.

Bonus Task: Random API

Pick any random API from https://github.com/toddmotto/public-apis (only those that don't require authentication (have Auth No)) and create a page to use the API

Some ideas include The jokes API to get random programming jokes, or the Open Library API to search and retrieve information about Books, or Wordnik to get definitions and example sentences for words, or getting information about food and recipes from a variety of APIs etc...

Make sure to select an API that does not require Authentication, read its documentation for use with HTTP and to get the response in JSON.

dom-ajax-repo's People

Contributors

kabaros avatar llh1 avatar rarmatei avatar

Watchers

James Cloos avatar Raj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.