Interactive rating component

Community feedback

• 

  Fluffy Kas•7,675

  @FluffyKas

  Posted about 3 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 ^^

  51

  Marked as helpful
• 

  

  Chamu•13,780

  @ChamuMutezva

  Posted about 3 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

  11

  Marked as helpful
• 

  Madan Sinha•300

  @lazy4gyan

  Posted about 3 years ago

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

  02
• 

  darkweb•210

  @darkweb907

  Posted about 3 years ago

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

  01
• 

  AditNovadianto•1,040

  @AditNovadianto

  Posted about 3 years ago

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

  keep it up and happy coding ☕

  01
• 

  Ahmad Fardous Azimi•190

  @azimifardous

  Posted about 3 years ago

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

  01