Full responsive rating interactive component

@correlucas Ei, Brigadão, Lucas.

Se não for te atrapalhar, fiquei com uma dúvida na hora de implementar os estados ativos pra esses botões de rating.

O documento de design mostra uma mudança de background-color quando o cursor está dentro deles e outra mudança quando o botão é clicado. Tentei usar CSS e colocar uma pseudo-classe ::hover pra resolver a primeira mudança, mas acabou conflitando com a segunda.

O comportamento ficou esquisito, a cor que informa a seleção do botão só aparece depois que se tira o cursor de dentro dele. Acabei optando por não fazer o estado de hover no final.

Tu teria alguma dica pra me dar de solução pra esse conflito?

Seguem aqui os snippets de como eu fiz o comportamento de seleção:

    ratingBtn.addEventListener('click', (e) => {
        rating = e.target.value;
        removeActiveClass(ratingBtns);
        e.target.classList.add('active');
    });

function removeActiveClass(arr) {
        arr.forEach(element => {
            if(element.classList.contains('active')) {
                element.classList.remove('active');
            } 
            return;
        });
    }

}```

@Lucas4lves Pelo que eu vi tá funcionando certinho, o botão fica marcado quando ativo, a unica coisa que achei estranho foi o circulo que fica envolta do botao 1 logo no inicio, a parte de JS eu nao sei dizer ainda pq sei mto pouco de JS, @AdrianoEscarabote da uma força ai no JS

@Lucas4lves Fala lucas, tudo bom?

Observei aqui o seu código e para arrumar isso podemos usar apenas css, por exemplo:

.main__card--rating-display button:hover {
    background-color: hsl(25, 97%, 53%);
}
.main__card--rating-display button:focus {
            background-color: hsl(217, 12%, 63%);
}

O resto está ótimo!

espero que ajude! 👍

@ga-bri-ela Heey, you did it good! I also used an event listener on the submit button, but instead of toggling the display property for the <div> I updated the whole Inner HTML. It may have been more verbous, but solved it as well.

const submitBtn = document.querySelector('.main__card--submit-btn');
const mainCard = document.querySelector('.main');
submitBtn.addEventListener('click', () => {
    if(!rating){
        return;
    }
    mainCard.innerHTML = `
                          <article class="main__thank-you-card">
                                <img class = "main__thank-you-card--img" src="./images/illustration-thank-you.svg">
                                <p class = "main__thank-you-card--rating">You selected ${rating} out of 5 </p>
                                <h1>Thank you!</h1>   
                                <p class="main__thank-you-card--call-to-action">We appreciate you taking the time to give a rating.
                                If you ever need more support, don't hesitate to get in touch</p>
                          </article>
                          `;
})```