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 (pure css / js)

Émilia 100

@BahAilime

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


Tweaks

  • I changed the submit button to practice using the ::after pseudo element
  • I made the image from the "thank you" part (illustration-thank-you.svg) move up and down in a loop

Community feedback

FalejevV 500

@FalejevV

Posted

Hi. It looks cool! :) The only thing I noticed is that when the "thank you" window appears, you can still click on the buttons hidden underneath and submit again. To avoid this, you can add the disabled attribute to the buttons after the button is pressed, or make a setTimeout to disable all window after fade animation ends.

Marked as helpful

1

Émilia 100

@BahAilime

Posted

@FalejevV

Hi ! Thank you for your feedback ! ✨ I fixed the problem by adding those three lines in the submit button's click listener:

for (const elt of document.querySelectorAll(".nb")) {
        elt.setAttribute('disabled', 'true')
        elt.style.cursor = "default"
    }

Not sure if it was the best solution but it works 😁

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