diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..356dbc0
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,133 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Helvetica, sans-serif;
+}
+body{
+ background: rgb(0, 44, 0);
+}
+#gold{
+ color: gold;
+}
+#silver{
+ color: silver;
+}
+#apple{
+ color: red;
+}
+#star{
+ color: gold;
+}
+#fish{
+ color: blue;
+}
+#diamond{
+ color: aliceblue;
+}
+#horseshoe{
+ color: rgb(1, 92, 1);
+}
+/* font */
+h1,h2{
+ color: white;
+}
+h1{
+ font-size: 4rem;
+}
+h2{
+ font-size: 2rem;
+}
+i{
+ font-size: 10rem;
+}
+/* layout */
+.slotReelDisplay{
+ display: flex;
+ background: black;
+ justify-content: space-between;
+ align-items: center;
+}
+.slot1, .slot2, .slot3{
+ width: 33%;
+ text-align: center;
+}
+.bets{
+ display: flex;
+ justify-content: space-between;
+}
+span{
+ display: block;
+ width: 33%;
+ text-align: center;
+ background: aliceblue;
+ padding: 2rem 0;
+ border-radius: 3rem;
+}
+span:hover{
+ cursor: pointer;
+ background: rgb(255, 82, 82);
+
+}
+.clicked{
+ background: rgb(255, 82, 82);
+}
+.userInfo{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+/* utility */
+.paddingBox{
+ padding: 2rem;
+}
+.margin-top{
+ margin-top: 2rem;
+}
+.margin-bottom{
+ margin-bottom: 2rem;
+}
+
+/* mediaQuery */
+@media (max-width: 700px){
+ i{
+ font-size: 7.5rem;
+ }
+ h1{
+ font-size: 2.2rem;
+ }
+ h2{
+ font-size: 1.5rem;
+ }
+}
+@media (max-width: 500px){
+ i{
+ font-size: 5rem;
+ }
+ h1{
+ font-size: 2rem;
+ }
+ h2{
+ font-size: 1.5rem;
+ }
+ .paddingBox{
+ padding: 1rem;
+ }
+}
+@media (max-width: 350px){
+ i{
+ font-size: 3.5rem;
+ }
+ h1{
+ font-size: 1.8rem;
+ }
+ h2{
+ font-size: 1.5rem;
+ }
+ .paddingBox{
+ padding: 1rem;
+ }
+ span{
+ border-radius: 20rem;
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e826f21
--- /dev/null
+++ b/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+ Wallet: $100
+ Bet: $0
+
+
+
+
+ Bet $10
+ Bet $50
+ Let's play!
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..b78a7c3
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,87 @@
+let score = 0
+let total = 100
+const maxBet = 50
+const minBet = 10
+let userBet = 0
+
+document.querySelector('#minBet').addEventListener('click', placeMinBet)
+document.querySelector('#maxBet').addEventListener('click', placeMaxBet)
+document.querySelector('#play').addEventListener('click', playSlots)
+
+function placeMinBet() {
+ userBet = minBet
+ document.querySelector('#minBet').classList.add('clicked')
+ document.querySelector('#maxBet').classList.remove('clicked')
+ document.querySelector('h2').innerText = `Bet: $10`
+}
+
+function placeMaxBet() {
+ userBet = maxBet
+ document.querySelector('#minBet').classList.remove('clicked')
+ document.querySelector('#maxBet').classList.add('clicked')
+ document.querySelector('h2').innerText = `Bet: $50`
+}
+function playSlots() {
+ slotMachine.game()
+}
+const slotMachine = {
+ reel: function(){
+ const random = Math.random()
+ console.log(random)
+ if(random < .143){
+ return ``
+ } else if(random < .285){
+ return ``
+ } else if(random < .426){
+ return ``
+ } else if(random < .569){
+ return ``
+ } else if(random < .712){
+ return ``
+ } else if(random < .855){
+ return ``
+ } else {
+ return ``
+ }
+ },
+ game: function () {
+ if(total < 10){
+ alert(`You're out of money!`)
+ return
+ }
+ if(userBet > total){
+ alert(`You don't have enough money to cover the bet`)
+ return
+ }
+ if(userBet > 0 && total >= 10){
+ const reelOne = slotMachine.reel()
+ const reelTwo = slotMachine.reel()
+ const reelThree = slotMachine.reel()
+ console.log(reelOne,reelTwo,reelThree)
+ if(reelOne === reelTwo && reelOne === reelThree){
+ score += userBet*3
+ total += userBet*3
+ alert('JACKPOT!')
+ } else if(reelOne === reelTwo || reelOne === reelThree || reelTwo === reelThree){
+ score += userBet
+ total += userBet
+ } else{
+ total -= userBet
+ }
+ console.log(`Your score is : ${score}`)
+ document.querySelector('h1').innerText = `Wallet: $${total}`
+ document.querySelector(`.slot1`).innerHTML = reelOne
+ document.querySelector(`.slot2`).innerHTML = reelTwo
+ document.querySelector(`.slot3`).innerHTML = reelThree
+ document.querySelector('#minBet').classList.remove('clicked')
+ document.querySelector('#maxBet').classList.remove('clicked')
+ document.querySelector('h2').innerText = `Bet: $0`
+ }else{
+ alert('Place your bet!')
+ }
+ userBet = 0
+ }
+}
+
+
+