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

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
• Keep track of the score

Screenshot

Links

• Live Site URL: (https://lynix-rock-paper-scissors.netlify.app)

My process

During the process of creating this project,

• I setup HTML layout
• I style the HTML with CSS to make my project look beautiful
• I got the player's hand choice using an event listener
• I got the Computer's Choice by defining an array and randomly selecting the elements of the array
• I wrote a fuction to compare both choices and assign score
• I wrote a function to update the DOM

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Arrow Functions
• Arrays
• loops
• Events
• Conditional Statements
• DOM manipulation
• Objects

What I learned

During the process of creating this project, i learnt a lot of things like:

• Randomly selecting an element from an array
• forEach Loop
• Javascript DOM manipulation
• JS modal pop up
• JS Timing
• Objects

To see how you can add code snippets, see below:

<h1>Some HTML code I'm proud of</h1>

.proud-of-this-css {
  color: papayawhip;
}

const proudOfThisFunc = () => {
  console.log('🎉')
}

Continued development

Areas i would like to focus on in the future:

• Promises
• Constructors
• DOM manipulation
• Arrow Functions
• Loops
• Objects

Useful resources

• W3 Schools - This is an amazing site which helped me finally understand Js timing, JS modal popup. I'd recommend it to anyone still learning this concept.

• Clever Programmer - This is an amazing site which helped me finally understand Arrays, loops and DOM manipulation. I'd recommend his 12-hours javascript course to anyone still learning this concept.

Author

• Frontend Mentor - @Coderio10
• Twitter - @anointedkayode
• Behance - @anointedkayode