jwoertink/paper_rock_scissor.html

## paper_rock_scissor.html
<!DOCTYPE html>
<html>
  <head><title>Paper Rock Scissor</title></head>
  <body>
    <h2>Play This Game!</h2>
    <span id="playerScore">You: <strong>0</strong></span>
    <span id="computerScore">It: <strong>0</strong></span>
    <div>
      <button value="paper">🧻</button>
      <button value="rock">🤘</button>
      <button value="scissor">✂️</button>
    </div>
    <div id="counter"></div>
    <div id="winner"></div>
<script>
const choices = ["paper", "rock", "scissor"]
const ties = 0
const buttons = document.querySelectorAll("button")
const counterDisplay = document.getElementById("counter")
const winnerDisplay = document.getElementById("winner")
const playerScore = document.querySelector("#playerScore strong")
const computerScore = document.querySelector("#computerScore strong")

const dispayWinner = (player, computer)=> {
console.log(player, computer)
  if (player == computer) {
    winnerDisplay.innerText = "It's a tie!"
    ties += 1
    if (ties == 3) {
      winnerDisplay.innerText = "I'm done with this"
      setTimeout(()=> {
        window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      }, 2500)
    }
  } else if (player == "paper" && computer == "rock") {
    ties = 0
    let score = parseInt(playerScore.innerText)
    playerScore.innerText = score + 1
    winnerDisplay.innerText = "Player Wins"
  } else if (player == "rock" && computer == "scissor") {
    ties = 0
    let score = parseInt(playerScore.innerText)
    playerScore.innerText = score + 1
    winnerDisplay.innerText = "Player Wins"
  } else if (player == "scissor" && computer == "paper") {
    ties = 0
    let score = parseInt(playerScore.innerText)
    playerScore.innerText = score + 1
    winnerDisplay.innerText = "Player Wins"
  } else if (player == "paper" && computer == "scissor") {
    ties = 0
    let score = parseInt(computerScore.innerText)
    computerScore.innerText = score + 1
    winnerDisplay.innerText = "Computer Wins"
  } else if (player == "rock" && computer == "paper") {
    ties = 0
    let score = parseInt(computerScore.innerText)
    computerScore.innerText = score + 1
    winnerDisplay.innerText = "Computer Wins"
  } else if (player == "scissor" && computer == "rock") {
    ties = 0
    let score = parseInt(computerScore.innerText)
    computerScore.innerText = score + 1
    winnerDisplay.innerText = "Computer Wins"
  }

  winnerDisplay.innerText = winnerDisplay.innerText + `. Computer chose: ${computer}`
}

buttons.forEach(button => {
  button.addEventListener("click", e => {
    e.preventDefault()
    winnerDisplay.innerText = ""

    const userChoice = e.target.value
    const computerChoice = choices[Math.floor(Math.random() * choices.length)]

    counterDisplay.innerText = "3"

    const counter = setInterval(()=> {
    let count = parseInt(counterDisplay.innerText)
      count -= 1
      counterDisplay.innerText = count
      if (count == 0) {
        window.clearInterval(counter)
        counterDisplay.innerText = ""
        dispayWinner(userChoice, computerChoice)
      }
    }, 1000)

  })
})
</script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head><title>Paper Rock Scissor</title></head>
	<body>
	<h2>Play This Game!</h2>
	<span id="playerScore">You: <strong>0</strong></span>
	<span id="computerScore">It: <strong>0</strong></span>
	<div>
	<button value="paper">🧻</button>
	<button value="rock">🤘</button>
	<button value="scissor">✂️</button>
	</div>
	<div id="counter"></div>
	<div id="winner"></div>
	<script>
	const choices = ["paper", "rock", "scissor"]
	const ties = 0
	const buttons = document.querySelectorAll("button")
	const counterDisplay = document.getElementById("counter")
	const winnerDisplay = document.getElementById("winner")
	const playerScore = document.querySelector("#playerScore strong")
	const computerScore = document.querySelector("#computerScore strong")

	const dispayWinner = (player, computer)=> {
	console.log(player, computer)
	if (player == computer) {
	winnerDisplay.innerText = "It's a tie!"
	ties += 1
	if (ties == 3) {
	winnerDisplay.innerText = "I'm done with this"
	setTimeout(()=> {
	window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
	}, 2500)
	}
	} else if (player == "paper" && computer == "rock") {
	ties = 0
	let score = parseInt(playerScore.innerText)
	playerScore.innerText = score + 1
	winnerDisplay.innerText = "Player Wins"
	} else if (player == "rock" && computer == "scissor") {
	ties = 0
	let score = parseInt(playerScore.innerText)
	playerScore.innerText = score + 1
	winnerDisplay.innerText = "Player Wins"
	} else if (player == "scissor" && computer == "paper") {
	ties = 0
	let score = parseInt(playerScore.innerText)
	playerScore.innerText = score + 1
	winnerDisplay.innerText = "Player Wins"
	} else if (player == "paper" && computer == "scissor") {
	ties = 0
	let score = parseInt(computerScore.innerText)
	computerScore.innerText = score + 1
	winnerDisplay.innerText = "Computer Wins"
	} else if (player == "rock" && computer == "paper") {
	ties = 0
	let score = parseInt(computerScore.innerText)
	computerScore.innerText = score + 1
	winnerDisplay.innerText = "Computer Wins"
	} else if (player == "scissor" && computer == "rock") {
	ties = 0
	let score = parseInt(computerScore.innerText)
	computerScore.innerText = score + 1
	winnerDisplay.innerText = "Computer Wins"
	}

	winnerDisplay.innerText = winnerDisplay.innerText + `. Computer chose: ${computer}`
	}

	buttons.forEach(button => {
	button.addEventListener("click", e => {
	e.preventDefault()
	winnerDisplay.innerText = ""

	const userChoice = e.target.value
	const computerChoice = choices[Math.floor(Math.random() * choices.length)]

	counterDisplay.innerText = "3"

	const counter = setInterval(()=> {
	let count = parseInt(counterDisplay.innerText)
	count -= 1
	counterDisplay.innerText = count
	if (count == 0) {
	window.clearInterval(counter)
	counterDisplay.innerText = ""
	dispayWinner(userChoice, computerChoice)
	}
	}, 1000)

	})
	})
	</script>
	</body>
	</html>