Interactive Card layout - Responsive, HTML, raw CSS and Javascript

Hi Scott,

Well done! Great job with using the type=button on your form (you're spot on with that, we only need a type=submit if there's a server somewhere to send the data to) and toggling the classes 💯

For the selectable ratings, a button element works, as you've done. Another type of input that is a bit more accurate meaning-wise (since we're providing a list of options and a user can only select 1 option) is a set of radio buttons. It takes some styling for the visual overlay of the label over the input, but the ability to select a radio button by selecting its label works to our advantage here.

I also suggest the radio buttons because there's another property of this input that feeds into your question about populating the "you selected X out of 5". We can set the value attribute of each radio button to represent the selected value (the number rating, just like you've done with your buttons), then iterate through the radio group with JavaScript to identify which button is checked, store the checked value as a variable and use that to dynamically update your <p> element with each new selection. In a form, only the radio button that's checked will be submitted, so it cuts down on the looping/checking you need to do.

You've already got the iterating through a loop handled but here's an example that loops through a radio group to see which input is checked so you can see it applied to the radio group. They use a for...of loop, and I'll stick to that with my example, but don't feel like you're locked into doing it that way.

To update the "you selected X", you can create a variable from your #ratingSelected element (let's call this variable confirmRating). To store the checked value, let's create a variable called yourRating. Then update the .innerText property of confirmRating with the value of the selected input (yourRating). So you're dynamically updating the content of the <p id="ratingSelected"> element with yourRating. Altogether, it'd look this:

const confirmRating = document.getElementById('ratingSelected');
function findChecked() {
    let yourRating;
    for (const radioButton of radioButtons) {
        if (radioButton.checked) {
            yourRating = radioButton.value;
        break;
    }
    confirmRating.innerText = `You selected ${yourRating} out of 5`;
}

I put it inside a function so we can call the function with our event listener, like the class toggling you've already got 😊

Great job incorporating global variables on the root and making sure your images have alt text!! 🙌 I just noticed you've got two <h1> elements, go ahead and make the heading in the thank you card an <h2> since we should only have one h1 per page.

Hopefully that helps and happy coding!