Interactive rating component using SASS and JS

Hi David, the challenge you designed is very nice and well designed, there are just a few points that would help improve your design.

1. Give the transition to the element itself, not to the floating element, because then when the mouse leaves the element, it will return to the original state in an animation. (rating__input button and .rating__btns).
2. For ranks, it is better to use width and height, because in this case, there is no need to adjust the layer value to make it square, and if the numbers inside the ranks become two or three digits in the future, there is no need to change the padding value again.
3. The centering of the element on the page is done correctly, but it is not correctly centered in high resolutions. For this reason, it is better to use the grid method to center the element. Use these styles in your body element: (display: grid, height: 100vh, place-items: center;) and remove these styles from your .rating element: (height: 100%; margin: 20vh auto;).

/////////////////////////////////////

To answer your question, currently I can't do this with css and javascript, instead you can use the max-height attribute to create the animation.

Of course, there is a solution for your question, and that is using the jQuery library. Example of jQuery: jQuery Animated Accordion. When you click on the accordion title, you can see the conditions for changing the .content element using the web developer tool.

Heyo,

What would you like to animate exactly? I only recently got into animations (css, js and some React animation libraries) so I'm not an expert but perhaps I could help.

I'm not sure display: none can be animated tough. There are ways around it. Opacity, for one, could be animated easily with js or with css keyframes.

Your solution looks really great btw, even as it is. :) There's a few small things you might wanna fix before looking into animations:

1. For this challenge, radio inputs are more suitable than buttons. Bit harder to style, but it would be the logical choice.

2. Your solution could be wrapped in <main> so it has a landmark at least. Guess it's not a huge deal, as it's just a component but it doesn't hurt to add it.

3. You should leave the alt texts blank, announcing them by screen readers adds nothing to the content. ^^ Adding an aria-hidden="true" as well is a good idea too!

4. For the submit button, don't use an <input>. There's a native button element in html that is a lot more suitable for this nowadays.