Join Smart by performing a simple magic trick.
- Make sure all 4 suits of cards are rendered. There are 13 cards in each suit (♥, ♣, ♦, ♠).
- Make sure the value for each card is visible on the initial render, basically move each card a bit so the card is readable.
- Add 3 buttons to the flow that will do 3 actions:
- Shuffle: Randomly shuffles all cards.
- Show/Hide: Hide all the cards by adding a class (CSS is already included).
- Magic: Order the cards again by suit.
- When performing the trick, use the existing cards rather then create new ones.
- Find a way to remove duplications in the
cards.scss
file and generate all the classes automatically for the cards:.hearts-1
,.hearts-2
, ... ,.spades-13
. - Add animation.
- Do not use images for the cards, style them with CSS/SCSS only.
- Uncomment the tests in the
cypress/integration/magic-trick.js
file and make sure the tests pass. - Add additional tests (we like test coverage).
- Add some extra functionality, this is your chance to be creative. 😉
Follow these steps to get the project setup on your machine.
git clone git@github.com:smartpension/smart-magic-cards.git
Note: You won't have access to commit to this repository. We suggest you download it or fork it.
yarn install
In order to use the SASS compiler, run the following command.
yarn develop
In order to run the tests, run the folowing command.
yarn test
Note: Cypress.io is included in the project and all tests will run on Travis CI.