Interactive rating component

Hi, your site looks great! Love that you added some transition to the rating circle.

About your question on the image tag, I think it's better to add the alt tag so that visitors can know what your image is about when it fails to load.

I also have a small recommendation regarding the position of your card. You can add display: flex and min-height: 100vh to the body to put the card in center of the page:

body {
   display:flex; 
   justify-content: center;
   align-items: center;
   min-height: 100vh;

Happy coding! 😊

Hi Sarah Hassan, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

To make the submit button work only when the user selects a number we can do this:

cardRatingList.addEventListener('click', (e) => {
    if (e.target.nodeName.toLowerCase() == 'li') {
        cardBtn.addEventListener('click', (e) => {
            cardContainer.classList.add('hidden');
            thankCard.classList.remove('hidden');
            cardRatingValue.innerHTML = rateValueSelectedByUser;
        })

        rateValueSelectedByUser = Number(e.target.innerHTML);
        Array.from(ratingListItems).forEach((item) => {
            item.classList.remove('active');     
            if(item === e.target && !e.target.classList.contains('active')) {
                e.target.classList.add('active');  
            }
        })
    }
})

The rest is great!

I hope it helps... 👍