# Sortable
Sortable was exercice of Challenge js at paris ynov campus with a time constraint of 2 days
you can find subject of exercice [here](https://github.com/01-edu/public/blob/master/subjects/sortable/README.md) or
below
you can see result [here](https://tot0p.github.io/sortable/)
## Subject
### Instructions
You are a villain and your dream is to end with those annoying, yoga pants,
weird masks wearing **superheroes**. You never understood why are some of them
considered superheroes just because they are rich. Others annoy you with their
philosophical speeches. And of course that something tragic has had to happen
to them for the people to feel sorry for them. \
Anyway, we've found _confidential_ information about those superheroes.
> Your task for the moment is to build a web page in order to organize all the
> data from those smartypants.
> This information can be found here: [all.json](https://rawcdn.githack.com/akabab/superhero-api/0.2.0/api/all.json).
Note that since this mission is using *critical* data, you are not allowed to
rely on any frameworks or libraries, you have to be the author of every bit
of code.
#### Fetching the data
In order to get the information out of the API you should use `fetch`.
In JS when you use `fetch` it always returns a `Promise` we will look
deeper into those later on, for now just refer to the code example below:
```js
const loadData = heroes => {
console.log(heroes) // write your code using the data in a function
// note that you can not access heroes before this function is called.
}
// Request the file fetch, it will download it in your browser cache
fetch('https://rawcdn.githack.com/akabab/superhero-api/0.2.0/api/all.json')
.then((response) => response.json()) // parse the response from JSON
.then(loadData) // .then will call the function with the JSON value
```
#### Display
Not every field should be presented in a `
` element,
the necessary data will be:
- Icon (`.images.xs`, should be displayed as images and not as a string)
- Name (`.name`)
- Full Name (`.biography.fullName`)
- Powerstats (each entry of `.powerstats`)
- Race (`.appearance.race`)
- Gender (`.appearance.gender`)
- Height (`.appearance.height`)
- Weight (`.appearance.weight`)
- Place Of Birth (`.biography.placeOfBirth`)
- Alignement (`.biography.alignment`)
The information must be displayed in multiple pages. \
A `