InteractiveRatingComponent

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 11 days ago

  Well done! Everything looks good here, my only suggestion is that you make the rating buttons actual buttons as they are not accessible via keyboard like the submit button is.

  Also the page isn't fully responsive as there is a horizontal overflow on mobile screens.

  You should generally try to avoid setting a specific height/width on certain elements like .heading and .text.

  I also see that you are manually adding a margin to some element to put them off the left, but that what padding is for. ALso is you do it like this, you have to add a margin to each element which makes your code less flexible and less responsive. Just put a padding like 1 or 2rem on the card-container and that should help the elements flow better.

  Also for your JS i see you made each rating button have an id of 'cicle-value' and you used querySelectorAll. In webdev this is not good practice as there should be only 1 element that has an id as ids should be unique, tho it works this is not the best practice. Just change the id to a class and you should be good.

  Also you forgot to handle the error when the user presses the submit button but didnt click a value first. You should check the value before submitting the form and give them a heads up that they need to choose one.

  There is a more elegant(tho complicated) way of doing this, that is by using a form element, since you are actually submitting data. You could use a form component, with the 5 buttons and a hidden text field that get assigned a value when a button is pressed, then add action='/rating-success.html', make that html page and if you used the form input properly the data will be in the url like ?rating=5 and you can use js to fetch that value.

  You can look at my solution to see how I did it.

  All the best and keep working hard.

  Marked as helpful

  0