som-sama · som-sama · Oct 10, 2022 · Oct 10, 2022
diff --git a/Dice_Game/dice.js b/Dice_Game/dice.js
@@ -0,0 +1,43 @@
+
+	// Player name
+	var player1 = "Player 1";
+	var player2 = "Player 2";
+
+	// Function to change the player name
+	function editNames() {
+		player1 = prompt("Change Player1 name");
+		player2 = prompt("Change player2 name");
+
+		document.querySelector("p.Player1").innerHTML = player1;
+		document.querySelector("p.Player2").innerHTML = player2;
+	}
+
+	// Function to roll the dice
+	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 + ".png");
+
+
+			document.querySelector(".img2").setAttribute("src",
+				"dice" + randomNumber2 + ".png");
+
+			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);
+	}
+
diff --git a/Dice_Game/diceimage.jpeg b/Dice_Game/diceimage.jpeg
diff --git a/Dice_Game/img1/dice1.png b/Dice_Game/img1/dice1.png
diff --git a/Dice_Game/img1/dice2.png b/Dice_Game/img1/dice2.png
diff --git a/Dice_Game/img1/dice3.png b/Dice_Game/img1/dice3.png
diff --git a/Dice_Game/img1/dice4.png b/Dice_Game/img1/dice4.png
diff --git a/Dice_Game/img1/dice5.png b/Dice_Game/img1/dice5.png
diff --git a/Dice_Game/img1/dice6.png b/Dice_Game/img1/dice6.png
diff --git a/Dice_Game/img2/dice1.png b/Dice_Game/img2/dice1.png
diff --git a/Dice_Game/img2/dice2.png b/Dice_Game/img2/dice2.png
diff --git a/Dice_Game/img2/dice3.png b/Dice_Game/img2/dice3.png
diff --git a/Dice_Game/img2/dice4.png b/Dice_Game/img2/dice4.png
diff --git a/Dice_Game/img2/dice5.png b/Dice_Game/img2/dice5.png
diff --git a/Dice_Game/img2/dice6.png b/Dice_Game/img2/dice6.png
diff --git a/Dice_Game/index.html b/Dice_Game/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content=
+		"width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./style.css">
+        <script src="dice.js"></script>
+	<title>Dice Game</title>
+</head>
+
+<body>
+	<div class="container">
+		<h1>Let's Start</h1>
+
+		<div class="dice">
+			<p class="Player1">Player 1</p>
+			<img class="img1" src="img1/dice6.png">
+		</div>
+
+		<div class="dice">
+			<p class="Player2">Player 2</p>
+			<img class="img2" src="img2/dice6.png">
+		</div>
+	</div>
+
+	<div class="container bottom">
+		<button type="button" class="butn"
+			onClick="rollTheDice()">
+			Roll the Dice
+		</button>
+	</div>
+	<div class="container bottom">
+		<button type="button" class="butn"
+			onClick="editNames()">
+			Edit Names
+		</button>
+	</div>
+</body>
+</html>
diff --git a/Dice_Game/style.css b/Dice_Game/style.css
@@ -0,0 +1,55 @@
+
+	.container {
+		width: 70%;
+		margin: auto;
+		text-align: center;
+	}
+
+	.dice {
+		text-align: center;
+		display: inline-block;
+		margin: 10px;
+	}
+
+	body {
+		background-color: #042f4b;
+		margin: 0;
+	}
+
+	h1 {
+		margin: 30px;
+		font-family: "Lobster", cursive;
+		text-shadow: 5px 0 #232931;
+		font-size: 4.5rem;
+		color: #4ecca3;
+		text-align: center;
+	}
+
+	p {
+		font-size: 2rem;
+		color: #4ecca3;
+		font-family: "Indie Flower", cursive;
+	}
+
+	img {
+		width: 100%;
+	}
+
+	.bottom {
+		padding-top: 30px;
+	}
+
+	.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;
+	}