Interactive rating component solution with SASS

Community feedback

• 

  Phuong•290

  @pengpongpongPosted almost 2 years ago

  Hey Kierro!

  There is a input tag where you can set the type to type="radio" and wrap all your input tags in a fieldset tag, so that you can only select one radio input at a time like so:

  <form id="rating_form">
            <fieldset>            
              <input type="radio" name="rating_number" id="1" value="1">
              <label for="1">1</label>
    
              <input type="radio" name="rating_number" id="2" value="2">
              <label for="2">2</label>
          
              <input type="radio" name="rating_number" id="3" value="3">
              <label for="3">3</label>
            </fieldset>
          </form>
  

  Now you can use label tag to style your rating number, add hover effects and use :checked selector to style the selected rating. In that way you can move some parts of JS code out.

  You can capture the rating input with an Event like you already did and make use of event.target.value in a function like so:

  let rate;
   const select_rating = (e) => {
    rate = e.target.value;
   };
  

  You have to append the function with a for loop to all radio inputs. So now you can use rate to mutate the end result in your second page.

  One other possible way would be to use FormData(). There you can capture the whole form like so:

  const form = document.getElementById("rating_form");
   const formData = new FormData(form);
  

  To retrieve the value of your rating you have to use the given methods like entries() or values() and loop through it since its an iterator.

  More info to FormData() (MDN Web Docs)

  I hope this helps a little bit and don't hesitate to ask!

  Marked as helpful

  0