Today #day54 of #100daysofcode, I am coding and explaining the Intermediate level 'Rock Paper Scissors' code project in JavaScript taught by @ania_kubow.

HTML

1. create a div with id div#game

   <div id="game"></div>
   

JavaScript

Let's create and populate this id game with element's.

1. Create an h1 element in JS

   const userChoiceDisplay = document.createElement('h1')
   const computerChoiceDisplay = document.createElement('h1')
   const resultDisplay = document.createElement('h1')
   

2. get the element with the ID game and assign it to a gamegrid variable in this gamegrid variable you will store all the previously created elements,

   const gameGrid = document.getElementById('game')
   

3. Now, To store the user choice display variable and computer choice display variable in the result display variable, use a method called append()

   gameGrid.append(userChoiceDisplay,computerChoiceDisplay,resultDisplay)
   

4. After that, make an choices variable array and insert rock paper scissor

   const choices = ['Rock','Paper','Scissor']
   

5. Next, create a button for each choice so use can for loop or you can use for each() method

   const button = document.createElement('button')
   

6. And then, add an id to this button using id property

   button.id = i
   

7. Then, Optionally(redundant) you add this choice to the buttons using innerHTML property

   button.innerHTML = i
   

8. Now, Lets add an addEventListener to this button,

   button.addEventListener('click',()=>console.log('clicked'))
   

   Note:

   1. Don't get confused, this addEventListener() adds this to button while the for...of loop and thereby listen's to a click after the for...of loop. Yes, This addEventListener() method is permanently attached to these buttons.

9. Once you have done that then, add this buttton with the id and inner HTML to our Div which is gameGrid as a child so use appendChild() method,

gameGrid.appendChild(button)

for(let i of choices){
    const button = document.createElement('button')
    button.id = i
    button.innerHTML = i
    button.addEventListener('click',()=>{
        console.log('clicked')
    })
    gameGrid.appendChild(button)
}

So now, you can go to dev tools play around like ania_kubow exclaimed in her [video]

Also if we click it, it will say

🎵clicked clicked🎵

🎵clicked clicked🎵

🎵clicked clicked clicked clicked clicked clicked 🎵

🎵clicked🎵

- ania_kubow

1. Moving on, let's display users choice whenever we click button instead of displaying 'clicked' in the console log, we need to display on the document,

button.addEventListener('click',(e)=>{
        userChoice = e.target.id
        userChoiceDisplay = userChoice
})

i. Math.random() method

x = Math.random() 
console.log(`Math.random() = ${x}`)
console.log(`Math.floor(${x}) = ${Math.floor(x)}`)
console.log(`Math.random(${x} * 3) = ${x*3}`)
console.log(`Math.floor(${x} * 3) = ${Math.floor(x*3)}`)

Code: mathrandom [click]

1. Next, Let's generate computer choice and add it to compuerChoiceDisplay inner HTML

randomChoice = choices[Math.floor(Math.random() * choices.length)]
computerChoiceDisplay.innerHTML = `ComputerChoice: ${randomChoice}`

Sorry, I am Coding without functions, My instinct was to eliminate too many function calls.

1. After that, Let's get result

switch (userChoice + computerChoice) {
        case 'RockPaper':
        case 'PaperScissor':
        case 'ScissorRock':
            resultDisplay.innerHTML = 'You Lost!'
            break
        case 'RockScissor':
        case 'PaperRock':
        case 'ScissorPaper':
            resultDisplay.innerHTML = 'You Win!'
            break
        case 'RockRock':
        case 'PaperPaper':
        case 'ScissorScissor':
            resultDisplay.innerHTML = 'Its a Draw!'
            break
}

CSS

If you want to give styling,

body {
  background-color: aliceblue;
  text-align: center;
}
div {
  display: inline-block;
  background-color: rgb(255, 255, 255);
  margin-top: 15%;
  border-radius: 30px;
  width: 25%;
  height: 250px;
  padding-top: 2%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
  box-shadow: 0 5px 20px #c6c6c6;
  transition: 0.5s ease;
  backdrop-filter: blur(25px) saturate(180%);
}
button#Rock {
  margin-top: 5%;
  margin-left: -5%;
}
button#Paper {
  margin-left: 5%;
}
button#Scissor {
  margin-left: 5%;
}

Finally,

I completed Building Rock Paper Scissor JavaScript Game Taught by ania_kubow.

Conclusion

1. createElements

2. append() method

3. appendChild()

4. addEventListener

5. CSS text-align,display: inline-block,margin properties

6. Completed Building Intermediate level 'Rock Paper Scissors' code project in JavaScript.

Code

1. Code

   

Source: Code with Ania kubow [click]

Author: Dheeraj.y

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode