Interactive Rating Component [html/css and a hint of confused TS]

Hello all, this is my solution to this challenge, its a bit of a mess, I was trying to use different things and lots went wrong!

What I used

• HTML
• CSS and
• JavaScript with Typescript

I am currently learning TS so using it is important, it was a massive challenge, I encountered a lot of errors but pushed through and its worked // save one error.

Things I Changed

• the colour! it was orange, that was failing the colour constrast check with the button, so, I changed it all to some blue-ish/purple!

• I also added a small red error message if you tried to submit without selecting a rating.

• I added a return button on the thank you card, however that is causing some issues for me in terms of resetting the card and having it function properly, so I will likely remove this.

Issues I am aware of

After you click submit, for example if you chose a rating of 3, when you return back to the card, it won't hover and display the correct hover colour of purple (since I changed the colours), actually it will happen even if you don't submit, as long as you clicked the hover state wont change the colour anymore - not sure why, likely resetting in JS issue, will work on it tomorrow.

Anywho, thanks and any advice appreciated to help me improve!