Skip to content
Submitted about 2 years ago

Interactive rating component w/ (HTML + CSS + JS) 👨‍💻

Adriano•38,190
@AdrianoEscarabote
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

👨‍💻 Hello everyone.

DAY 4/7

I remember not being able to do this challenge a few weeks ago, despite being an easy challenge I ended up complicating it a lot and leaving the code very confusing, I adopted best practices and managed to have a good result! I really liked the result!

I managed to improve my js a lot, and with this challenge, I'm looking forward to more complex challenges.

I was having doubts about how to use the addEventListener method in a variable that contained more than one element of the same type, with this one I managed to solve the problem!

btns.forEach(rate => {
    rate.addEventListener('click', () => {
        res.innerHTML = rate.value
    })
})

I added some details:

  • 👨‍💻 Button to go back and rate again!
  • 👨‍🎨 Card animation going in and out!

Feel free to leave comments on how I can improve my code.

Thanks! 😊

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    Boa!

    Esse desafio ficou mto, ta responsivo até no apple watch, mto flexivel. So tem um problema com o O max-height e height que vc usou tá fazendo o conteudo cortar depois de 200px, acho que esse erro foi causado pelo framework que vc usou, mas se vc definir max-height e altura qualquer conteudo vai ser cortado pro container manter a altura fixa.

    @media (max-width: 23.75rem)
main {
    /* max-height: 37.5rem !important; */
    /* height: 37.5rem !important; */
}
main {
    overflow: hidden;
    height: auto;
    /* max-height: 26rem; */
    max-width: 25rem;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 1rem;
}
    Marked as helpful
    0
    Adriano•38,190
    @AdrianoEscarabotePosted about 2 years ago

    @correlucas eu comecei ele usando bootstrap, mas tava dando uns bug com o css, aí eu tirei.

    mas você tem razão, devia ter colocado auto

    0
  • jutin0852•310
    @jutin0852Posted about 2 years ago

    The design is really great and I love how the next page kinda comes in. I clicked the submit button without picking a rating and it work so I wanted to ask “do you think it should work without the user choosing a rating” Or maybe a button for the user to “rate later” should be added to the project .😂 Love your work man

    1
    Adriano•38,190
    @AdrianoEscarabotePosted about 2 years ago

    @jutin0852 I tried to make it so that when I didn't have any buttons selected the other part doesn't appear, but my js skills aren't that good, I'm still learning!

    0
    jutin0852•310
    @jutin0852Posted about 2 years ago

    @AdrianoEscarabote my js skills aren’t that good either but let me suggest something, You could use if statements under the btnSumbit function,when the button is click and the condition could be something like If(res.innerHTML==rate.value){

    // then you can add your original code for if the button is clicked }

    This condition may or may not work but I hope you get the idea I’m trying to pass on

    Marked as helpful
    0
    Adriano•38,190
    @AdrianoEscarabotePosted about 2 years ago

    @jutin0852 I will test!! thanks!

    I'll let you know if it worked!

    0
    jutin0852•310
    @jutin0852Posted about 2 years ago

    @AdrianoEscarabote okay

    0
    jutin0852•310
    @jutin0852Posted about 2 years ago

    @AdrianoEscarabote okay

    0
  • Rakshith J•240
    @rakshithjodukalluPosted about 2 years ago

    good job brother, seen your design and exactly matching with design.

    1
    Adriano•38,190
    @AdrianoEscarabotePosted about 2 years ago

    @rakshithjodukallu Thanks!!

    0

Please log in to post a comment

Log in with GitHub

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