Interactive rating component with HTML, CSS and basic Javascript
Design comparison
Solution retrospective
I am new to learning JavaScript. This was my attempt at building a working project with basic JS. Any suggestions or advice on how I can improve are welcome!
Community feedback
- @john-miragePosted over 1 year ago
Hello,
For the submit button, you added letter spacing by adding one space character between the letters, don't forget the nice css property: letter-spacing which add some space between the letters for you.
Marked as helpful1@sommmmorePosted over 1 year ago@john-mirage I was completely unaware of that property. Thanks for letting me know!
0 - @LeonardoR3DPosted over 1 year ago
Hi, first of all congratulations on completing the challenge :D.
And now my javascript suggestions would be:
1° Create variables to avoid repeating selections, for example:
const allRatingBtns = document.querySelectorAll(".rating-btn");
this way if at some point you change the name of the class in your objects you will only have to change the name in your variable instead of having to do it in all your code.
2° When you create variables do not use "var", although it still works it is something that is already obsolete because it causes problems with the new methods, now you use "let" and "const", you use "let" when you want your variable to be able to change value at some point, like this
let rating = 0;
rating = 5;
and you use "const" when you do not want this to be possible, for example if you do this you will get an error,
const rating = 0;
rating = 5;
this is convenient when you use variables that you do not want them to change.
3° And finally I suggest that every time you make a loop with some array you use the new forEach method, it is easier to read, shorter and you don't need to specify the number of cycles since it will repeat the action for each component of the array, the following would be a good example:
const allRatingBtns = document.querySelectorAll(".rating-btn"); allRatingBtns.forEach((btn) => { btn.addEventListener("click", selectedButtonColor); });
Marked as helpful1@sommmmorePosted over 1 year ago@LeonardoR3D Hey Mr. Romero, thank you for your helpful advice! I'll surely try to implement it the next time around. :)
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