Interactive rating component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hiya,

  Lovely solution. It's nice to see that you used radio inputs for the rating, I think that makes the most sense for this ^^

  There's a few things you might want to double-check though:

  1. You forgot to set the button's font-family, so it's using the browser's default right now.

  2. I'd consider removing the alt text of the images. They're decorative only, and their alt text don't add much to the content.

  3. You could align your component vertically as well (at the moment it's not, you're just using a margin-top).

  4. Instead of using multiple media queries to set widths in %, you could just set it once with max-width. For this, I'd recommend not using %, but rem perhaps. Using % for setting widths in itself isn't a good idea.

  5. I'd argue if it's a good idea to use sections for everything. Even your button is wrapped in a section. While in itself it's not super harmful, it's the same as adding extra divs to your code, even when that's not needed. Semantically speaking, you may as well use divs here, it wouldn't make a difference.

  As an alternative, you could:

  • use form and fieldset for the radio inputs
  • remove the extra section that wraps the button, there's no need to wrap it in anything
  • remove the section that wraps the images, there's no need to wrap them in anything either
  • remove the section that wraps the title and paragraph, you're not applying any styles to this either (or the ones you applying, like the flexbox isn't needed), therefore it's unnecessary

  Happy coding ^^

  Marked as helpful

  5

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @FluffyKas Thank you for the feedback!

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 2 years ago

  Greetings Catherine. Nice work on your latest solution. Here is my observation:

  • try clicking the submit button without making a selection when the page loads. I would suggest providing feedback to the user as currently - nothing happens. If you check the console the following error shows Uncaught TypeError: wasSelected is null
  • for radio buttons to work as a group , they should all have the name attribute which should be the same.
  • your javascript needs attention, the radio buttons are the interactive elements - those are the ones that should have the direct click events not the labels. Here is a few adjustments that i can think of :

  
  //const ratingNumbers = document.querySelectorAll(".rating-number");
  const defaultActive = document.querySelector(".default-active");
  const submitbtn = document.querySelector(".btn");
  const resultCard = document.querySelector(".back-section");
  const questionCard = document.querySelector(".front-section");
  const resultText = document.querySelector(".result-text");
  const inputs = Array.from(document.querySelectorAll(".radio-btn"))
  console.log(inputs)
  
  /* Targeting selected value
  ratingNumbers.forEach((button) => {
    button.addEventListener("click", function () {
      ratingNumbers.forEach((ifSelected) => {
        ifSelected.classList.remove("was-selected");
      });
      button.classList.add("was-selected");
      defaultActive.classList.remove("default-active");
    });
  });
  */
  
  function check() {
    for (const input of inputs) {
      if (input.checked) {
         // do anything with the checked radio button and associated label, eg
        input.classList.add("was-selected"); 
        resultText.textContent = `You selected ${input.value} out of 5`;      
      } 
    }
  }
  
  //Rendering selected value
  submitbtn.addEventListener("click", function () {
    check()
    //const wasSelected = document.querySelector(".was-selected");
    //let selectedValue = wasSelected.textContent;
    resultCard.classList.add("show-card");
    questionCard.classList.add("hide-card");
   // resultText.textContent = `You selected ${selectedValue} out of 5`;
  });
  

  • the bottom line is , interaction (click events, checked, selected etc) must be attached to interactive elements not the elements that is labeling them

  Marked as helpful

  1

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @ChamuMutezva Thank you for the feedback!

  0
• 

  Madan Sinha•300

  @lazy4gyanPosted over 2 years ago

  Hi @catherineisonline, Can you advise from where you are learner Dom as I am facing difficulty when implementing them.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @lazy4gyan Cannot come up with only one specific place to learn from, to be honest. I was learning in many places and eventually started understanding. I don't always understand everything as soon as I start reading about it, sometimes have to read from many different sources.

  0

  

  Madan Sinha•300

  @lazy4gyanPosted over 2 years ago

  @catherineisonline thank you for helping me!

  0
• 

  darkweb•210

  @darkweb907Posted over 2 years ago

  Great work. It's perfectly designed and well responsive. Code is also perfect. Happy Coding Mate.

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @darkweb907 Thank you!

  0
• 

  AditNovadianto•1,040

  @AditNovadiantoPosted over 2 years ago

  good job cathrine you did this project so perfectly!!!

  keep it up and happy coding ☕

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @AditNovadianto Thank you!

  0
• 

  Ahmad Fardous Azimi•190

  @azimifardousPosted over 2 years ago

  Great Job. I reviewed your code It's amazing. 👌

  0

  ---

  

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted over 2 years ago

  @azimifardous Thank you!

  1