Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview
My process
- Built with
- What I learned
Author

Overview

The challenge

Users should be able to:

View the optimal layout for the game depending on their device's screen size
Play Rock, Paper, Scissors against the computer
Maintain the state of the score after refreshing the browser

Screenshot

My process

Built with

Flexbox
CSS Grid
React - JS library
Vite - Bundler
TailwindCSS - For styles

What I learned

That i'm lazy to find a way to change the Hand styles for different breakpoints, so i just hacked by show and hide those elements.

<div className='flex flex-col-reverse gap-6 sm:flex-col sm:gap-16'>
  <p className='relative z-10 font-semibold tracking-widest text-white sm:text-3xl'>
    YOU PICKED
  </p>
  {/* For Desktop */}
  <div className='hidden sm:block'>
    <Hand type={playerHand} size='lg' ripple={playerHand === winnerHand} />
  </div>
  {/* For Mobile */}
  <div className='sm:hidden'>
    <Hand type={playerHand} size='sm' ripple={playerHand === winnerHand} />
  </div>
</div>

Author

Frontend Mentor - @agusthas
Twitter - @agusthas

agusthas/rock-paper-scissors-main