@pradeeps4ini
Posted
Hi, @Olumide2596. How are you?
You did an awesome job at implementing the design.
To learn how to uncheck the previous rating, you can read this little demo code i wrote. Play with it, modify it and if you don't understand someting. Feel free to reach me. https://codepen.io/pradeeps4ini/pen/OJvZGev
Some suggestions to improve the code:
-
You should use <main> element only to wrap the main content of the page. You should keep the attribution content in a <footer> element and out of the <main> element. These are semantic elements and used to structure the page. You can read more about them here...https://www.freecodecamp.org/news/semantic-html5-elements/.
-
Instead of using
min-width: 400px, usemax-width: 400px. And removewidth: 50%, you won't need it, with max-width: 400px. This will make your container more responsive. -
In the ratings section, we are interacting with the rating elements. Therefore you should use either <buttons> or <input type="radio">. I prefer <input type="radio">. This is much better for accessibility and readability. Read the page i linked above about semantic elements. You'd get a better understanding of how and for what purpose to use an element.
Marked as helpful
@Olumide2596
Posted
@pradeeps4ini Thanks for your feedback, I have made improvements to my code. I wasn't getting the unchecked previous rating from your code pen. But, I've been able to come up with something by using :focus on the CSS. I'll appreciate further feedback on what I can improve on.
@pradeeps4ini
Posted
@Olumide2596 You solution looks good. And using focus to style is a good idea. Thanks for teaching me this.
Have fun and keep doing more projects.:)
@Olumide2596
Posted
@pradeeps4ini Thank you 😁
