Skip to content
Submitted almost 2 years ago

interactive-rating-component-main

Hamid Abdalla (HA)•250
@hamid-abdallah-mohammed
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

it took only one hour

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • To properly center your content to your page, you will want to add the following to your <Body> Element (this method uses CSS Grid):
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
    • Do not use percentages for your component's container width as it will cause it lose its design and warp.
    • To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the main element.

    More Info:📚

    MDN Main Element

    • Along with the blank alt tag, you also want to include the aria-hidden=“true” to your “ images/icons” to fully remove them from assistive technology.
    • Your ratings should have an active state to let users know which rating they have chosen.
    • The proper way to build this challenge is to create a form and inside of it, the “rating buttons” should be built using an input radio (wrap all of them inside a fieldset), since this will prevent additional buttons from being active at the same time, and it should have a label element attached to it for accessibility.

    More Info:📚

    MDN <input type="radio">

    MDN <fieldset>: The Field Set element

    If you have any questions or need further clarification, feel free to reach out to me.

    **Happy Coding!**🎄🎁

    Marked as helpful
    1
    Hamid Abdalla (HA)•250
    @hamid-abdallah-mohammedPosted almost 2 years ago

    @vcarames brilliant ! Thanks dude

    0
    バレンタイン 😈•64,170
    @VCaramesPosted almost 2 years ago

    @hamid-abdallah-mohammed

    I am glad that I was able to help out!

    Keep it up!

    0
  • yishak abrham•2,150
    @yishak621Posted almost 2 years ago

    Congrats for completing the project but the radio btns isnt circular its maybe because of the height and width (or padding ) u applied to the button and the border radius(it should be 100% if the width and height is equal) for perfect circle.....and also it shouldn't let the user to pass without clicking the rating buttons Please work on that (display error message or alert) and also use the design font from google fonts

    3
    Hamid Abdalla (HA)•250
    @hamid-abdallah-mohammedPosted almost 2 years ago

    @yishak621 omg, I forgot to display an error thank you so much bro

    1

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