From f41fb61717bf14f1db3977da9359c937154d6b3d Mon Sep 17 00:00:00 2001
From: OGordoo <marcosafonso8@hotmail.com>
Date: Wed, 17 Jun 2020 17:45:42 +0100
Subject: [PATCH] Sortable Raid

---
 subjects/sortable/README.md | 92 +++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 subjects/sortable/README.md

diff --git a/subjects/sortable/README.md b/subjects/sortable/README.md
new file mode 100644
index 00000000..febc8e6f
--- /dev/null
+++ b/subjects/sortable/README.md
@@ -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.