Today #Day56 of #100DaysOfCode, I am coding and explaining the 'Rock Paper Scissors' code game project in JavaScript taught by @WebDevSimplified

HTML

1. let's create a div to hold three buttons,

   <div class="selections">
           <button class="selection">✊</button>
           <button class="selection">🖐</button>
           <button class="selection">✌️</button>
   </div>
   

2. let's create a results div to hold the results section and a chid div to display you and a span child to hold the score,

   <div class="results">
   <div>
   You
   <span class="result-score">0</span>
   </div>
   <div>
   Computer
   <span class="result-score">0</span>
   </div>
   

1. Let's create a javascript file and use defer to load after our html page has loaded

   <script src="/script.js" defer></script>
   

CSS

1. Let's center these selections div

   .selections{
       display: flex;
       justify-content: center;
   }
   

2. Let's Get rid of the buttons border and outline

   .selection{
       background: none;
       border: none;
       outline: none;
       cursor: pointer;
       font-size: 2em;
   }
   

3. Let's add a hover effect to these buttons and grow when hovered,

   .selection:hover{
       transform: scale(1.1);
   }
   

4. Let's center the results div

   .results{
       margin-top: 1rem;
       display: grid;
       justify-content: center;
       grid-template-columns: repeat(2,1fr);
       justify-items: center;
       align-items: center;
   }
   

5. Now, Let's Work on result-score section and make it smaller,

   .result-score{
       margin-left: .1rem;
       font-size: .5rem;
       color: #333;
   }
   

6. Then, Let's create a results selection div and in CSS differentiate between the winner and lost using opacity, but for now, comment it out because we will create these elements dynamically when a user makes a selection,

   Tip: Use Ctrl+/ to comment out multiple lines after selection.

   .result-selection{
       opacity: .5;
   }
   .result-selection.winner{
       opacity: 1;
       font-size: 1.5rem;
   }
   

JavaScript

Lets Move on to JS,

1. Before we move on, Lets add data arrtbute to buttons in HTML,

   <button class="selection" data-selection="rock">✊</button>
   <button class="selection"data-selection="paper">🖐</button>
   <button class="selection"data-selection="scissor">✌️</button>
   

2. After that, Let's create a selection buttons const variable and pick all the data selection attributes using query selector,

   const selectionButtons = document.querySelectorAll('[data-selection]')
   

3. Next, let's add an add event listener for each button and access our data attribute given to the element in JS using dataset object and keyname property here the keyname is selection

   selectionButtons.forEach(selectionButton => {
      selectionButton.addEventListener('click', (e) => {
          const selectionName = selectionButton.dataset.selection
          makeSelection(selectionName)
      })
   });
   

4. Now, Lets Create a makeSelection function and call it the above code to append it to click and write console log to check whether it is working or not

   function makeSelection(selection) {
     console.log(`You Clicked ${selection}`)
   }
   

Completed HTML and CSS coding and explaining Half way Through 'Rock Paper Scissors' code game project in JavaScript taught by @WebDevSimplified.

Conclusion

1. HTML Span Tag

2. CSS Display Flex

3. CSS Hover

4. CSS Display Grid

5. HTML Data attribute

6. JS querySelector

7. Array forEach

8. addEventListener method

Code

1. Code

   

2. Image

   

Source: Code with WebDevSimplified [click]

Author: Dheeraj.y

Connect with me:

• My Twitter

• My LinkedIn

• My GitHub

• My Hashnode