The Assignment is deployed live: HERE
Instructions:
- Press SPIN
- Wait for the wheel to spin
- Your prize is on the YOU WIN window
- The default bet amount is 10€
- The default wallet amount is 50€
- Your total wallet amount is found at the window with the cashbag emoji
- Press the HISTORY button to see all your past prizes
- More and extensive useful comments on the code itself that'll help you navigate the components
- You'll find more information about this project on the "docs" folder
The technologies that have been used are HTML5, CSS and Javascript.
The project is fully responsive for tablet and phone use.
A library of animations used called Animate.cs in order to animate the deducted bet amount from your wallet when you click SPIN.
The rotation of the wheel itself is done by injecting rotating tranform style into the css of the wheel.
In truth, only the last spin of the wheel is random using the math.random() multiplied by 360 to give a random degree value.
Determination of where the wheel ended is done by using the modulo operation and then dividing that by 45 which is the degree of each slice.
That in turn gives us a value 1-8 which we can use to calculate the prize money.
The history of the prizes is stored into an array locally only when the prize money isn't 0 and then that is injected into the html.
The wheel and the coins/skulls icons where tweaked & adjusted in Photoshop CC, turned into .png and then placed into the img folder.
The background of the body was generated by using this website.
Font used was provided by Google Fonts and is called: Ubuntu Condensed.
The theme of the whole project had very soft colors in mind with a playful-cute theme that is aesthetic yet serious.
All the buttons, styles, shadows and backgrounds were structured having that theme in mind.