Skip to content
Submitted 11 months ago

interactive assessment component solution with html, css, javascript

Smaylen5•530
@Smailen5
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

  • I can't understand how to select only one number at a time, it is possible to select more than one but it only takes into account the last value selected

  • although I think the following line is correct, the result is written without spaces either at the beginning or at the end.

reviewSelect.innerText = ` ${reviewContent} `

Even trying with a console.log of reviewContent gives the following result:

<span id="rating-here"> 5 </span>

But the number is put all together without spaces. I just can't understand why.

Any advice is welcome :)

Community feedback

  • Bruce B•505
    @bbsmoothdevPosted 11 months ago

    My suggestion would be to use a radio button grouping in the HTML instead adding click events to spans, which is not keyboard accessible. You can use CSS to make "cover the radio buttons with the circles.

    2
    Smaylen5•530
    @Smailen5Posted 11 months ago

    Actually:

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

    I hadn't thought about it; you cannot select the span XD. Thanks for the advice :)

    @bbsmoothdev

    0
    Bruce B•505
    @bbsmoothdevPosted 10 months ago

    @Smailen5 I was thinking more of actual radio buttons (<input type="radio">). This widget is asking you to pick one value out of a group of values. In other words, select one option out of a group of options. That's exactly what a radio button grouping is for. And for people listening to it with a screen reader it will make sense to them how to interact with it.

    Marked as helpful
    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