Interactive Rating Card using Vanilla CSS and JS
Design comparison
Solution retrospective
This was a very interesting project. I got to learn a lot. Here are few of the interactive things to notice -
- If you submit without selecting any rating, the rating is 0
- You can select only a one rating at a time
- You can also deselect the rating by clicking it once again.
I know these are very basic logic, but it was fun to implement them in JS.
Now, here are some of the things I would love to get feedback on -
- I wanted to use a form and radio buttons for ratings, but was unable to style them, hence I used div.
- Some best practices for writing JS.
- Any other feedback about the project is also welcome !
Community feedback
- @IryDevPosted about 1 year ago
Hey @archihalder, well done for completing this challenge 😄
I will try to answer your questions :
-
Hiding Radio Buttons: Radio buttons can be visually hidden while maintaining their functionality using the layering and opacity technique. This would create a custom look while maintaining the radio button semantics.
-
Using Labels: Use <label> tags to enclose radio buttons and their text content. This will make it easier to select buttons even when clicking text.
-
Custom CSS Styles: Apply custom CSS styles for radio buttons, using properties like border, background, padding, margin, etc.
Here's an example:
HTML ;
<div class="rating-container"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5">5 Stars</label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4">4 Stars</label> <input type="radio" id="star3" name="rating" value="3"> <label for="star3">3 Stars</label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2">2 Stars</label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1">1 Star</label> </div>
CSS :
.rating-container { display: flex; align-items: center; } .rating-container input[type="radio"] { display: none; /* Hide the default radio buttons */ } .rating-container label { cursor: pointer; margin: 0 5px; font-size: 1.2rem; color: #999; } .rating-container input[type="radio"]:checked + label { color: #ff9800; /* Change color when radio button is checked */ }
I hope you'll find this helpful😄
Marked as helpful1 -
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