Skip to content
Submitted 7 months ago

Interactive Rating Component

slack•120
@slackwaree
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

What are you most proud of, and what would you do differently next time?

What am I most proud of? I used my intuition to decide on using a grid layout for structuring the buttons. This is probably a really common practice in the workplace but it was my first time correctly using a grid layout. I also wrote some JavaScript in this project without the help of anyone else, which is something new to me because I'm very new to JavaScript.

What would I do differently next time? I think next time I would use input tags with a type of radio instead of button tags to create the clickable elements for selecting a rating. This might have solved a few issues I was running into while attempting to make the button tag function as a radio.

What specific areas of your project would you like help with?

Question. For a project like this, would it have been more optimal to create two different states on the same page and use CSS to hide or show those two different states - or would it have been more ideal to create two separate HTML pages with one state each?

I chose the former method, but I'm curious what other people would have done and why!

Community feedback

  • Koda👹•3,830
    @kodan96Posted 7 months ago

    hi there! 🖖

    The idea of creating a whole new HTML document for different phases of a process is not realistic.

    In modern web development you have access to many tools, frameworks and libraries which makes it much easier to manipulate DOM elements. If you think of a bigger website, with several ways of interaction it's just not efficient to generate a whole new site for elements. On your journey sooner or later you'll get into JS and it's libraries or frameworks, and you'll learn it's not that hard to do these things.

    Hope this helps! If you have any questions feel free to ask, I'll help if I can. Good luck and happy coding! 💪

    Marked as helpful
    1
    slack•120
    @slackwareePosted 7 months ago

    @kodan96 I thought that method seemed more optimal. Thank you for the reassurance!

    1
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have a suggestion regarding your code that I believe will be of great interest to you.

    MAKING RATING FORM ACCESSIBLE :

    • Currently the rating form is not accessible and because of using generic button elements which are paired up with Javascript to handle the operation.
    • This is your current markup,
    <div class="buttonWrap">
  <button class="rateBtn" id="rateBtn" onclick="userRatingValue='1'">1</button>
  <button class="rateBtn" id="rateBtn" onclick="userRatingValue='2'">2</button>
  ...
</div>      

<button type="submit" id="submit-btn">Submit</button>
    • This is not a good way to build rating form, Instead we want to use input element with type="radio" which is wrapped inside fieldset and form. By using radio buttons instead of normal button we can simply give checkboxes like options to select instead of relying on Javascript to work.
    • So you can update your markup in this way,
    <form>
  <fieldset>
    <legend class="sr-only">Please select a rating</legend>
    
    <div>
      <input type="radio" name="rating" id="rating-1" value="1">
      <label for="rating-1">1</label>
    </div>

    <div>
      <input type="radio" name="rating" id="rating-2" value="2">
      <label for="rating-2">2</label>
    </div>

    ....

 </fieldset>

  <button type="submit">
    Submit
  </button>
</form>
    • I would highly recommend you to check out my submission for this challenge, So that you could figure out how built this rating component in an inclusive way to prevent accessibility issues.
    • If you have any questions or need further clarification then feel free to reach out to me.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1
    slack•120
    @slackwareePosted 7 months ago

    @0xabdulkhalid Thank you for the analysis! And yes, I do agree using radio instead of a button would have been a better idea, I'll try to remember that the next time I need to create something that functions similarly to this project :)

    0
  • Daniel 🛸•44,310
    @danielmrz-devPosted 7 months ago

    Hello there!

    Congrats on completing the challenge! ✅

    Your project is looking fantastic!

    I'd like to suggest a way to make it even better:

    • Using margin isn't always the most effective method for centering an element.

    Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

    📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

    body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

    If you're using Tailwind, you can achieve the same with:

    <body class="min-h-screen flex justify-center items-center">

    I hope you find this helpful!

    Keep up the excellent work!

    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