This repository is for anyone around the globe who wants to start their open-source journey with Hacktoberfest. All you need to do is to call any Public APIs and show us its response on the main page using Javascript Fetch API. It could be quotes, cat images, bitcoin - anything. Design it the way you want! Complete your Hacktoberfest challenge this year.
Hacktoberfest is a global challenge organized by DigitalOcean. It encourages participation in giving back to the open-source community by completing pull requests and participating in events. You can sign up anytime between 1 and October 31. Pull requests can be submitted to this repo or any opted-in GitHub or GitLab repo. To get a T-shirt ๐, you must make 4 approved pull requests (PRs). ๐
Here, we have mentioned the instructions to set up git. If you don't already know what Git is, check out this blog series on iRead.
- Login / Sign-up to Github.
- Download and install Git.
- Configure git
- Launch terminal or command promt.
- Run the commands.
git config --global user.name "Your name"
git config --global user.email "Your email address"
- Optionally, you can setup ssh keys to authenticate easily.
API stands for Application Programming Interface. Imagine what happens at a restaurant ๐ด - You order your favorite food ๐ ( Request ), the waiter serves your order when it's ready (API Response). You are not aware of how the food is prepared. Similarly, you request data from an API, and the API returns it to you. You need not be aware of what's happening behind the scenes. Now, anybody who knows where the restaurant is, and how to communicate with the waiter can place an order. Similarly, anyone can consume an API even computer programs ๐ค.
Whenever you visit Random APIs you would see a new quote, I could have manually created a list of 1000 quotes and picked up anyone at random but instead, I can just consume Advice Slip
API which saves me all the trouble of manually creating the list and offers way more quotes that I could have added.
There are amazing people out there, who have created a large number of awesome APIs - random Cat pictures ๐ , random dogs pictures ๐ถ, breaking bad quotes, harry potter quotes, bitcoin prices ๐ฐ , NASA space images, etc. You can find all of these and many more at Public APIs repository.
For this project, you need to pick up any API you like from this list, read about how you can use it, try calling it and understanding its response, and then consuming it your react components. We are extremely excited to see what API you choose and what you make with it! ๐
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
- Go to the top of this page and click on the "Fork" button.
This would make a copy of this repository in your account. You will see <your_username>/Random-APIs
.
-
Clone the repository
- Click on the "Code" button and copy the URL.
- On your local machine, run terminal / cmd and type
git clone <copied_url>
. This creates a new folder named "Random-APIs". - Go to the folder.
// Now tailwindcss works with this project npm install / yarn //either use yarn or npm to install dependencies npm run build / yarn build //build tailwind styles
-
Make sure that the main branch of your fork is even with this repo.
-
Otherwise, click on the "Fetch and merge" button and go to the project folder on your computer and run
git pull
to update the changes in your local repo. -
Launch a terminal and run the commands
git branch <your_branch_name>
- This creates a new branch. The branch name should be similar to the API name.git checkout <your_branch_name>
- Checkout to your branch. This helps you work in parallel but without disturbing files on the main branch.
- Go to the Public APIs repository.
- Browse through the list and pick any.
- The chosen API should have HTTPS enabled.
- Think of some creative use-case of this API, something you would like everybody to see.
- Now, Open VS code or any text editor.
- Go to
main.js
file. - Create a new fetch api call after the last one, as:
loading.style.display = "block";
fetch("https://api.adviceslip.com/advice", {
method: "GET",
})
.then((res) => res.json())
.then((data) => {
let response = `
<div class="col-lg-12 mb-4">
<div class="card">
<div class="card-body">
<h4 class="card-title">Random Advice API</h4>
<h5 class="card-text mt-4">${data.slip.advice}</h5>
<br />
<a href="https://github.com/ashutoshkrris" class="username">
<img
src="https://avatars.githubusercontent.com/u/47353498?v=4"
alt="DP"
class="rounded-circle img-fluid mr-2"
width="40"
height="40"/>ashutoshkrris</a>
<a href="https://api.adviceslip.com/"
class="btn btn-outline-dark btn-sm"><i class="fa fa-link mr-2" aria-hidden="true"></i> Advice Slip</a>
</div>
</div>
</div>
`;
loading.style.display = "none";
responsesBody.innerHTML += response;
});
-
Make sure you make these required changes:
-
Go through the documentation of your API. It would contain instructions on its usage. Use those instructions to create a fetch request. Take help from randomQuotes component. This step would be different for all of us. Don't worry, API documentation and code in other components would give you enough clues. Consume the API and display its response in your component.
-
Please do not add any API which requires API Key to access it.
-
Great, if you have done the above part Congratulations! ๐
-
Run the project to verify your code works as expected.
- Open a terminal and run these commands
git add .
- stage your changes.git commit -m <your commit message>
- commit changesgit checkout main
- checkout back to the main branchgit push --all
- push all changes to Github.
- Go to your fork, you would see a pop-up asking you to make a PR. Click on it.
- Write a small description and complete the checklist. Click on "Make a PR".
Wait for it to get approved and merged. Awesome, you have made your first contribution. To make a further contribution, you need to create new branches. Your next contributions could be improvements to previous work or a new API call.