The goal of this test is to create some interactive cards using HTML, CSS/SCSS, and JavaScript.
- No frameworks. Vanilla JS and CSS/SCSS only (no Bootstrap).
- The layout for the cards should be responsive.
- Provide access to your code, e.g. link to a GitHub repo.
- Important: The cards must be generated dynamically, i.e. data is stored in JS, not just a static list of HTML elements.
- That’s it!
The card states are shown below. The image should fade and a button should appear when the card is hovered over. When an item is added to the cart, an icon should appear on the top left-hand corner of the card indicating that it has been added to the cart. A new button should now appear allowing you to remove the item from the cart, which resets the card back to its original state.