Interactive card to rate made with html, css, JS and lots of LOVE

Community feedback

• 

  Sean Gray•690

  @seangray-devPosted almost 2 years ago

  Hey Cristhyam,

  I like your solution, the design is looking pretty good! I have a suggestion to improve this challenge though:

  A better way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it for accessibility. Since you used an ordered list, I was able to select multiple ratings to submit.

  Hope you found this useful! Happy coding! 😁

  Marked as helpful

  3

  ---

  

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  @seangray-dev Thanks for the feedback, its really important to me. I will correct the errors later today, thanks. :)

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Cristhyam-Augusto, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To make the submit button work only when the user selects a number, we can do this:

  for (let i = 0; i < ratingValues.length; i++) {
    const rating = ratingValues[i];
    rating.addEventListener("click", () => {
      rating.classList.toggle("button_select");
      writeRate.innerText = `You selected ${rating.innerText} out of ${ratingValues.length}`;
      btn.addEventListener("click", handToggle);
    });
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  1

  ---

  

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  @AdrianoEscarabote Thanks for the feedback. I just fixed the error and better understand the code.

  Could you tell me how you managed to post the code in this format? I tried but I couldn't Thanks again!

  1

  

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  @Cristhyam-Augusto wrap the code with this: ```

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Change width to max-width in your component’s container to make it responsive.

  • Remove the header and section elements. They are not needed as this is a component.

  • To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Cris Augusto•160

  @Cristhyam-AugustoPosted almost 2 years ago

  @vcarames Thanks for the feedback. ^^

  1