This is the code test from Vention

The goal of this test is to create some interactive cards using HTML, CSS/SCSS, and JavaScript.

Rules

  • 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!

What to Build

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.

Screenshots

"Screenshot of page on first open"

"Screenshot of blue flower item on hover"

"Screenshot after blue flower is added to cart"

"Screenshot after both blue flower and orange flower are added to cart"