public/subjects/sortable

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.

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:

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.

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).

• 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.