diff --git a/subjects/sortable/README.md b/subjects/sortable/README.md index 6ccc4c10..d7969f43 100644 --- a/subjects/sortable/README.md +++ b/subjects/sortable/README.md @@ -2,43 +2,34 @@ ### 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. +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. 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 + .then(loadData) // .then will call the `loadData` function with the JSON value. ``` #### Display -Not every field should be presented in a `` 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 `
` 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 `` 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.