fernandoCardona / lab-ajax-crud-characters

LAB | Axios CRUD exercise

Introduction

In this exercise, we will use all what we have learned about APIs and how to connect an application to them through Axios.

Requirements

• Fork this repo
• Then clone this repo

Submission

• Upon completion, run the following commands:

$ git add .
$ git commit -m "done"
$ git push origin master

• Create Pull Request so your TAs can check up your work.

Instructions

Today we are going to work on our AJAX skills. To do this we will connect to an API and with its resources we will perform a set of CRUD actions.

Iteration 1: The API

Please navigate to the following address (https://minions-api.herokuapp.com/) to learn about the API endpoints.

Iteration 2: The APIHandler.js file

We have our API running, so now we will construct a class APIHandler to deal with the Axios calls. The only responsibility of this class is to display the JSON result that comes from the API, or give the needed information to the API via a function argument.

The functionalities of the APIHandler class are:

• Get all the characters info from https://minions-api.herokuapp.com/characters
• Get a single character info from https://minions-api.herokuapp.com/characters/:id
• Create a single character posting the data to https://minions-api.herokuapp.com/characters
• Delete a single character through his id in https://minions-api.herokuapp.com/characters/:id
• Edit a single character through his id in https://minions-api.herokuapp.com/characters/:id

You have to create an Axios call for each of these actions. You can create as many functions as you need inside the class, but remember this class should only manage the API request and display the resulting value.

Micro-advice

To make sure everything is working, use POSTMAN.

In this iteration, it's enough to show results in the console.

Iteration 3: The index.js file

Once we have the results served by the API in the application, we will create the events that will handle with the CRUD operations.

Fetch all characters

Retrieve all the available characters in the API and show them in the application. In order to do that, we need to:

• Create a button (Fetch all in the image above) that calls a function in the APIHandler.
• The function will return a JSON object with all the characters.
• Get the data and show the characters. Finally, with JavaScript, we will create a structure similar to a card (image above) to show detailed info about each character.

Fetch one character

Following the same idea as with fetching all, to retrieve a single character's data we need to:

• Create a button (Fetch one in the image above) to, through an input field, get the id of an existing character.
• Search that character in the API with https://minions-api.herokuapp.com/characters/:id
• Get the data and show the character info as a card.

Delete one character

To be able to delete a character from the API database, we need to:

• Create a button (Delete one in the image above) to get the id of the character we want to delete.
• Delete that character in the API with https://minions-api.herokuapp.com/characters/:id Remember which HTTP verb you need in the request!!
• If the character is successfully removed, change the background color of the button to green.
• If something went wrong, change the background color of the button to red.

Create new character

We will create a form with 4 inputs: name(text), occupation(text), weapon(text) and cartoon(checkbox).

• Create a button (Create in the image above) to get all the data from the form.
• Send the data to the APIHandler function to save the new character through https://minions-api.herokuapp.com/characters Remember which HTTP verb you need in the request!!
• If the character was successfully created, set the background color of the button to green.
• If something went wrong, change the background color of the button to red.

Edit a character

We will create a form with 4 inputs: name(text), occupation(text), weapon(text) and cartoon(checkbox). Also, we will create a new input to indicate the id of the character we want to edit.

• Create a button (Update in the image above) to get all the data from the form.
• Send the data to the APIHandler function to save the new character through https://minions-api.herokuapp.com/characters/:id Remember which HTTP verb you need in the request!!
• If the character was successfully updated, set the background color of the button to green.
• If something went wrong, change the background color of the button to red.

That would be all!

Happy coding! ❤️