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

@chayansurana3

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


This is my first project using Javascript. All feedback is welcome.

Community feedback

fersrm 230

@fersrm

Posted

hola el problema que veo es que, aunque mande el valor del último botón igual puede marcar todos los bonotes quedando activados podrías recorrer los demás botones si marca uno nuevo y desactivarlos, aunque la opción más fácil que yo encuentro es usar input type radio así automatíceme de desactivan si presiona otro y podrías obligar al usuario a que marque una opción

Marked as helpful

1

@superpooperxxx

Posted

Hi, good job on this🔥

I highly recommend trying to make as similar to design as possible.

  • I recommend moving icons to css and use background-image. Shortly, <img> is for actual content that has actual meaning, background-image for non-content images, like star here. Read more here

<img src="./icon-star.svg" alt="star-icon">

  • There is a much better way to style rating buttons ⬇️
.button-ratings{
   width: 100%;
   display: flex;
   justify-content: space-between;

   padding: **pixel values**;
}

.btn1{
    background-color: hsl(210, 5%, 17%);
    color: hsl(217, 12%, 63%);
    border-radius: 100%;
    text-align: center;
    margin-right: 15px;
    border: none;
    width: 35px;
}

Happy coding❤️ Hope this was helpful

Marked as helpful

1

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