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: Git repo link
• Live Site URL: Live site url

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Svelte - JS Framework

What I learned

Since this is my first project on svelte, It increased my grasp on the basic concept of svelte like dividing a site into various components, communication between parent and child components using props and custom event dispatching. Also, I have learned how to create perfect circles with css only:

    .outer_button{
        border: none;
        border-radius: 100%;
        width: 100%;
        height: 0;
        padding-bottom: min(100%, 200px);
        position: relative;
        display: block;
        max-width: 200px;
    }

I didn't know that giving padding in percentage unit will be relative of the width of that element, giving it 100% padding bottom and 100% width with border radious 100% will make a perfect circle, I have also limited the width of that circle with giving max width and limiting it's height with min function.

Continued development

I will continue learning about animations and transitions in svelte. Also, I will now start learning svelte kit.

Author

• Frontend Mentor - @Gloryjaw