Skip to content
Submitted over 1 year ago

Interactive-Rating-Component using Flexbox and JavaScript

magname•60
@magname
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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
    @akpekigPosted 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
    0
  • Gerardo Cianciulli•190
    @GerardoCianciulliPosted 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.

    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