diff --git a/Dice1.jpg b/Dice1.jpg new file mode 100644 index 00000000..18fcd60c Binary files /dev/null and b/Dice1.jpg differ diff --git a/Dice2.jpg b/Dice2.jpg new file mode 100644 index 00000000..d4692813 Binary files /dev/null and b/Dice2.jpg differ diff --git a/Dice3.jpg b/Dice3.jpg new file mode 100644 index 00000000..b805f504 Binary files /dev/null and b/Dice3.jpg differ diff --git a/Dice4.jpg b/Dice4.jpg new file mode 100644 index 00000000..a5837e4e Binary files /dev/null and b/Dice4.jpg differ diff --git a/Dice5.jpg b/Dice5.jpg new file mode 100644 index 00000000..74206c56 Binary files /dev/null and b/Dice5.jpg differ diff --git a/Dice6.jpg b/Dice6.jpg new file mode 100644 index 00000000..cac8196a Binary files /dev/null and b/Dice6.jpg differ diff --git a/dice.css b/dice.css new file mode 100644 index 00000000..ae940d9d --- /dev/null +++ b/dice.css @@ -0,0 +1,55 @@ + + .Cover { + width: 70%; + margin: auto; + text-align: center; + } + + .dice { + text-align: center; + display: inline-block; + margin: 10px; + } + + body { + background-color: #3a3b5a; + margin: 0; + } + + h1 { + margin: 30px; + font-family: "Lobster", cursive; + text-shadow: 5px #fffb00; + font-size: 4.5rem; + color: #ea00ff; + text-align: center; + } + + p { + font-size: 2rem; + color: #4ecca3; + font-family: "Indie Flower", cursive; + } + + img { + width: 100%; + } + + .bottom { + padding-top: 20px; + } + + .butn { + background: #4ecca3; + font-family: "Indie Flower", cursive; + border-radius: 7px; + color: #ffff; + font-size: 30px; + padding: 16px 25px 16px 25px; + text-decoration: none; + } + + .butn:hover { + background: #232931; + text-decoration: none; + } diff --git a/index.html b/index.html index 11cd63fd..8e193721 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,42 @@ + - - Web Dev for Beginners - - - - - + + + Dice Game + + + -
- - +
+

READY TO WIN

+ +
+

Player 1

+ +
+ +
+

Player 2

+ +
+
+ +
+ +
+
+ +
+ + diff --git a/script.js b/script.js new file mode 100644 index 00000000..21a7c563 --- /dev/null +++ b/script.js @@ -0,0 +1,40 @@ + + + var player1 = "Player 1"; + var player2 = "Player 2"; + + + function ChangeNames() { + player1 = prompt("Change Player1 name"); + player2 = prompt("Change player2 name"); + + document.querySelector("p.Player1").innerHTML = player1; + document.querySelector("p.Player2").innerHTML = player2; + } + + function rollTheDice() { + setTimeout(function () { + var randomNumber1 = Math.floor(Math.random() * 6) + 1; + var randomNumber2 = Math.floor(Math.random() * 6) + 1; + + document.querySelector(".img1").setAttribute("src", + "dice" + randomNumber1 + ".jpg"); + + document.querySelector(".img2").setAttribute("src", + "dice" + randomNumber2 + ".jpg"); + + if (randomNumber1 === randomNumber2) { + document.querySelector("h1").innerHTML = "Draw!"; + } + + else if (randomNumber1 < randomNumber2) { + document.querySelector("h1").innerHTML + = (player2 + " WINS!"); + } + + else { + document.querySelector("h1").innerHTML + = (player1 + " WINS!"); + } + }, 2500); + }