mirror of https://github.com/01-edu/public.git
1 changed files with 92 additions and 0 deletions
@ -0,0 +1,92 @@ |
|||||||
|
## 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. |
||||||
|
|
||||||
|
> 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). |
||||||
|
|
||||||
|
|
||||||
|
#### 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: |
||||||
|
- 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 `<select>` input is used to chose from `10`, `20`,`50`, `100` or `all results`. |
||||||
|
|
||||||
|
|
||||||
|
#### Search |
||||||
|
|
||||||
|
It must be possible to filter information by searching the name as a string |
||||||
|
*(ex: superheroes that contain **man** in their name).* |
||||||
|
- The search should be interactive, in other words, the results should be |
||||||
|
displaying as you write, not needing a button for you to click. |
||||||
|
|
||||||
|
|
||||||
|
#### Sort |
||||||
|
|
||||||
|
It must be possible to sort by any columns of the table |
||||||
|
*(either alphabetically or numerically).* |
||||||
|
- 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 |
||||||
|
- Missing values should always be sorted last. |
||||||
|
|
||||||
|
> 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. |
Loading…
Reference in new issue