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.
You are a villain and your dream is to get rid of those annoying, yoga-pant-wearing, weird masked **superheroes**.
You never understood why some of them are considered to be superheroes, just because they are rich. Others annoy you with their philosophical speeches.
> 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).
We've found _confidential_ information about those superheroes.
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.
**Your task** is to build a web page to organize all the data about those smartypants. All that data can be found [here](https://rawcdn.githack.com/akabab/superhero-api/0.2.0/api/all.json) in `all.json`.
#### Fetching the data
You must write all of the code from scratch. You are not allowed to rely on any frameworks or libraries like React, Vue, Svelte etc.
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:
#### Fetching the data
In order to get the information, you should use `fetch`.
When you use `fetch` in JS, it always returns a `Promise`. We will look more deeply into that later on. For now, tak a look at this:
```js
// This function is called only after the data has been fetched, and parsed.
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.
console.log(heroes)
}
// Request the file fetch, it will download it in your browser cache
// Request the file with fetch, the data will downloaded to your browser cache.
.then((response) => response.json()) // parse the response from JSON
.then(loadData) // .then will call the function with the JSON value
.then(loadData) // .then will call the `loadData`function with the JSON value.
```
#### Display
Not every field should be presented in a `<table>` element,
the necessary data will be:
Not all the information is valuable at a glance, so we will only show some of the fields in a `<table>` element. The necessary data will be:
- Icon (`.images.xs`, should be displayed as images and not as a string)
- Name (`.name`)
@ -51,46 +42,38 @@ the necessary data will be:
- 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`.
The information must be displayed in multiple pages. Use a `<select>` input to chose the page size from `10`, `20`,`50`, `100` or `all results`.
> The default page size selected option must be `20`
The default page size selected option must be `20`.
#### Search
It must be possible to filter information by searching the name as a string
_(ex: superheroes that contain **man** in their name)._
It must be possible to filter information by searching the name as a string. For example, searching _"man"_ should find all superheros with `"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.
The search should be interactive. In other words, the results should be filtered after every keystroke. So we don't need a "search" button.
#### 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.
It will be valuable to sort the information in the table by any of its columns. Results should be sortable alphabetically or numerically.
- Initially all rows should be sorted by the column `name` by `ascending` order.
- The first click on a column heading will sort the table by the data in that column in `ascending` order.
- Consecutive clicks on a column heading will toggle between `ascending` and `descending`.
- Some of the columns are composed of strings, but represent numerical values. For example, when the `weight` column is sorted in ascending order, then `"78 kg"` must be displayed before `"100 kg"`.
- Missing values should **always** be sorted last, irrespective of `ascending` or `descending`.
> When dealing with heroes, **speed** is critical. All operations must be performed quickly, without slowing the browser down.
### Bonus
Additional features will be critical to your success. Here's a few which will give you a bigger boost:
- Specify the field that the search applies to.
- Custom search operators
- `include`
- `exclude`
- `fuzzy`
- `equal`, `not equal`, `greater than` and `lesser than` for numbers (including weight and height).
- Detail view. Clicking a hero from the list will show all the details and large image.
- A slick design. Spend some time improving the look and feel by playing around with CSS. Have fun with it.
- Modify the URL with the search term, so that if you copy and paste the URL in a different tab, it will display the same column filters. If you have implemented detail view, the state of which hero is displayed should also form part of the URL.
davhojt
2 years ago
committed by