Interactive rating component with flexbox and vanilla JS

Community feedback

• 

  ezecoder•870

  @3eze3Posted over 1 year ago

  Hello Sebastian, very good contribution to this challenge, I have some recommendations on your project.

  Html:

  • First it would be more convenient to use radio type inputs, instead of buttons , because with radio type inputs you can create groups, so you don't have to worry if two are selected at the same time because, they are only selected one by one.

  • Now the alt attributes in the images, you can see that they are just for decoration, they don't really have an impact on the functionality and acecibility of the project, so instead of putting alt="Icon that looks like orange star" alt="Orange credit card next to grey smartphone with list on screen and orange circle on the right" , it would be much better alt aria-hidden="true".

  • You could use semantic tags, in the case of the div representing the cards, you can use section-articles.

  JavaScript:

  • First of all I see that you are using many functions for each button , but you can better opt to use ``` const buttons document.querySelectorAll('.buttons')```` to have all the buttons in one HtmlCollection ,

  • It is not very advisable to use onClick at least in this project, it would be better to select the button of type send , and use an addEventListener to call the hangle function.

  • Then you can detect the events of the inputs when they change then with fun forEach recores each input with the "Change" event. and you call the function setRating to set the score, and in that function you can check which input is checked to get its score.

  Look here I leave the js code with the recommendations, hopefully it can serve you:

  const $card = document.querySelector(".main__wrapper");
  const $button = document.querySelector(".card__button");
  const $rating = document.querySelector(".card__rating");
  const $options = document.querySelectorAll(".card__check");
  function setRating() {
    let selectedOption = Array.from($options).find(option => option.checked);
    let message = `You selected ${selectedOption.nextElementSibling.textContent} out of 5`;
    $rating.textContent = message;
  }
  function hangle(event) {
    event.preventDefault();
    $card.classList.add("main__back");
  }
  $button.addEventListener("click", hangle);
  $options.forEach(option => option.addEventListener("change", setRating));
  

  Css:

  • It would be better if you import the fonts or use @font-fase() in the css file ,in a separate partial where you configure everything I have to do with the texts.

  Marked as helpful

  1

  ---

  

  Sebastian•170

  @DebestaPosted over 1 year ago

  @3eze3 thank you very much, I'm really greatful for this advice, I will put this into practice

  0