Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

This is my first try on this challenge

Kohsey 40

@KohseyPower

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I fixed the issues that @Dami-Moore wrote to me.

Feedback are welcome.

Community feedback

@Dami-Moore

Posted

Hello Koshey! Congratulations on completing this project and that's great progress.

I have a few comments.

  1. In your style.css file, it's my opinion that adding the ".menue ul li button:active" in a way conflicts with the click event in your script.js file. I think you can safely remove this portion or comment it out.
  2. Also, the "cursor: pointer; " within the ".menue ul li button" selector in your style.css can also be removed and put instead within the ".menue ul li button:hover"
  3. Also, directly styling the button element, is why the hover effect on the button element still works after a button is selected. Instead, you can use a class and style that class initially, then in your DOM, you can remove it and add the new class ".selected". This will ensure that every styling associated with that previous class is removed and only stylings within ".selected" will display.

On accessibility: The issue noted is semantics. There should be landmarks to describe each parts of your code. For simplicity, you can wrap all your code, after the body tag, with a main tag. There's more to comment on as regards semantics here, but to keep it simple, that's that.

I hope this was useful and of help to you.

Happy Coding!

Marked as helpful

1

Kohsey 40

@KohseyPower

Posted

@Dami-Moore Thank you for answering me and for taking the time ! I'll correct that right now !

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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