This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
- Semantic HTML5 markup
- CSS
- Flexbox
- Vanilla JS
For the CSS, I have used a radial gradient from the top for the first time. It was also my first time using the transform: translate property to center the component. I also was able to learn the difference between the hover and active states for the first time.
For JavaScript, moreso than learning anything new, this was my first solo JavaScript project that wasn't done for school. I had no assistance from a teacher or instructions for a project, so this was a good confidence builder for me.
I still need extra practice with JS in terms of using for loops and making things more minimal.
- CSS gradient resource - This helped me with the radial gradient positioning.
- JavaScript resource - This helped me do the code to have the buttons have an active state of sorts, and reset the other buttons that were pressed.