This challenge is designed to let you show your thought process and approach to some basic tasks of front-end engineering. There are many ways to perform these tasks and we are not looking for a particular "right way". However, we do appreciate some basic principles of software design including performance, maintainability, usability, etc...
Along with these tasks, we welcome any commentary or feedback. It can either be included in comments in your code or as a narrative. You are welcome to use any external libraries that you wish. Your deliverable can either be a zip, a repo on your git account, or hosted somewhere.
Here you are given and HTML, JSON, javascript and css file that pill data from the JSON file and display it for the user to see. Start by familiarizing yourself with the code and once you are ready, here is a list of tasks we will need you to complete:
-
Familiarize yourself and optimize and improve the code and layout anywhere you see fit.
-
Each product has an attribute named "description". We'd like to update the UI so that whenever you mousover a product, an overlay comes across it with the description.
-
When viewed on a mobile device, the site scrolls left to right. Optimize the layout so that it can be properly viewed on mobile.
-
Add an "X" in the top right corner of each product. When you click on it, have it remove itself from the page.
-
Perform a few style edits: link colors should be #0096ff, The title of the page should be 36 pixels high. The tagline of the page should be 18. Title of each product should be 16 pixels high. The product tagline should be 16. Center everything on the page including titles and the products display.
-
It takes a second or two to load the page. Let the user know that the page is still loading until the page renders.
-
Give any thoughts or commentary on the solution here. What things did you/would you do to optimize it. Are there any outside libraries you would use?