Design comparison
Solution retrospective
Hi guys I was not able to achieve the grey state in the section with the rating-numbers. How can I achieve it ? Thank you for the help!
Community feedback
- @VANIMEHTAPosted over 2 years ago
Hi to make your ratings working ill suggest the following changes: 1)In your Html code change the line "( <button class="btn-selected">You selected 4 out of 5</button>)" to : " <div class="success-msg"> You selected <span id="submitted-rating"></span> out of 5 </div>" 2) in java script you can do the changes as :
const submit1 = document.querySelector(".submit-button"); // selecting class of all the buttons. const submitPage = document.getElementById("submitPage"); //selecting our initial card const successPage = document.getElementById("succes"); //selecting our thank you card const submittedRating = document.getElementById("submitted-rating"); const background = document.getElementById("container3");
let ratingValue; submit1.addEventListener("click", function () { const checked = document.querySelector('input[name="ratings"]:checked');
// check to see if a rating is selected if (checked == null) { console.log("null"); } else { // set value to be passed to success page ratingValue = checked.value;
// toggle current card page submitPage.classList.toggle("hide"); background.classList.toggle("hide"); // toggle success page successPage.classList.toggle("hide"); // set submitted rating submittedRating.innerText = ratingValue;
}
return ratingValue; });
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