Frontend Mentor - Rock, Paper, Scissors

plan

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

Table of contents

Overview
- The challenge
- Links
Plan
Author

Overview

The challenge

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

Links

Live Site URL: rock pair scissors

plan

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

Built with

CSS custom properties
Flexbox
Javascript

What I learned

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 )

Continued development

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

Useful resources

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.

Author

Frontend Mentor - @b-l-u-e