Interactive Rating Component with basic js

Community feedback

• 

  Ezequiel•1,250

  @3eze3

  Posted about 2 years ago

  Hi Biruk Moges, very good job with this project, look I have some improvements that you can consider for your code, I hope you find them useful. never stop practicing.

  Html:

  • The h1 tag , there should only be one per html document , then you could opt to use an h2, you can't have two h1 tags in the same document.

  • It would be better to use semantic tags, for example instead of putting <div class="main" id="main"> you can use a main tag ``` <main class="card">````.

  • You should also use more descriptive names, or use a class methodology, it is more descriptive and helps not to repeat styles, there are many methodologies, but the most friendly to start with is Bem.

  Here you have the documentation in case you are interested: BEM DOC

  • You could choose to use radio type inputs, instead of buttons.

  • As for the images you can use the attribute aria-hidden="true", to avoid accessibility problems if the images are for decoration or do not provide anything more than design.

  JavaScript :

  • It would be better to use the switch event with the input tags I told you about in HTML, so you can control when the user switches to another rating.

  • And you can use the event delegation to check which input has been clicked, this helps a lot since you only use one event in the project.

  • And also with the change of event, you do not have the problem of design that at the moment of clicking in another part of the page your button is deselected, for that reason it would be better option the input. Puede consultar la información sobre la delegación de actos aquí: Event Delegation

  10