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)
Note: for the bonus triple click the title of the game
- Solution URL: Frontendmentor solution link
- Live Site URL: Livesite url
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Vue.js
I learned how to mantain a global state, how to update the title when toggling the bonus section.
I also learned how to make use of box-shadow
and some other stuff like radial
gradient, count clicks, but reset them when a second after the last click
passes.
Also I like how to position the buttons, it wasn't the best solution but it worked in this case, so it's fine
I would like to improve the position of the buttons and mantain the state after refreshing the browser, because I've missed that part.
- Website - Halivert's website
- Frontend Mentor - @halivert
- Twitter - @halivert