All solutions

This project definitely took much more time than I expected. I had to do a lot of digging and watching videos about DOM manipulation. I used a lot of MDN to get me through this project. All in all, I feel good about the way it turned out. There was just one problem that I could not fix. When you have two buttons that have .active in their class list, I couldn't figure out a way to detect it and make sure it did not happen. If the user presses two ratings, the form will only submit the second rating as their final rating. If the user decides to click the rating again, it will deactivate due to removing the class. Is there a way to detect within in such a situation, the length and make sure that user doesn't highlight two rating? Is there a cleaner way that I could have organized my JS or CSS code?

I created this advice generator and added an animation to show the user to click the dice button. It only shows up on hover. It will play infinitely while the user is hovering over the dice. Let me know if it's over done and needs to be removed. I also switched the svg with CSS. I would love to know if there are other (possibly, easier) ways that I could've done this without using CSS.

This is my first attempt at this challenge. I would love to hear some feedback about things I could improve or change if I continue to work on this challenge.

Thanks in advance!