Skip to content
OverviewSolutions
9
Comments
3
Vani
@VANIMEHTA

All comments

  • Chris•710
    @Chris-2811Submitted over 2 years ago

    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!

    Interactive_rating_component

    1
    Vani•160
    @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 helpful
    0
  • Vani•160
    @VANIMEHTAPosted over 2 years ago

    This looks fine, just try to reduce the height of your main container. Also instead of px you can give height and width in vh and vw.

    0
  • Vani•160
    @VANIMEHTAPosted over 2 years ago

    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