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-main using HTML CSS and JavaScript

@Sujood-Qureshi

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


I was trying to add a transition effect between front-card and thankyou-card.

I have applied the transition CSS property on card-dysign class (in my code) but it didn't work for me.

can you guys help to solve this problem??

Community feedback

@dev-mksingh

Posted

Hey @sujood-qureshi , i'm giving this solution, hope this will help you:

const onSubmit = () => {
    frontCard.style.transform="translate(-100%, 0%)";
    frontCard.style.transition = "transform 0.6s ease-out"
    setTimeout(() => {
        frontCard.classList.add('hidden');
        backCard.classList.remove('hidden');
    }, 500);

}

Hope this will be 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