You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
3.9 KiB

4 years ago
## Sortable
### 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.
4 years ago
> 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.
4 years ago
#### 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 `<table>` element,
the necessary data will be:
4 years ago
- 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`)
4 years ago
The information must be displayed in multiple pages. \
A `<select>` input is used to chose from `10`, `20`,`50`, `100` or `all results`.
4 years ago
> The default page size selected option must be `20`
4 years ago
#### Search
It must be possible to filter information by searching the name as a string
_(ex: superheroes that contain **man** in their name)._
4 years ago
- The search should be interactive, in other words, the results should be
displaying as you write, not needing a button for you to click.
4 years ago
#### Sort
It must be possible to sort by any columns of the table
_(either alphabetically or numerically)._
4 years ago
- Initially all rows should be sorted by the column `name` by `ascending` order
- First click will order the column by `ascending` value
- Consecutive clicks will toggle between `ascending` and `descending` order
- Note that, for example, the column `weight` will be composed of strings, so
the correct order would be `['78 kg', '100 kg']` instead of the other way
around
4 years ago
- Missing values should always be sorted last.
4 years ago
> As you know, when you are against heroes, **speed** is critical, every operations on
> the database should be very fast and not slow down the browser
### Optional
Any additional features will be critical to your success, everything count:
better filtering, better design, more details... here a few:
- Allow to specify the field you search on and search on any field.
- Custom search operators like allowing `include` / `exclude` or `fuzzy` string
matching and `equal` / `not equal` / `greater than` / `lesser than` for numbers
(this includes weight and height).
- Detail view when clicking on a hero that show all the details and large image.
- A slick design spend some time on the CSS, make it look great, have fun with it.
- The URL must be updated with the search, so if you copy and paste this url it
will present the same result(s). If you have implemented the detail view,
which hero is detail view is open should be also be saved in the URL.