In this project you will learn how to change your website styles during the runtime using VanillaJS (plain normal js).
Create an algorithm that randomly builds a card on every refresh:
- Every time the website refreshes a new random card needs to show.
- The card must have one of the possible suites: Hearts, Spades, Clubs and Diamonds.
- The card value must be one of the following: 1 to 10, King, Queen, Jack or Ace (no joker).
In the end, the project needs to look similar to this demo.
- Remember that the first event on a website lifecycle is onLoad (your code starts running there), you should generate a random number between 1 and 4 to pick a sute and another random number between 0 and 12 to pick a card number.
- Create a general .card class that applies the general styles to each card, and one additional CSS class for each suite: .spade, .club, .heart & .diamond.
- Apply the .card class to the entire div but only apply one of the suite classes at a time depending on what suite you want to apply. For example a 3 of hearts will have this HTML declaration:
<div class='card heart'></div>
- You can use images, icons or HTML character entities to generate the suite symbol into the HTML Here you can find the character entities for the :before and :after content.
