UI Drive - TA Commerce

TA Digital Hacker Rank Test - A Simple e-Commerce Web site.

##BEFORE YOU START CODING, READ THIS PAGE FIRST

General Guidelines:

On the machine - you already have development environment ready with following setup:
- Visual Studio Code (including JS linting)
- Gulp based workflow automation, includes hot reload on code changes
- Required Scaffolding with inclusion of required JS, CSS, fonts etc.
The solution must be completed within 120 minutes
If you require any assistance or need any clarification, please call for it
Use only Core JavaScript ES5 or 6. Any other JS library or FRAMEWORK is NOT ALLOWED.
NO CSS FRAMEWORK ALLOWED - only pure CSS

Create the design as per the mockup below.
The product cards HTML have to be generated from the provided JSON (found here: 'data/products.json')
Other required assets (scaffolding) are already linked or referred in the HTML document for you.
Required fonts (from Google Fonts), and normalize css are already embedded in the HTML.
Be creative and feel free to use any HTML templating if you want.

They are available in 'src/img' folder.

Click on any item, such as image, copy-text, button etc. to select it - and you would see the related style specifications in the right side:

Include or load the product JSON data ('data/products.json') using AJAX/Fetch API.
Iterate through the products' and generate the product cards (as per the mockup).
User should be able to type a keyword e.g. product name in the Search bar (above) - this action should filter the products from JSON and show only the filtered result.