Skip to content
Submitted over 2 years ago

Rating component using HTML, CSS Flexbox & Vanilla Javascript

Joe•60
@Joe-Lindie
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

Hello all,

I've not posted a solution for a while. This is my first project that involves Javascript / DOM manipulation. All feedback / constructive criticism is welcome!

The most difficult part for me was JavaScript. My solution works and the UX looks nice. (I think..)

Aspects I'd like to change:

  1. When you click the 'submit' button without making a feedback selection, you get an error message saying, 'Please make a selection.' At the moment, you cannot proceed to the 'Thank you page' without making a selection, but an error message would help the user know what they were doing wrong.

I attempted to do this by placing an empty <p> tag in the HTML like this,

<p id = "error_msg"></p>

I then targeted this tag in the javascript by its ID. I planned to set the textContent / innerHTML to "Please make a selection" if the user did not.

I could not figure out the Javascript logic, so I ended up deleting this section. If anyone can help me implement this logic based on my code, that would be great!

Thanks, all - Have a great afternoon!

Community feedback

  • Justin Green•2,770
    @jgreen721Posted over 2 years ago

    ah nice!

    if you mean assign 2 different 'click' events to the same element I believe you CAN, but I'm not sure it's ultimately the best practice. On something this size though, I don't think its an issue. Putting 2 events on an element like "mouseenter/mouseleave" is common/fine but ya, I'd be careful on giving multiple click events. Nice work on getting your solution!

    Marked as helpful
    0
  • Justin Green•2,770
    @jgreen721Posted over 2 years ago

    If you take the submit function outside of customerRating function, you can then write a if/else condition depending on whether customerRatingNumber has been defined/received a value yet. It may involve declaring customerRatingNumber as a global (and using let/var ); the way you're doing it now i believe you are creating a new variable on each click rather than simply updating the one (const variables cant be updated; let/var allow updates...javascript funnyness). But ya,

    let customerRatingValue; in your global scope and take the submit function out of the other one and inside of that submit, test to see if customerRatingValue is defined(been assigned a value) and then render out accordingly. Hopefully that makes sense. Nice work on it though!

    1
    Joe•60
    @Joe-LindiePosted over 2 years ago

    Hello @jgreen721,

    Thanks for your help :)

    I managed to find a solution, but it is slightly different from the one you suggested. I used an if/else statement to push an error message if no selection is made. But, I have added two click event listeners to the submit button. Are you allowed to have multiple event listeners on one element? My solution works but could probably do with some cleaning up.

    Thanks once again,

    Joe

    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