Interactive Rating Component First Solution

Through this project, I gained an understanding of building an interactive rating interface using HTML, CSS, and JavaScript. Users can choose a rating and submit it to reveal a gratitude message.

The HTML structure involves creating two <section> elements representing the rating and thank-you states. By utilizing classes such as .rating-state and .thankyou-state and toggling their visibility with the .active class, I managed state transitions. Moreover, I defined rating buttons with the .boton class and a submit button with the .rating-state__submit class.

To enhance user experience, I learned to implement default disablement of the rating-state__submit button. It activates upon selecting a rating, ensuring user engagement. Lastly, I incorporated CSS transitions to smoothly alter the background color and text color of interactive elements, enhancing visual feedback for user interactions.

I want to keep learning about the endless possibilities that using JavaScript offers. Currently, I find it a bit challenging to achieve codes quickly, but after spending some time analyzing, I can eventually reach the desired outcome.