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.
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
- Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer
If the player wins, they gain 1 point. If the computer wins, the player loses one point.
- Paper beats Rock
- Rock beats Scissors
- Scissors beats Paper
- 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.
RPS e RPSLS games - Desktop Version
RPS e RPSLS games - Mobile Version
- Solution URL: https://github.com/Willwf/rock-paper-scissors-game
- Live Site URL: https://rock-paper-scissors-game-peach.vercel.app/
- Semantic HTML5 markup
- Typescript
- Flexbox
- Grid
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
- Vite.js - Bundler JS
This is my first project where I've used TypeScript, aside from some exercises from videos and classes. It has been quite different because unexpected errors occurred due to behaviors that I had not encountered in previous projects. The notes and warnings from the IDE were very helpful to me. Although I am still learning, I have enjoyed using TypeScript. I had to spend some time thinking about the logic to make the game work and had to do a lot of research to make it happen. I had previously used Grid, but in this project, I learned different ways to achieve my desired outcome.
I plan to continue using TypeScript in my future projects to enhance my understanding and broaden my expertise. And I want to start practicing animations using CSS. I feel that would make everything so much more good to see.
- ChatGPT - This helped me to explore and utilize many things that I was unfamiliar with. Even when I encountered incorrect responses or outdated information, I was able to extract valuable insights that helped me complete or advance a feature. It's an amazing tool for a student when used well.
- Stack Overflown - With the answers I was able to discover and learn a lot of things to make my project work.
- Github - William Firmino
- Frontend Mentor - @Willwf
- Twitter - @Williamwf
- LinkedIn - William Firmino