The task

1. Implement the wireframe in wireframe-main.png as a live prototype, using logo.svg and cart.svg as images.

2. Use the products data in products.json to fill in everything wrapped in {{ and }} in the prototype.

3. When clicking the Product Price, add the item to the user's cart.

   Save the "Added product" locally, either to a variable, cookie, local storage or something else.

4. Implement the "Cart drawer" in wireframe-cart.png as part of the other prototype.

   Make the cart update to show the currently added products and a total price.

   The cart drawer should open and close when clicking the cart icon.

5. Make the "Product filter" functional by allowing users to filter by color and size.

Requirements

We expect the code to contain semantic HTML, DRY Javascript and modern CSS properties.

Please write down instructions on how to run your code, even if it's just about opening an index.html file.

Freedoms

You are free to setup the prototype however you wish. This means that you can choose your own frameworks, preprocessors, build tools, templating languages and more. Whatever you think gets the job done in the best way.

You are also welcome to freestyle the look and feel of the prototype by adding colors, fonts, animations and more, if you feel like it, but this is not a requirement.