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