Design comparison
Solution retrospective
any suggestions and comments appreciated i used basic javascript to make it work but i want to learn the right way of using to make it work so any suggestions are useful resource to the javascript part will be appreciated
Community feedback
- @3eze3Posted over 1 year 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
1 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord