Skip to content
Submitted over 1 year ago

Interactive rating component solution

Olena Shevchenko•200
@olenahelena
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 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); }

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    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
    0
    Olena Shevchenko•200
    @olenahelenaPosted over 1 year ago

    @fernandolapaz thank you so much! It is really useful 😊

    1
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    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
    0
    Olena Shevchenko•200
    @olenahelenaPosted over 1 year ago

    @mukwende2000 thank you for an answer!

    0
    Mohammed Fakih•1,590
    @javascriptor1Posted over 1 year ago

    Hi Olena @olenahelena ,

    I have just submitted my accessible solution to this challenge a few minutes ago.

    Here is a repo for the solution : https://github.com/javascriptor1/interactive-rating-component-main-tailwincss

    Marked as helpful
    0
    Olena Shevchenko•200
    @olenahelenaPosted over 1 year ago

    @javascriptor1 I will check it, thank you!

    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