interactive-rating-component

Community feedback

• 

  Ozmar Mendoza•240

  @ozzy1136

  Posted over 2 years ago

  Great job with this one!

  Strictly related to the question you asked, I think it would be easier to use radio buttons instead of regular buttons. This way, you can check if a value was submitted for the rating. This solution uses the FormData API, which has great browser support.

  A simple example:

  // index.html
  ...
  <form>
    <label>1
      <input type="radio" name="rating" value="one" />
    </label>
    // More radio buttons with labels
    ...
    <input type="submit" value="Submit" />
  </form>
  ...
  
  // app.js
  const formEl = document.querySelector("form");
  formEl.addEventListener("submit", (e) => {
    e.preventDefault();
    new FormData(e.target);
  }
  formEl.addEventListener("formdata", (e) => {
    // e.formData is a JavaScript iterator object, so you have to loop over it
    // data will be in the form of [name, value]
    // You could also do for (const [name, value] of e.formData) {...}
    for (const data of e.formData) {
      if (data[0] === "rating") {
        // There was a rating button selected
        ...
      }
    }
    // There was not a rating button selected
    ...
  }
  

  Check the MDN Web Docs for more information about FormData. Using radio buttons with labels also takes more effort to make the buttons look how you need to, so I would suggest you look for guides that go over this.

  I imagine you could loop over the radio buttons on submit and test for a checked value instead.

  11

  Marked as helpful
• 

  Lucas Berta•260

  @LucasBerta

  Posted over 2 years ago

  Hi Greta, the live page is not working so I can't check what's the issue with the responsivity, but I've seen you didn't use @media queries on your project.

  Try to search for "@media css" on google, you'll quickly understand it and will be able to implement it on your project for making it responsive.

  Also, try to replace all px units to rem units for a better responsivity patterns. https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/#what-about-625percent

  I hope you find this feedback useful =)

  11

  Marked as helpful