- create the boxes for how it looks like
- create the rock, paper and scissors buttons
- create the view of contest(results)
- create onclick event for the rock paper scissors
- when clicking the button need to hide the buttons and show the winner
- figure out what the computer is gonna pick
- compare the results and figure out who wins
The challenge was to build the Rock, pair and scissors using HTML, CSS and Javascript
Users will be able to:
- View the optimal layout depending on their device's screen size
- Live Site URL: rock pair scissors
- create the boxes for how it looks like
- create the rock, paper and scissors buttons
- create the view of contest(results)
- create onclick event for the rock paper scissors
- when clicking the button need to hide the buttons and show the winner
- figure out what the computer is gonna pick
- compare the results and figure out who wins
- CSS custom properties
- Flexbox
- Javascript
Recap over some of my major learnings while working through this project.
- Box-sizing
- use of max-width and max-height
- CSS Flexbox
- use of media queries
- defining and reuse variables in stylesheet to avoid redundancy in the code.
- Javascript(arrow functions, DOM manipulation )
Areas that i want to continue focusing on in future projects.
- CSS grid
- Max-height and max width
- Media queries
- CSS Transform and animation properties
- CSS Gradients
- CSS Position
- ES6 Javascript
- CSS Documentation - This helped me how to handle div containers and style them. I really liked this pattern and will use it going forward.
- CSS Flexbox - This is an amazing article which helped me finally understand CSS Flexbox. I'd recommend it to anyone still learning this concept.
- Frontend Mentor - @b-l-u-e