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
• Author

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

Screenshot

Links

• Solution URL: Github
• Live Site URL: Live site

My process

This is a one page project. so first I built,styled the rules page, & built the cancel button of the rules. I used /.style.display = "none"/ to make the rules dissapear when the x(cancel) button is clicked.

Then I built & styled the selection page. I built a function that makes the selected hand appear on the next page as my picked hand. and another function to randomly select a hand for the house and display said selected hand on the next page as "the house picked" hand, right as I select mine. and a third function that determines who wins the round and displays it, while also adding or subtracting a new score and display it on the score board.

I also built a function that takes the game back to the selection page with just a click of a button. finaly, I built a button that displays the rules once again.

Built with

• Semantic HTML5 markup
• Sass
• CSS custom properties
• Flexbox
• Mobile-first workflow
• JavaScript

What I learned

Since I learnt data structures, I havn't had a reason to use /Math.random()/ until now. with this project, I was able to brush up on my data structures a little bit.

I also learnt to use /setTimeout()/ to delay a fucntion for however long is needed.

Continued development

I would like to keep building more games, so I can get better with data structures.

Author

• Website - Barnabas Ukagha
• Frontend Mentor - @Barnabas-U
• Twitter - @iammcbarna