Build JavaScript ROCK PAPER SCISSORS in 18 minutes! 👊

Sdílet
Vložit
  • čas přidán 27. 08. 2024
  • #JavaScript #tutorial #course
    This is a beginner's project to help learn the fundamentals of working with the DOM and classList

Komentáře • 54

  • @BroCodez
    @BroCodez  Před 8 měsíci +30

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

    • @gpu_governor
      @gpu_governor Před 8 měsíci +1

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

    • @mahithmahi9446
      @mahithmahi9446 Před 6 měsíci

      Can you send full code ......

    • @shieldanime6968
      @shieldanime6968 Před 6 měsíci

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

    • @IanAdaque
      @IanAdaque Před 3 měsíci

      Bro how about if your code said choice is not defined

  • @OrionsFactFactory
    @OrionsFactFactory Před 8 měsíci +16

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

  • @hasnainmalik8982
    @hasnainmalik8982 Před 8 měsíci +28

    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 Před 8 měsíci +6

      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 Před 4 měsíci +1

      @@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
    @jiyoungkim9258 Před 8 měsíci +1

    you're my life saver!

  • @opiirix3302
    @opiirix3302 Před 8 měsíci +1

    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 Před 7 měsíci

      I recommendo you the Odin Project

    • @Birandoo
      @Birandoo Před 5 měsíci

      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.

  • @maxtreme2901
    @maxtreme2901 Před 22 dny

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

  • @Adithyarmenon198
    @Adithyarmenon198 Před 8 měsíci +1

    Nice Program
    I am also doing almost similar ones😃

  • @gatenetsetgo....7012
    @gatenetsetgo....7012 Před 8 měsíci

    Please,make full tutorial from basic to advance

  • @festussabu
    @festussabu Před 8 měsíci

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

  • @silviocorrea25
    @silviocorrea25 Před 8 měsíci

    Great content

  • @doronfeldman5152
    @doronfeldman5152 Před 8 měsíci +1

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

  • @cryptoptinvestor384
    @cryptoptinvestor384 Před 6 měsíci +1

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

  • @l-fitness3590
    @l-fitness3590 Před 7 měsíci +1

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

    • @hiya1399
      @hiya1399 Před 3 měsíci +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 Před 3 měsíci

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

    • @lucasquinncreations
      @lucasquinncreations Před 2 měsíci

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

    • @l-fitness3590
      @l-fitness3590 Před 2 měsíci +1

      @@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 Před 2 měsíci

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

  • @ArtistikNoName
    @ArtistikNoName Před 8 měsíci

    can u make a full course of lua, please?

  • @user-qv8ve4dc9k
    @user-qv8ve4dc9k Před 2 měsíci

    This is so easy

  • @Nigelsworld2015
    @Nigelsworld2015 Před 17 dny

    what is the code

  • @did_someoneknow
    @did_someoneknow Před 2 měsíci

    Why my code is not working?

  • @youngtrouble00
    @youngtrouble00 Před 8 měsíci

    How didu make that website

  • @oybekabdumalikov2763
    @oybekabdumalikov2763 Před 8 měsíci +2

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

  • @AvidAfrican
    @AvidAfrican Před 7 měsíci

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

  • @GnomeBobMC
    @GnomeBobMC Před 8 měsíci +1

    First 🤓

    • @BroCodez
      @BroCodez  Před 8 měsíci +3

      You win! 🎊

    • @GnomeBobMC
      @GnomeBobMC Před 8 měsíci +1

      @@BroCodez No way this legend actually responded 🥳🎉

  • @UNKNOWN_1005-o5A
    @UNKNOWN_1005-o5A Před 7 měsíci

    it aint working

    • @l-fitness3590
      @l-fitness3590 Před 7 měsíci

      Did you find the solution

    • @UNKNOWN_1005-o5A
      @UNKNOWN_1005-o5A Před 6 měsíci

      @@l-fitness3590 no

    • @-ASTROMAGIC
      @-ASTROMAGIC Před 5 měsíci +1

      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 Před 5 měsíci

      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 Před 5 měsíci

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

  • @HKkinner
    @HKkinner Před 8 měsíci +1

    pls pin me i am 7th