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!
Vani
@VANIMEHTA
All comments
- Vani• 160
@VANIMEHTA
Posted
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 helpful
0 - Zuliatu• 140
@zuliat
Submitted
Please Kindly leave your feedback .Thank you.
Vani• 160@VANIMEHTA
Posted
Try to position this container in center it would look neater. You can do this by giving equal margins from top and left in % to your container. Also I guess you forgot to add hover state to the signup button.
Marked as helpful
0
