All solutions

This project was important to put my first knowledge of JavaScript in practice. I tried first to get the number rating using the URL info, but I remembered that I could get what HTML is checked and get it value, so it was easier for me using this method.

<input type="radio" name="rating" id="one" value="1">
<label for="one">1</label>

I tried to use a forEach loop to search the checked radio but it's performance it wasn't good because it search for every single radio of my form even it wasn't checked, so I change to a for loop that stop the loop with a break when found a radio checked.

for (let i = 0; i < radios.length; i++) {
        if(radios[i].checked) {
            const value = radios[i].value
            rateNote.innerText = `You selected ${value} out of 5`;
            break
        }
    }

My first approach to change the images was using JavaScript to change the source, but it had a ugly transition even I set a transition in CSS, perhaps I screwed the accessibility with this.

I took more time that I spected to, and a didn't like it at all. But it's finally done.

Any suggestion will be appreciated

It was very difficult to me to replicate nft's image active effect, because I was changing the opacity of view icon and nft image together, so I made some makeshifts to settle the problem.

I removed display grid from body because I wanted to keep the attribution mark without change card's position, and change card's tag from div to main.

I'm not sure about the size of the gaps between the elements.

I don't know if card's width and the border-radius are correct, but I think it looks good enough.