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
#JavaScript #tutorial #course
This is a beginner's project to help learn the fundamentals of working with the DOM and classList
Пікірлер: 52
// 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
7 ай бұрын
@BroCodez why are you creating a new javascript playlist, will the old one be deleted ?
@mahithmahi9446
5 ай бұрын
Can you send full code ......
@shieldanime6968
4 ай бұрын
You are a lifesaver brocodez 💪💪💪🎉🎊🎉🎊🎉🎆🎇🎆🎇🎆🎇🙏🙏🙏
@IanAdaque
Ай бұрын
Bro how about if your code said choice is not defined
I just wanna say you are every Computer Science students hero man❤
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
7 ай бұрын
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.
@mosshead_vinsmoke
3 ай бұрын
@@sadboy-xx6gh same here, Indian channel are good but they are boring but my Man here knows how to teach in a fun whimsical way + he is the get to guy when you wanna review some concepts or topics
you're my life saver!
hey can you do a video about how intersection observer works in react..
Nice Program I am also doing almost similar ones😃
Great content
Hey bro, are you going to do a node.js course in the future?
Please,make full tutorial from basic to advance
can u make a full course of lua, please?
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
6 ай бұрын
I recommendo you the Odin Project
@Birandoo
4 ай бұрын
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.
How didu make that website
For me to add some emojis "Windows Key + ." Win+.
This is so easy
Why my code is not working?
Bro code came in 2024 loaded... i'm following you...
For anyone having problems put the script link before the last body tag not in the head section
@hiya1399
2 ай бұрын
THANK YOU!!! I've been working on this for hours and couldn't figure out why it wasn't working.
@l-fitness3590
2 ай бұрын
@@hiya1399 been a while since I put this comment but you can put it in the head but add defer
@lucasquinncreations
Ай бұрын
Thank you! Why does having the script in the html header break functions like this?
@l-fitness3590
Ай бұрын
@@lucasquinncreations I might be incorrect so take what I say with a pinch of salt but by adding defer your letting the html load first
@lucasquinncreations
Ай бұрын
@@l-fitness3590 I see it. Perhaps a case of needing the text fields loaded first before changing them.
Coding bootcamps hate you and also their businesses are in minus 😂
it aint working
@l-fitness3590
6 ай бұрын
Did you find the solution
@UNKNOWN_1005-o5A
5 ай бұрын
@@l-fitness3590 no
@-ASTROMAGIC
4 ай бұрын
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
4 ай бұрын
his switch cases are also incomplete and will produce bugs, but it's nothing that can't be fixed by going on stackoverflow.
@0nullBit
4 ай бұрын
@@-ASTROMAGIC what why does the play game need to return anything. Also the switch should work perfectly fine….
First 🤓
@BroCodez
7 ай бұрын
You win! 🎊
@GnomeBobMC
7 ай бұрын
@@BroCodez No way this legend actually responded 🥳🎉
pls pin me i am 7th