interactive-rating-component

Community feedback

• 

  Ozmar Mendoza•240

  @ozzy1136Posted about 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.

  Marked as helpful

  1

  ---

  

  Greta Vasiulyte•20

  @great1gretaPosted about 2 years ago

  @ozzy1136 Hi Ozmar, thank you SO much for taking time to explain this to me! This is super helpful! ♥️ cant wait to explore this further

  1
• 

  Lucas Berta•260

  @LucasBertaPosted about 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 =)

  Marked as helpful

  1

  ---

  

  Greta Vasiulyte•20

  @great1gretaPosted about 2 years ago

  @LucasBerta Hi Lucas, thank you for your feedback.

  Huh, i wonder why the live page doesnt work for you? All is fine with me. I hosted it with Netlify, as per usual.

  Yes, i am aware about @media, i get the process and how it works, but when i play around with it, its like im shooting blindly. There is something i am definitely missing. I will try again on my next project.

  Thanks for the link and advice, i will give priority to rem over px from now on👍

  0