Skip to content
Submitted almost 2 years ago

Interactive rating component solution

Olena Shevchenko•200
@olenahelena
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I wonder if it is possible to use span elements for creating a rate line, instead of a list with buttons. Is it semantically correct? I will add a snippet of code, which I wrote at first.

html: <div class="rate_numbers"> <span class="numbers">1</span> <span class="numbers">2</span> <span class="numbers">3</span> <span class="numbers">4</span> <span class="numbers">5 </span>

</div>

scss: rate_numbers { margin-bottom: 23px; display: flex; justify-content: space-between; } .numbers { display: inline-block; background-color: var(--dark-blue-grey); text-align: center; width: 37px; height: 37px; padding: 10px; border-radius: 30px; cursor: pointer; transition: all 0.5s ease; } .numbers:last-child { margin-right: 0; }

.numbers:hover { background-color: var(--orange); color: var(--white); } .numbers:active { background-color: var(--medium-grey); color: var(--white); }

Code

Please log in to post a comment

Log in

Community feedback

  • Fer•3,970
    @fernandolapaz

    Hi 👋, this may interest you for the future:

    On this page we have 2 types of interactive elements:

    • The 5 numbers, where users are expected to enter data (their rating).
    • An element to show a thank you message and send that data (although we don't do it in this challenge).

    Therefore, the most appropriate would be to use a <form>, whose inputs should be 'radio buttons' <input type='radio'>.

    Remember that buttons are interactive elements used to perform an action (such as submitting a form), but to receive user data we should use inputs.

    Let me know if you want more info on this topic.

    I hope it’s useful : )

    Regards,

    Marked as helpful
  • Mukwende•1,370
    @mukwende2000

    No a screen reader wouldn't be able to recognize that, you have a div which is a generic tag with no semantic meaning filled with spans which also generic tags with no semantic meaning

    Marked as helpful

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