tod
/
odin-rps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic DOM functionality 

Instead of prompt() and console now using DOM elements
This commit is contained in:
NetMan 2024-01-09 18:53:33 +01:00
parent fa0adb794a
commit 807ce0487b
2 changed files with 18 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -5,11 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title> <title>Rock Paper Scissors</title>
<style> <style>
button { .choose {
margin: 50px; margin: 20px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
padding: 20px; padding: 20px;
border: 2px solid #000; border: 2px solid #000;
border-radius: 35px; border-radius: 35px;
@ -18,13 +15,16 @@
font-weight: 700; font-weight: 700;
font-size: xx-large; font-size: xx-large;
cursor: pointer; cursor: pointer;
transform: translate(-50%, -50%);
display: block;
} }
</style> </style>
</head> </head>
<body> <body>
<button onclick="game(this)">Start<br>game</button> <button class="choose" value="rock">Rock</button>
<button class="choose" value="paper">Paper</button>
<button class="choose" value="scissors">Scissors</button>
<div id="result">
Result:
</div>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

51
index.js
View File

@ -1,3 +1,5 @@
'use strict';
const choices = ["rock", "paper", "scissors"]; const choices = ["rock", "paper", "scissors"];
function getComputerChoice() { function getComputerChoice() {
@ -43,45 +45,12 @@ const points = (() => {
playerAddPoints, computerAddPoints, reset}; playerAddPoints, computerAddPoints, reset};
})() })()
function game(clickEvent) { const buttons = document.querySelectorAll("button.choose");
clickEvent.setAttribute('onclick', ' '); const resultDiv = document.querySelector("div#result");
points.reset();
for (let i = 0; i < 5; i++) { buttons.forEach(button => {
let correctOption = false button.addEventListener("click", () => {
let playerChoice; let result = playRound(button.value, getComputerChoice());
resultDiv.textContent = `Result: ${result}`;
while (correctOption == false) { });
playerChoice = prompt("What do you choose, 'rock', 'paper' or 'scissors'?"); });
if (playerChoice) {
choices.forEach(element => {
if (playerChoice.toLowerCase().trim() == element) {
correctOption = true
return;
}
})
} else if (confirm(`Do you wanna quit the game?`)) {
clickEvent.setAttribute('onclick', 'game(this)');
throw new Error("Exited the game on user's request");
}
}
let round = playRound(playerChoice, getComputerChoice());
let pointsString = `Points: ${points.player}:${points.computer}\n`;
alert(pointsString + round);
}
let confirmString;
if (points.player > points.computer) {
confirmString = `You won ${points.player}:${points.computer}`
} else if (points.player == points.computer) {
confirmString = `That was a ${points.player}:${points.computer} tie`
} else if (points.player < points.computer) {
confirmString = `You lost ${points.player}:${points.computer}`
}
if (confirm(`${confirmString}, do you wanna restart the game?`)) {
game();
}
}
// game();