This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building real projects.
In this challenge, I was tasked with creating a rating component that would allow users to select a rating and submit it. The component would then display a "Thank you" card with the user's rating.
- I used Vue 3 framework to create this component.
This is my first time using Vue 3 and I'm still learning it. I'm sure there are better ways to do this, but this is what I came up with.
Users should be able to:
- View the optimal layout for the app depending on the 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
- Solution URL: solution URL: GitHub repository
- Live Site URL: GitHub pages live demo site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vue 3 - JS library
I learned how to use Vue 3 to create a component. I also learned how to use the v-model
directive to create a two-way binding between the component and the parent component. I also learned how to use the v-if
directive to conditionally render elements.
Thanks to the video by John Komarnicki for teaching me how to use Vue 3. I learned a lot from that video.
- Thanks to Frontend Mentor for providing this challenge. I learned a lot from this challenge and I'm looking forward to more challenges from them.