From 560e6fe232626e85cb0754c1079778de56c0b3ce Mon Sep 17 00:00:00 2001 From: Thuan Bui <9248622+10h30@users.noreply.github.com> Date: Sun, 23 Feb 2025 09:25:36 +0900 Subject: [PATCH] Add simple UI --- index.html | 3 +- script.js | 128 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 82 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 5267fdf..2eac7fc 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Document - > + +
\ No newline at end of file diff --git a/script.js b/script.js index bb2a7ab..6b1adc6 100644 --- a/script.js +++ b/script.js @@ -18,84 +18,116 @@ function getHumanChoice() { return input; } +const content = document.querySelector("div") +const finalResult = document.createElement("p") +const rockButton = document.createElement("button") +rockButton.textContent = "Rock"; +const paperButton = document.createElement("button") +paperButton.textContent = "Paper"; +const scissorButton = document.createElement("button") +scissorButton.textContent = "Scissor"; + +content.appendChild(rockButton) +content.appendChild(paperButton) +content.appendChild(scissorButton) +content.appendChild(finalResult) + + +rockButton.addEventListener("click", playRound); +paperButton.addEventListener("click", playRound); +scissorButton.addEventListener("click", playRound); + let humanScore = 0; let computerScore = 0; function playRound() { - const humanChoice = getHumanChoice(); + const humanChoice = this.textContent; const computerChoice = getComputerChoice(); - console.log(humanChoice.toUpperCase()); - console.log(computerChoice.toUpperCase()); - switch (humanChoice.toUpperCase()) { - case "ROCK" : - switch (computerChoice.toUpperCase()) { + + const resultPanel = document.createElement("div") + const result = document.createElement("p") + resultPanel.appendChild(result); + content.appendChild(resultPanel) + if (humanChoice.toUpperCase() === computerChoice.toUpperCase()) { + result.textContent = "Draw"; + } + else { + switch (humanChoice.toUpperCase()) { case "ROCK" : - console.log("Draw"); + switch (computerChoice.toUpperCase()) { + case "PAPER" : + computerScore++; + result.textContent = "You lose! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + case "SCISSOR" : + humanScore++; + result.textContent = "You win! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + } break; + case "PAPER" : - console.log("You lose! Paper beats Rock"); - computerScore++; + switch (computerChoice.toUpperCase()) { + case "ROCK" : + humanScore++; + result.textContent = "You win! Paper beats Rock. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + case "SCISSOR" : + computerScore++; + result.textContent = "You lose! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + } break; - case "SCISSOR" : - console.log("You win! Rock beats Scissor"); - humanScore++; + + case "SCISSOR": + switch (computerChoice.toUpperCase()) { + case "ROCK" : + computerScore++; + result.textContent = "You lose! Rock beats Scissor. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + case "PAPER" : + humanScore++; + result.textContent = "You win! Scissor beats Paper. Current score: Computer " + computerScore + " / Human " + humanScore; + break; + } break; } - break; - - case "PAPER" : - switch (computerChoice.toUpperCase()) { - case "ROCK" : - console.log("You win! Paper beats Rock"); - humanScore++; - break; - case "PAPER" : - console.log("Draw"); - break; - case "SCISSOR" : - console.log("You lose! Scissor beats Paper"); - computerScore++; - break; - } - break; - - case "SCISSOR": - switch (computerChoice.toUpperCase()) { - case "ROCK" : - console.log("You lose! Rock beats Scissor"); - computerScore++; - break; - case "PAPER" : - console.log("You win! Scissor beats Paper"); - humanScore++; - break; - case "SCISSOR" : - console.log("Draw"); - break; - } - break; - } - + } + if (humanScore === 5) { + finalResult.textContent = "Congratulation. You Win!"; + humanScore = 0; + computerScore = 0; + } + if (computerScore === 5) { + finalResult.textContent = "Sorry. You Lose!"; + humanScore = 0; + computerScore = 0; + } } function playGames() { //playRound(humanSelection, computerSelection); + const resultPanel = document.createElement("div") + const result = document.createElement("p") for (let i = 0; i < 5; i++) { playRound(); } if (humanScore > computerScore) { console.log("You Win!"); + result.textContent = "You Win"; } else if (humanScore == computerScore) { console.log("Draw"); + result.textContent = "Draw"; } else { console.log("You Lose"); + result.textContent = "You Lose"; } console.log("The score is: " + humanScore + ":" + computerScore) } -playGames(); +//playGames();