GitHub REST APIs with vanilla JavaScript
Today we are going to use Github REST APIs, fetch data with Ajax call, and display data using vanilla JavaScript on the same page without a page reload.
Don’t like vanilla JavaScript or want to learn the same thing in jQuery? Then read my GitHub REST API with jQuery here.
Prerequisite:
Before moving ahead make sure you are ready with the things that are mentioned below.
- Intermediate knowledge about JavaScript & DOM (Document Object Model)
- Basic understanding about what is an API and JSON
- Basic knowledge of ECMAScript, I am not going to use a lot of ES features.
- Time and patience 😃
What is the project about?
So, we are going to build an user profile card with the APIs something similar to flairs in stackexchange website. In this project I am not going to focus on styling the frontend part with CSS and the full source code will be linked at the end. So, that you can learn at your own pace.
Without wasting more time, let’s hack it…
Step #1: HTML form to create a user card
To keep the tutorial simple I will keep the markup very simple.
The input box gets the username and the button will submit the form. Then an ajax call will retrieve data and set the data inside the result element (#result).
I used few class for styling purpose. And the attributes like auto complete is optional. Modify the form as per your requirement.
Step #2: The Ajax Request
The value of the input box is taken with the querySelector in the line #2 and the variable username is used in the APIs url to get dynamic data.
And I used interpolation to display the data from the API. This are few data from the API you can pull more data from the API like company, email, organizations_url, etc.
Stuck somewhere?? Check the finished product here, make sure you clap for this story if this helped you.
