Submitted about 2 years ago

React, Tailwind, Typescript

kanarian• 80

@kanarian

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Rock, Paper, Scissors game

HTML
CSS
JS

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

It was fun trying out Tailwind!

IMO this was quite an easy one, but I really liked doing the 'mobile design first' approach: First trying to design the mobile layout and afterwards the desktop layout. The Tailwind media queries made this so nice to do! It was interesting to see the use of the orders in flex.

Only concerns I have with tailwind is that all looks a bit cluttered and there seems to be a lot of code duplication, which is also mentioned in the docs as not being necessarily something bad? Dont know how I feel about that

Getting the 'shaded' circles behind the correct answer, was really difficult for me: Playing around with the z-indices was quite a hassle. In the end, I managed to get it done by changing the z-index of both buttons based on whomever is the winner. I'm really wondering if there are easier ways of adding these circles.

Another challenge was trying to get everything to look good on the iPhone XR, I am using custom divs as the connector bars. These all have an absolute position, which worked OK on desktop, but apparently for safari, the parent needs to be a relative element, which took some time for me to figure out, but now it works!

Community feedback

Dun• 290

@DundeeA

Posted about 2 years ago

Hey, good job completing this challenge. I would recommend having the possible play choices be <buttons>, the button element is semantic html and lets screen readers know this element can be clicked.

For the 'shaded' circles I recommend looking into box-shadows, you can actually put as many as you want around an element and they're fully customizable similar to borders you can have them wrap around the entire element to get the same effect you have here.

box-shadows: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Marked as helpful

kanarian• 80

@kanarian

Posted about 2 years ago

@DundeeA Hey Dun, thanks for your comment, appreciate it! I agree with the button element, I have changed the divs into buttons.

Using the multiple box-shadows: Good idea! I had that in mind as well, but thought tailwind could not handle it - but it can!

Please log in to post a comment

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