Cool Cars

Instructions

Using your favorite web editor like codepen.io or jsfiddle.net, please write code to achieve the following goals:

• Using the data linked below, create a responsive webpage similar to the example image below. (the text data in the image is for example only)

• Use a GET request to retrieve the data.

• Display "Full Name" and "Total Score" for the top 10 vehicles whose "Cool Factor" is at least 7, ordered by "Total Score". “Full Name” is a string constructed from "Year", "Make" and "Model". (see example image)

• Support all modern browsers. (you can ignore IE11)

• Support all viewports. (iPhone 5 portrait through large desktop monitors)

• Try to match the design below as closely as possible. (click/expand the image for actual size)

Data:

https://gist.github.com/singhenso/1bdf799646bd856ee07a5d6c01466989

Raw format is below: https://gist.githubusercontent.com/singhenso/1bdf799646bd856ee07a5d6c01466989/raw/b6cf2606c7059c256311d013dc864278add42659/cars_data

Example Image:

Bonus!

If you feel the urge, you could try to accomplish the following additional tasks. (not mandatory)

• Add animations to the page build

• When a card is clicked, open a modal window with car details

• Add dynamic background images to the cards