Build JavaScript ROCK PAPER SCISSORS in 18 minutes! 👊 

// ROCK PAPER SCISSORS const choices = ["rock", "paper", "scissors"]; const playerDisplay = document.getElementById("playerDisplay"); const computerDisplay = document.getElementById("computerDisplay"); const resultDisplay = document.getElementById("resultDisplay"); const playerScoreDisplay = document.getElementById("playerScoreDisplay"); const computerScoreDisplay = document.getElementById("computerScoreDisplay"); let playerScore = 0; let computerScore = 0; function playGame(playerChoice){ const computerChoice = choices[Math.floor(Math.random() * 3)]; let result = ""; if(playerChoice === computerChoice){ result = "IT'S A TIE!"; } else{ switch(playerChoice){ case "rock": result = (computerChoice === "scissors") ? "YOU WIN!" : "YOU LOSE!"; break; case "paper": result = (computerChoice === "rock") ? "YOU WIN!" : "YOU LOSE!"; break; case "scissors": result = (computerChoice === "paper") ? "YOU WIN!" : "YOU LOSE!"; break; } } playerDisplay.textContent = `PLAYER: ${playerChoice}`; computerDisplay.textContent = `Computer: ${computerChoice}`; resultDisplay.textContent = result; resultDisplay.classList.remove("greenText", "redText"); switch(result){ case "YOU WIN!": resultDisplay.classList.add("greenText"); playerScore++; playerScoreDisplay.textContent = playerScore; break; case "YOU LOSE!": resultDisplay.classList.add("redText"); computerScore++; computerScoreDisplay.textContent = computerScore; break; } } Document Rock - Paper - Scissors 👊 ✋ ✌ PLAYER: COMPUTER: Player Score: 0 Computer Score: 0 body{ font-family: Arial, sans-serif; font-weight: bold; margin: 0; display: flex; flex-direction: column; align-items: center; } h1{ font-size: 3.5rem; color: hsl(0, 0%, 20%); } .choices{ margin-bottom: 30px; } .choices button{ font-size: 7.5rem; min-width: 160px; margin: 0 10px; border-radius: 250px; background-color: hsl(200, 100%, 50%); cursor: pointer; transition: background-color 0.5s ease; } .choices button:hover{ background-color: hsl(200, 100%, 70%); } #playerDisplay, #computerDisplay{ font-size: 2.5rem; } #resultDisplay{ font-size: 5rem; margin: 30px 0; } .scoreDisplay{ font-size: 2rem; } .greenText, #playerScoreDisplay{ color: hsl(130, 84%, 54%); } .redText, #computerScoreDisplay{ color: hsl(0, 84%, 60%); }

Hey bro, are you going to do a node.js course in the future?

How did you learn front-end development? I'm just having trouble finding a beneficial course for me; however, some videos like your HTML/CSS/JavaScript or the CS50web dev course have been really helpful for me

Nice Program I am also doing almost similar ones😃

hey can you do a video about how intersection observer works in react..

Please,make full tutorial from basic to advance

can u make a full course of lua, please?

This is so easy

How didu make that website

11:19 how did you select code and backspace all of it one space backwards?

what is the code

pls pin me i am 7th

it aint working

Hey bro I am your permanent subscriber from India if nobody is watching your video or you are getting only one view I am sure that I will be that one viewer watching your videoa

I just wanna say you are every Computer Science students hero man❤

Coding bootcamps hate you and also their businesses are in minus 😂

can you give the the images of rock paper and scissor please . I cant find a good one in the google

For me to add some emojis "Windows Key + ." Win+.

you're my life saver!

Why did we timed math.rendom by 3 ? (Mathe.rendom()*3)

Bro code came in 2024 loaded... i'm following you...

Why my code is not working?

First 🤓

Great content

For anyone having problems put the script link before the last body tag not in the head section