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

Пікірлер: 52

  • @BroCodez
    @BroCodez7 ай бұрын

    // 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

    @cpu_governor

    7 ай бұрын

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

  • @mahithmahi9446

    @mahithmahi9446

    5 ай бұрын

    Can you send full code ......

  • @shieldanime6968

    @shieldanime6968

    4 ай бұрын

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

  • @IanAdaque

    @IanAdaque

    Ай бұрын

    Bro how about if your code said choice is not defined

  • @OrionsFactFactory
    @OrionsFactFactory7 ай бұрын

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

  • @hasnainmalik8982
    @hasnainmalik89827 ай бұрын

    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

    @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

    @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

  • @jiyoungkim9258
    @jiyoungkim92587 ай бұрын

    you're my life saver!

  • @festussabu
    @festussabu7 ай бұрын

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

  • @Adithyarmenon198
    @Adithyarmenon1987 ай бұрын

    Nice Program I am also doing almost similar ones😃

  • @silviocorrea25
    @silviocorrea257 ай бұрын

    Great content

  • @doronfeldman5152
    @doronfeldman51527 ай бұрын

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

  • @gatenetsetgo....7012
    @gatenetsetgo....70127 ай бұрын

    Please,make full tutorial from basic to advance

  • @ArtistikNoName
    @ArtistikNoName7 ай бұрын

    can u make a full course of lua, please?

  • @opiirix3302
    @opiirix33027 ай бұрын

    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

    @jobnacorconcepcionabad6037

    6 ай бұрын

    I recommendo you the Odin Project

  • @Birandoo

    @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.

  • @youngtrouble00
    @youngtrouble007 ай бұрын

    How didu make that website

  • @cryptoptinvestor384
    @cryptoptinvestor3845 ай бұрын

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

  • @user-qv8ve4dc9k
    @user-qv8ve4dc9k28 күн бұрын

    This is so easy

  • @did_someoneknow
    @did_someoneknowАй бұрын

    Why my code is not working?

  • @AvidAfrican
    @AvidAfrican6 ай бұрын

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

  • @l-fitness3590
    @l-fitness35906 ай бұрын

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

  • @hiya1399

    @hiya1399

    2 ай бұрын

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

  • @l-fitness3590

    @l-fitness3590

    2 ай бұрын

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

  • @lucasquinncreations

    @lucasquinncreations

    Ай бұрын

    Thank you! Why does having the script in the html header break functions like this?

  • @l-fitness3590

    @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

    @lucasquinncreations

    Ай бұрын

    @@l-fitness3590 I see it. Perhaps a case of needing the text fields loaded first before changing them.

  • @oybekabdumalikov2763
    @oybekabdumalikov27637 ай бұрын

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

  • @UNKNOWN_1005-o5A
    @UNKNOWN_1005-o5A6 ай бұрын

    it aint working

  • @l-fitness3590

    @l-fitness3590

    6 ай бұрын

    Did you find the solution

  • @UNKNOWN_1005-o5A

    @UNKNOWN_1005-o5A

    5 ай бұрын

    @@l-fitness3590 no

  • @-ASTROMAGIC

    @-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

    @-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

    @0nullBit

    4 ай бұрын

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

  • @GnomeBobMC
    @GnomeBobMC7 ай бұрын

    First 🤓

  • @BroCodez

    @BroCodez

    7 ай бұрын

    You win! 🎊

  • @GnomeBobMC

    @GnomeBobMC

    7 ай бұрын

    @@BroCodez No way this legend actually responded 🥳🎉

  • @HKkinner
    @HKkinner7 ай бұрын

    pls pin me i am 7th