Skip to content
Submitted over 1 year ago

interactive rating component using vanilla javascript

jeffreylaichunghang•60
@jeffreylaichunghang
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

This is a "simple" javascript project but still toke me a long time to figure things out. It turns out a simple logic of how to allow only one button(rating) being selected, ie. while the user changes the rating, the previous button's state change back to unselected. I am sure I will remember this experience deeply since it is my first javascipt task.

I really hope someone will generously tell me how to rearrange the code so that there can be an alert showing up if the user attempt to submit withour rating. In my code, the submit function is inside the rating function so it seems alright as the user cannot submit without rating but I am not sure where to put the alert message as well.

Community feedback

  • Danielle•160
    @dfeeney96Posted over 1 year ago

    Hi! I've recently completed this task too and it took me longer than I was expecting. I really like your use of events and targets - something I am still not using naturally!

    For your query regarding the alert, I think I found a solution that may be of help. I created a variable to hold the score, which would populate with the innerText of the button that the user clicked on. I then created an if statement to say that if the score variable was empty (i.e. value of ""), then add / remove classes to bring up an 'error' card instead of the 'thank you' message card. Perhaps using this logic could also help you build in an alert?

    I would also consider how you could make it so that only one score is collected for if the user goes rogue and decides to click on multiple buttons before pressing submit. When I did this, I got a concatenated score (e.g. 12345) rather than just one number (5).

    My solution is here if it helps!: https://www.frontendmentor.io/solutions/interactive-rating-component-with-js-_iLXWW9aGB

    I'm not sure if there's a more elegant way of doing this, but happy to be told if there is!

    Marked as helpful
    0
    jeffreylaichunghang•60
    @jeffreylaichunghangPosted over 1 year ago

    Thank you so much! That's for sure works too.@dfeeney96

    1
    jeffreylaichunghang•60
    @jeffreylaichunghangPosted over 1 year ago

    I just added the alert message by sperating the two functions, it still works perfectly. @dfeeney96

    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