Submitted over 1 year ago

Interactive-Rating-Component using Flexbox and JavaScript

magname• 60

@magname

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

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This is my solution for the interactive rating card component challenge.

The problem that I faced?

The first container is not following the given margin when the window is resized but the second one does.
Why does the focus pseudo-class focus doesn't work with the div tag?

CSS

.buttons:focus{ background-color: hsl(216, 12%, 54%); }

HTML

<div class="buttons">2</button>
<div class="buttons">3</button>
<div class="buttons">4</button>
<div class="buttons">5</button>

This doesn't work so changed the div with the button tag

Community feedback

Gillian Akpeki• 445

@akpekig

Posted over 1 year ago

The .rating class has no flex wrap set, so by default, it won't wrap. Add flex-flow: row wrap or flex-wrap: wrap to the class in order for it to wrap when resized.
You can focus on (and click) button elements by default. You can't focus on (or click) div elements by default. To make a div focusable, add the attribute tabindex="0". Different values on the tab index attribute have different effects. This will then apply your focus state styling as intended. However, using a button (or input) element, in this case, is semantically more appropriate than using a div with a tab index.

Marked as helpful

Gerardo Cianciulli• 190

@GerardoCianciulli

Posted over 1 year ago

To avoid cross browser bugs or default browser settings it is best to use the appropriate html tag for the job. Not all tags have a focus state until specified with the attribute "tabindex=0". However with this design your "Submit" should be a button and not a div. You would trigger a click event when the user hits the "enter" key.

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