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 suits: Hearts, Spades, Clubs and Diamonds.
-
The card value must be one of the following: 2 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 of a website lifecycle is onLoad (your code starts running there). You should generate a random number between 1 and 4 to pick a suit 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 suit: .spade, .club, .heart & .diamond.
-
Apply the .card class to the entire div but only apply one of the suit classes at a time, depending on what suit you want to apply. For example, a 3 of Hearts will have this HTML declaration:
<div class='card heart'></div>
- You can grab the icons from here (copy and paste into your code): โฆ โฅ โ โฃ
The following requirements are not needed to sucessfully finish this project, but you can try and challenge yourself!
+1
Add a button that generates a new card when clicked.
+1
Add a timer that generates a new card every 10 seconds.
+1
Allow the user to specify the card width and height using text inputs.
HTML, CSS, Javascript, Bootstrap