This is a solution to the Interactive rating component challenge on Frontend Mentor.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

• Solution URL: solution
• Live Site URL: live site

• HTML5
• CSS
• Javascript

Learned to change colours for the selected component and update it when clicked another using javasctipt. Used Javasctipt to hide one block and make visible another block when proper event has occured.

To see how you can add code snippets, see below:

function onClick(rating){
    document.getElementsByClassName("info")[0].innerHTML = "You selected " +rating + " out of 5";
    for(var i=1;i<=5;i++){
        document.getElementById(i).classList.remove("clickedButton")
    }
    document.getElementById(rating).classList.add("clickedButton")
}
}

document.getElementById("submit").addEventListener("click", () => {
    document.getElementById("container1").style.display= "none"
    document.getElementById("container2").style.display= "flex"
});

• Github - Yash Dhumal
• Frontend Mentor - @yash-2138
• Twitter - @YashDhumal2138