Submitted over 1 year ago

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

#accessibility

Adriano• 33,960

@AdrianoEscarabote

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

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,580

@correlucas

Posted over 1 year 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

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year 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

jutin0852• 310

@jutin0852

Posted over 1 year 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

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year 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!

jutin0852• 310

@jutin0852

Posted over 1 year 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

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@jutin0852 I will test!! thanks!

I'll let you know if it worked!

jutin0852• 310

@jutin0852

Posted over 1 year ago

@AdrianoEscarabote okay

jutin0852• 310

@jutin0852

Posted over 1 year ago

@AdrianoEscarabote okay

Rakshith J• 240

@rakshithjodukallu

Posted over 1 year ago

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

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@rakshithjodukallu Thanks!!

Please log in to post a comment

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