Frontend Mentor - Rock, Paper, Scissors

Welcome! 👋

This is my solution to the Rock, Paper, Scissors challenge on Frontend Mentor.

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.

The challenge

Your challenge is to build out this Rock, Paper, Scissors game and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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
• Bonus: Maintain the state of the score after refreshing the browser
• Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer

Rules

If the player wins, they gain 1 point. If the computer wins, the player loses one point.

Original

• Paper beats Rock
• Rock beats Scissors
• Scissors beats Paper

Bonus

• Scissors beats Paper
• Paper beats Rock
• Rock beats Lizard
• Lizard beats Spock
• Spock beats Scissors
• Scissors beats Lizard
• Paper beats Spock
• Rock beats Scissors
• Lizard beats Paper
• Spock beats Rock

Not sure what Rock, Paper, Scissors, Lizard, Spock is? Check out this clip from The Big Bang Theory.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.