Interactive rating component using JavaScript and CSS Grid
Design comparison
Solution retrospective
Hi there! Happy to do this challenge 🤗 I've got some problems with the lay out of rating numbers: they can't stay in the middle of the background circle. Can anyone give me some advice? I'll appreciate that.
Community feedback
- @Mr-jawPosted over 1 year ago
Hello there 👋
Congratulations on completing the challenge
*here is a quick fix to center the number in the middle of the circle
⫸ In your style.css inside
.rtng-btn
element selector-
remove
padding-top: 0.2rem;
-
add
width: 3em;
now it should fix the centering issue and create a perfect circle 🔥👍
Here is something I noticed in your project that needs a fix
- The user shouldn't be able to submit a rating without selecting any. But, if you notice in your implementation when you click the submit button. It just displays You selected out of 5. But we don't want that to happen. Users shouldn't be able to submit without selecting a rating.
Follow this quick fix to overcome the issue 👇
- In the index.js file in line 7 we have the event listener on submit button
replace
sbmtBtn.addEventListener("click", function () { thankYou.classList.remove("hide"); mainBox.classList.add("hide"); });
with this
sbmtBtn.addEventListener("click", function () { if (rating.innerText === ''){ } else { thankYou.classList.remove("hide"); mainBox.classList.add("hide"); } });
We are basically telling if the actual rating is empty then do nothing, if it has a value selected display the thank you page.
Now it should have fixed the issue 🔥👍
I hope this was useful 😊
HAPPY CODING
Marked as helpful0 -
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