diff --git a/Dicee Challenge - Completed/dicee.html b/Dicee Challenge - Completed/dicee.html new file mode 100644 index 0000000..b349f6a --- /dev/null +++ b/Dicee Challenge - Completed/dicee.html @@ -0,0 +1,34 @@ + + + + + Dicee + + + + + + +
+

Refresh Me

+ +
+

Player 1

+ +
+ +
+

Player 2

+ +
+ +
+ + + + + + + diff --git a/Dicee Challenge - Completed/images/dice1.png b/Dicee Challenge - Completed/images/dice1.png new file mode 100644 index 0000000..543a9ee Binary files /dev/null and b/Dicee Challenge - Completed/images/dice1.png differ diff --git a/Dicee Challenge - Completed/images/dice2.png b/Dicee Challenge - Completed/images/dice2.png new file mode 100644 index 0000000..472bbac Binary files /dev/null and b/Dicee Challenge - Completed/images/dice2.png differ diff --git a/Dicee Challenge - Completed/images/dice3.png b/Dicee Challenge - Completed/images/dice3.png new file mode 100644 index 0000000..5bb30aa Binary files /dev/null and b/Dicee Challenge - Completed/images/dice3.png differ diff --git a/Dicee Challenge - Completed/images/dice4.png b/Dicee Challenge - Completed/images/dice4.png new file mode 100644 index 0000000..2c116a9 Binary files /dev/null and b/Dicee Challenge - Completed/images/dice4.png differ diff --git a/Dicee Challenge - Completed/images/dice5.png b/Dicee Challenge - Completed/images/dice5.png new file mode 100644 index 0000000..d566cd8 Binary files /dev/null and b/Dicee Challenge - Completed/images/dice5.png differ diff --git a/Dicee Challenge - Completed/images/dice6.png b/Dicee Challenge - Completed/images/dice6.png new file mode 100644 index 0000000..8b98b3c Binary files /dev/null and b/Dicee Challenge - Completed/images/dice6.png differ diff --git a/Dicee Challenge - Completed/index.js b/Dicee Challenge - Completed/index.js new file mode 100644 index 0000000..9d10687 --- /dev/null +++ b/Dicee Challenge - Completed/index.js @@ -0,0 +1,29 @@ + +var randomNumber1 = Math.floor(Math.random() * 6) + 1; //1-6 + +var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png + +var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png + +var image1 = document.querySelectorAll("img")[0]; + +image1.setAttribute("src", randomImageSource); + + +var randomNumber2 = Math.floor(Math.random() * 6) + 1; + +var randomImageSource2 = "images/dice" + randomNumber2 + ".png"; + +document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2); + + +//If player 1 wins +if (randomNumber1 > randomNumber2) { + document.querySelector("h1").innerHTML = "🚩 Play 1 Wins!"; +} +else if (randomNumber2 > randomNumber1) { + document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩"; +} +else { + document.querySelector("h1").innerHTML = "Draw!"; +} diff --git a/Dicee Challenge - Completed/styles.css b/Dicee Challenge - Completed/styles.css new file mode 100644 index 0000000..c5ad740 --- /dev/null +++ b/Dicee Challenge - Completed/styles.css @@ -0,0 +1,41 @@ +.container { + width: 70%; + margin: auto; + text-align: center; +} + +.dice { + text-align: center; + display: inline-block; + +} + +body { + background-color: #393E46; +} + +h1 { + margin: 30px; + font-family: 'Lobster', cursive; + text-shadow: 5px 0 #232931; + font-size: 8rem; + color: #4ECCA3; +} + +p { + font-size: 2rem; + color: #4ECCA3; + font-family: 'Indie Flower', cursive; +} + +img { + width: 80%; +} + +footer { + margin-top: 5%; + color: #EEEEEE; + text-align: center; + font-family: 'Indie Flower', cursive; + +}