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
- The challenge
- Screenshot
- Links
- My process
- Built with
- What I learned
- Continued development
- Useful resources
- Author
- Acknowledgments
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)
- Semantic HTML5 markup
- BEM naming conventions
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vite - Vite Package bundler
- SASS/SCSS - For better css organisations
A great challenge that made me brush off my animations and layout skills a little more. Game logic itself is very simple and easy to build. However, the layout and animations are some different gravy! Wanted to add some movements with some animations, and boy.. ended up making my life way harder than it should've been. Took me few trials and errors to get things right, well atleaset the way I wanted. For now, I am happy with the results!
As of now, I've only done the 'Rock, Paper and Scissors' part of the challenge, but I've left everything setup for the bonus challenge. Will definitely finish in near future.
- Github - @snehamoybag
- LinkedIn - Snehamoy Bag
- Frontend Mentor - @snehamoybag
Although I've coded everything from scratch, the animations styles are heavily inspired by our fellow FEM member lieneil. Huge Shoutout to lieneil !!