Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component | Vue.js 3, SASS

Eduardo 910

@KTrick01

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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 😅)

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾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!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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