
Interactive rating component using JS , HTML & CSS
Design comparison
Solution retrospective
I am proud of my problem solving and the approach to find a solution to this challenge.
What challenges did you encounter, and how did you overcome them?The time to use my programming logic to find the solution to this challenge.
What specific areas of your project would you like help with?I need help with my Js and CSS code.
Community feedback
- @KitalpharPosted about 2 months ago
Greetings!
I think your solution is pretty good, works nicely, only a few thing could use some fixing. I'll try to give you a few pointers:
First, HTML:
- in your HTML you have 2
<h1>
headings, now this is usually reserved as the main heading of a page, and generally there shouldn't be more than 1 since it confuses search engines and screen readers. - In your JS you are using
.style.visibility
to hide the success window until it's needed, which i like to be honest, however setting visibility tohidden
makes it so your content is hidden visually but your<h1>
heading will still be visible to screen readers, which will likely still read it out. Usingdisplay: none
would hide it completely until it is needed. - Your could add
tabindex="0"
to your<span>
elements housing the rating numbers to allow for keyboard navigation to select them and also trigger theclick event
you added to them.
CSS:
- For the hover/focus effects this challenge asks for you should look into
:hover
;:focus
;:focus-visible
and in the case of wanting to style a container based on something focusable nested inside, the:focus-within
pseudo-classes. - This Solution includes the Overpass fonts in the HTML but is not referenced in the CSS, it is using Roboto instead, you can fix this easily by editing it to
font-family: "Overpass", "Roboto", serif;
which will use the challenge suggested font and will still use Roboto and Serif as fallbacks. Alternatively you could download the font files and look into using@font-face
to include them. - As this solution is missing a
@media
query you should look into utilizing that to adjust sizes across various breakpoints for better visibility.
As for JavaScript, i think it's fairly well made, the only thing i could say is you should try using
try...catch
in your code to at least attempt to handle errors if they occur.Hope i was able to help!
Marked as helpful0 - in your HTML you have 2
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