Build JavaScript ROCK PAPER SCISSORS in 18 minutes! 👊

#JavaScript #tutorial #course
This is a beginner's project to help learn the fundamentals of working with the DOM and classList

[@BroCodez]

// 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%);
}

[@cpu_governor]

@BroCodez why are you creating a new javascript playlist, will the old one be deleted ?

[@mahithmahi9446]

Can you send full code ......

[@shieldanime6968]

You are a lifesaver brocodez 💪💪💪🎉🎊🎉🎊🎉🎆🎇🎆🎇🎆🎇🙏🙏🙏

[@IanAdaque]

Bro how about if your code said choice is not defined

[@OrionsFactFactory]

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

[@hasnainmalik8982]

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

[@sadboy-xx6gh]

I'm from India too and I've been watching his videos for more than a year. I've seen some video tutorials more than 10 times. For some of them going for as long as 12 hours.

[@jiyoungkim9258]

you're my life saver!

[@silviocorrea25]

Great content

[@gyisu]

Are you going to create a flutter course? It would be really cool. Good tutorial bro :)

[@Adithyarmenon198]

Nice Program
I am also doing almost similar ones😃

[@festussabu]

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

[@doronfeldman5152]

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

[@gatenetsetgo....7012]

Please,make full tutorial from basic to advance

[@charlesselrachski34]

i like, can you do next one with gdscript4 and android app, and another with flutter and android app with leaderboards

[@ArtistikNoName]

can u make a full course of lua, please?

[@gamingwithyoungtrouble]

How didu make that website

[@opiirix3302]

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

[@jobnacorconcepcionabad6037]

I recommendo you the Odin Project

[@Birandoo]

Check out "The Odin Project". I highly recommend it. I'm taking it now. Online, free and good for what you will need for getting a job later.

[@cryptoptinvestor384]

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

[@l-fitness3590]

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

[@hiya1399]

THANK YOU!!! I've been working on this for hours and couldn't figure out why it wasn't working.

[@l-fitness3590]

@@hiya1399 been a while since I put this comment but you can put it in the head but add defer

[@did_someoneknow]

Why my code is not working?

[@l-fitness3590]

Loved this one I figured out how to make it so the game closes and prompts you to restart game if you win or loose and resets the number to default

[@AvidAfrican]

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

[@GnomeBobMC]

First 🤓

[@BroCodez]

You win! 🎊

[@GnomeBobMC]

@@BroCodez No way this legend actually responded 🥳🎉

[@oybekabdumalikov2763]

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

[@HKkinner]

pls pin me i am 7th

[@user-gx6zp4tv7f]

it aint working

[@l-fitness3590]

Did you find the solution

[@user-gx6zp4tv7f]

@@l-fitness3590 no

[@-ASTROMAGIC]

you need to to return the result at the end of the playGame function and it should work. not really sure why his doesn't produce an error

[@-ASTROMAGIC]

his switch cases are also incomplete and will produce bugs, but it's nothing that can't be fixed by going on stackoverflow.

[@0nullBit]

@@-ASTROMAGIC what why does the play game need to return anything. Also the switch should work perfectly fine….