Interactive rating component created using html , css and javascript
Design comparison
Solution retrospective
I will really appreciate the feedback . I encountered a particular problem and I couldn't fix it .The number rating has an active background effect on it when ever a user click on any of the numbers (See Number 4 rating on the original screenshot from frontend for reference ). I will really appreciate any help I can get . Thanks so much
Community feedback
- @SoulOfMoPosted about 1 year ago
Nice work kelly, I recommend you use a button tag instead of list tag. the background effect is done by using a pseudo class
button:focus { background-color: var(--lightGrey); color: var(--white); }
Check my solution rating component
1@kellynickPosted about 1 year ago@SoulOfMo Thank you so much. I did what you told me to do and it worked . Simple and straight forward. Thank you 🙏🙏🙏
0 - @CarlHummPosted about 1 year ago
Hello Good job, you are on the correct path, there are just a few changes that might help
If you uncomment your JavaScript you will find that on click a class named toggle will be added to each item that is clicked.
This is just a class name. To style it we need to refrence that name in css using a CSS class selector.
li.loop.toggle { background: hsl(25, 97%, 53%); color: white; }
Now every time an item is clicked it will reference the above styling and give it an orange background with white text.
A new problem
But wait! Notice now if we click multiple items the toggle class gets added to them all? That's because we haven't checked if the class already exists in our Javascript before adding another class.
We can fix this by implementing a check. The complete code may look something like this:
const items = document.querySelectorAll('.loop'); for(let i=0; i<items.length; i++) { items[i].addEventListener('click', (e) => { if(document.querySelector('.toggle')) { <-------------- document.querySelector('.toggle').classList.remove('toggle'); } e.target.classList.toggle('toggle'); }) }
Another method of styling without JS
There are many different ways of doing the same thing. For example, you could have used pure CSS with labels and radio inputs for the active styling and used JS to set the value. All preference.
input[type="radio"]:checked + label
Hope some of this helps, good luck on your future projects and learning!
0@kellynickPosted about 1 year ago@CarlHumm Thanks for your response I had issues implementing the JavaScript. It still didn't work but someone suggested I use button . Which I did then I used :focus pseudo class and it worked. Thanks for your feedback 🙏🙏🙏
1
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