Submitted almost 3 years ago

Interactive rating component | Vue.js 3, SASS

sass/scss, vue, bem

Eduardo•910

@KTrick01

A solution to the Interactive rating component challenge

Preview Code

Solution retrospective

Hi! I started to learn Vue.js 3 so I will be re-doing some challenges to practice, this was my first challenge that I've done using JavaScript so I wanted it to be my first challenge made with Vue too! Like always any feedback is welcome!

(have to admit that I spent more time trying to deploy the vue app to github pages than doing the challenge 😅)

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Oi Eduardo, tudo bem? Parabéns pelo desafio!

Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

Pra melhorar a responsividade do card no geral, você pode adicionar flex-wrap: wrap dentro da seccao de avaliação/rating onde tem os botões com os numeros pra fazer com que eles se ajustem e fiquem em linhas diferentes de acordo com o tamanho do card em si, note que sem essa propriedade ou uma media query o card para de diminuir por falta de espaço por causa dos botões. Aqui seu código come essas mudanças aplicadas:
```
.rating__score div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
```
👋 Espero ter ajudado e continue no foco!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord