Exercise 6_ Interactive rating component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @fedementre, Congratulations on completing this challenge!

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Federico Durante•70

  @fedementrePosted about 2 years ago

  @correlucas That's right, I had forgotten this important rule! Thank you so much!

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  Regarding you questions,

  1. Do what Adriano said in the previous comment.
  2. When using any type of Inputs they need to be wrapped in a Form Element. The reason why your code was not working with the Form Element is because you used Buttons to create the ratings.

  The “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Federico Durante•70

  @fedementrePosted about 2 years ago

  @vcarames Thank you very much! This comment was very important as I learned how to use radio inputs! Now, however, I have another problem. If I go to insert the SUBMIT button inside the form, it does not work correctly, surely the problem is due to the action attribute inside the form element. I am trying to solve it. Anyway, thank you very much! You have been very kind!

  0

  

  Federico Durante•70

  @fedementrePosted about 2 years ago

  @vcarames I just find solution! To make the form not reload the page I inserted this action <form action="javascript:void(0)">

  0
• 

  Adriano•38,100

  @AdrianoEscarabotePosted about 2 years ago

  Hello @fedementre, how are you?

  to solve your problem, we can use this attribute on css:

  .star-container::focus {
     background-color: #FB7413; 
  }
  

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

  ratings.forEach(ratings => {
      ratings.onclick = event=>{
          const ratingValue=ratings.textContent
          const paragraph = document.querySelector(".utent-rating")
          paragraph.innerHTML= `You selected ${ratingValue} out of 5`
          submit.onclick = event=>{
      	   box1.style.display="none"
      	   box2.style.display="inline"
          }
      }
  });
  

  the rest is great!!

  Marked as helpful

  0

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @AdrianoEscarabote!

  I'm currently working on this challenge. The "make the submit button available only when the user selects a number" is one of the features that I want to implement.

  If you do not mind...How would I implement this? Do I give the button a class and remove it with JS?

  0

  

  Adriano•38,100

  @AdrianoEscarabotePosted about 2 years ago

  @vcarames yea! you can put the disabled attribute directly in the HTML, and then when the user selects some number, you can even use the same code block to remove the disabled attribute with the removeAttribute("disabled") method

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @AdrianoEscarabote

  Awesome! Thank you!! This definitely helps!

  1

  

  Federico Durante•70

  @fedementrePosted about 2 years ago

  @AdrianoEscarabote thank you so much! You are great!

  0

  

  Adriano•38,100

  @AdrianoEscarabotePosted about 2 years ago

  @fedementre no problem, keep coding!!

  Marked as helpful

  0