Skip to content
Submitted almost 3 years ago

Interactive Rating Component

Veronica Orozco•260
@VLOrozco
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey Frontend Mentor Community!

Here is my mobile first approach to the interactive rating component challenge.

A couple of q's and hope someone can help me find a solution:

  1. The interactive rating component works on Firefox, but on Chrome it returns undefined as a response on the Thank You page. I'd like for the input to work on Chrome like it does on Firefox.

  2. I'd like to add an alert to my submit function if a button/rating is not selected.

Your support and any other input to enhance my project is appreciated! Happy coding! ~Veronica

Code

Please log in to post a comment

Log in

Community feedback

  • David•7,960
    @DavidMorgade

    Hi!, congrats on finishing the challenge, I think I can have the answers to your questions.

    1- You are probably not getting the correct output on Chrome, because you are using onclick directly on your html, this is a bad practice and should be avoid, because, it can cause buggy behaviours like this one, also you are already calling the "getValue()" function in a foreach on the buttons array, so it should already work if you remove de onclicks from your html.

    2 - For this in your submitFunction function, you can use an if check for the number, if there is no selected number you can just simply return and the code will stop, or add an alert or some css styles that warning that the user needs to select a number before submitting.

    For example:

    function submitFunction() {
  const starRating = document.getElementById('rating');
  if (starRating.textContent <= 0) return alert('You need to select a rating!');
  ratingStartContainer.style.display = 'none';
  tyStartContainer.style.display = 'block';
}

    Hope it helps and fixes your problems!

    Marked as helpful

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