All solutions

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.

The first thing I did was analyze the composition comparing similarities between the mobile version and the desktop version, with this I defined the HTML structure and the classes.

Later I styled it to match the mobile design and later I made the necessary adaptations to make it responsive to desktops according to the included design.

At the end of the css I added the hover to change the color of the button with a small transition to make it more dynamic.

I noticed that the style guide had 2 images of the same product: one for the desktop and mobile versions respectively, so I decided to use an eventListener with JavaScript to detect the screen size. This eventListener calls a function that changes the "src" of the depending on the size of the screen.

Where I spent the most time was drawing the circle. In resolutions smaller than 400px, it loses the 1:1 ratio.

I can put in the same line "...front-end..." I tried changing the font size but doesn't work.