Skip to content
Submitted over 2 years ago

Rock, paper ,scissors Game using pure js css

Ganesh•280
@Ganesh-Rathor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Rock, Paper, Scissors game
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

This challange teach me alot when I am trying to make as it is same but I am faild to create a carbon copy of site . The challange that I faced

  1. How to apply Radial-Gradient on the border of element.
  2. How to make a variable for gradient so we use it easily. Plese give me feedback on this topic and feedback on my js logic and css

Community feedback

  • Hikmah•1,070
    @HikmahxPosted over 2 years ago

    Hi Ganesh. Great work! I have a few suggestions:

    • To make the buttons look 3D, you need to add a box-shadow that has both an outset and inset value. For example, for the rock (red), the value should be something like: box-shadow: 0 7px 0 -1.5px #ae1b37, inset 0 5px #bec0d5;. For the other choices, ensure to make the value of the outset shades darker to get that 3D look. For blue you can use #2d1bd2f2 and yellow #d27d1bf2
    • You can add a bit of transition and animation when you pick a choice and when displaying the winner to make it nicer.

    I have a solution to this, it's not perfect but you can check out the CSS.

    Marked as helpful
    1
    Ganesh•280
    @Ganesh-RathorPosted over 2 years ago

    @Hikmahx Thanks for your feedback bro...!

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Good job Ganesh

    Keep up the good work

    Your solution looks great however I think the buttons need some margin from the top using margin-top.

    Let's talk about your accessibility issue

    • Document should have one main landmark, this is the root cause of the rest of your accessibility issues since your document is unable to distinguish the main content, this can be resolved by wrapping all the element within the body tag between main tags. This will then identify that a main content exists and should resolve this issue and the other issues.

    In terms of your html markup issue, you cannot mention an image tag without specifying a source for the image using the src attribute which means it must have a value and should not be empty.

    I recommend using semantic tags to get rid of accessibility issues, you can read more here to get an insight on how it works and the various tags for the different use-cases.

    I hope this helps

    Cheers 👍

    Marked as helpful
    0
    Ganesh•280
    @Ganesh-RathorPosted over 2 years ago

    @TheCoderGuru Thanks for your feedback bro...!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord