Frontend Mentor - Rock, Paper, Scissors solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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)

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vuex
• TailwindCSS - CSS library
• Vue - JS library

What I learned

I learned more practical use of Vuex, using TailwindCSS with Vue, I made use of slots in a project for the first time. I also made use of the transition component for the first time

Continued development

In future projects, I would love to focus on Vuex, animations, comsuming API, using slots, all with Vue js.

Useful resources

• Stack Overflow - This helped me with issues I had using slots and I got answers to my problems.
• Tailwind CSS Docs - I used this for checking out class names and their functions in Tailwind.

Author

• Website - Abdulhakeem Abdulazeez
• Frontend Mentor - @Ayoazeez26
• Twitter - @ayoazeez26

Acknowledgments

Quite a number of people I ran to when I was having issues on this project helped me. I would like to say thank you to Abdulqudus Abubakre, Nyior Clement and Mubarak Sanusi.