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.
- Solution URL: https://effortless-gelato-738bfe.netlify.app/
- Vue 3
- Vite
- Vuetify 3
- TypeScript
- SASS
I learned how to use the v-item-group (vuetify) component and how to customize it.
<v-item-group
v-model="rating"
class="d-flex mb-8 w-100 justify-space-between rating"
>
<v-item
v-for="n in 5"
:key="n"
>
<template #default="{ toggle }">
<v-btn
:active="rating != null && rating + 1 >= n"
color="hsl(217, 12%, 100%)"
border
icon
height="50"
width="50"
class="rating-btn"
@click="toggle"
>
{{ n }}
</v-btn>
</template>
</v-item>
</v-item-group>
Also learned how to select last element of a class with css.
.rating {
.v-btn--active {
background-color: hsl(217, 12%, 63%)!important;
&:nth-last-child(1 of .v-btn--active) {
background-color: hsl(25, 97%, 53%)!important;
}
}
&-btn {
background-color: hsl(210, 16%, 15%) !important;
&:hover {
background-color: hsl(217, 12%, 63%)!important;
}
}
}
- Frontend Mentor - @Antoine340
- Linkedin - @Antoine