interactive-rating-component using DOM and module js

Solution retrospective
these helps me to practice a basics of javascript methods specially forEach method ,by selecting the parent container and then accessing each and every elment of that item .and also displaying the dataset-id in the result section of card. the parent container for rating btns is
<div class="rating-container"> <button class="btn btn-rating" data-id="1">1</button> <button class="btn btn-rating" data-id="2">2</button> <button class="btn btn-rating" data-id="3">3</button> <button class="btn btn-rating" data-id="4">4</button> <button class="btn btn-rating" data-id="5">5</button> </div>
and the result card should be set like these by default when we acess the DOM we remove these classlist and then add it to the rating card thats the whole logic in the css
.hidden { opacity: 0; display: none; }
the main logic in the js is printing the data-set id of the given btn and then print it to the result card
//remove active state from btns eachBtns.forEach((btn) => { btn.classList.remove('btn-active'); e.target.classList.add('btn-active'); textResult.innerHTML = `You selected ${id} out of 5`; //printing the selected value to result });
and also i added a little bit of code for to go back home page and to clear the rating buttons active class .
Please log in to post a comment
Log in with GitHubCommunity feedback
- @abdullah43577
This is really nice, you having to put that back button on the page to let the user navigate back to the previous version of the code is really nice. Keep up the good work bro.
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