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.
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!
