🚀 Interactive rating component 🚀

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  DECORATIVE SVG'S ♨️:

  • The alt attribute is used to provide alternative text for images in HTML documents. The alt attribute is used by screen readers to describe the image to visually impaired users, which is essential for web accessibility.

  ---

  • Now, when it comes to decorative SVGs, they are used purely for aesthetic purposes and do not convey any important information or functionality to the user.

  ---

  • Since these images do not convey any important information or functionality, there is no need for an alt attribute.

  ---

  • So feel free to set the alt attribute as "" for decorative svg's, because alt="" will be skipped by screen readers they will consider the image as decoration

  ---

  Example:

  <img src="images/decorative.svg" alt="">
  
  

  <img src="images/icon-star.svg" alt="star">
    👇
  <img src="images/icon-star.svg" alt="">
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1

  ---

  

  Zsolt Varjú•490

  @zsoltvarjuPosted over 1 year ago

  Hello Abdul Khalid! @0xAbdulKhalid

  Thanks for you comment, i will definetly look into it. I already knew that it is a good practice to not use alt on decorative images but i forgot about using it so thanks for reminding me!

  Have a very nice day! :)

  0
• 

  ezecoder•870

  @3eze3Posted over 1 year ago

  Hello Zsolt Varjú, first of all it was a good result on your project.

  I could give you some suggestions to improve your code and its performance a little bit:

  HTML:

  • Regarding the images the alt attribute, I think it is not necessary since they are decoration images it would be better to use an aria-hidden true, to make it easier for screen readers.

  • You could choose to use a form and inputs type radio and the button type=submit, and create a group to allow you to choose only one of the options and not all at the same time.

  • And it would also be convenient to use semantic tags, for example you can use a <main></main> as a container tag instead of a div, and use sections for cards or articles.

  JavaScript:

  • As I suggested in the html the use of inputs, you could select all the inputs and pass them to an array to search for what is checked.

  • And you can use the change event, for the inputs, that would be better in this case to avoid repetition of the options.

  Here is the code, if it is helpful:

  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));
  

  Marked as helpful

  1

  ---

  

  Zsolt Varjú•490

  @zsoltvarjuPosted over 1 year ago

  Hello Ezequiel Córdova Sotomayor! @3eze3

  Thanks a lot for your helpful comment! I really appreciate it. I always intend to use more semantic tags, but end up using a lot of divs instead. However, your suggestion has motivated me to pay more attention to this issue in the future. Also, thank you for sharing the Javascript code snippet, I will definitely look into it and give it a try. That being said, for this particular project, I think I'll stick to my own code. It was one of my first Javascript codes and I'm very proud that I was able to make it work - I can proudly say that it's my own :P

  Thank you very much and have a very nice day! :)

  0