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 (optional)
- Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)
- Live Site URL: Netlify
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
- Material UI - For components such as Modal, Card, Button etc.
Note: These are just examples. Delete this note and replace the list above with your own choices
I learned how to use the useContext hook, as well as custom styling MUI components using styled-components.
Overall this gave me a lot of needed practice working with React, especially using various hooks such as useState and useEffect, as well as practice styling using CSS in JS (using Styled Components). I've also gained a better understanding on how to utilize the Material UI library.
I am still struggling with responsive styling, especially when it comes to medium screen sizes (laptops, tablets), so I'm going to continue practicing and researching on how to implement the best practices.
Also, I'm thinking that I need more practice on determining when I should use the useState or useEffect hooks and when I can go on without them.
- React Documentation - This helped me immensely in understanding how to use the useContext hook. I'm glad a hook like this exists so I don't have to rely on a third party library.