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

Popup Animation And Mouse Event Javascript

duongns-vn 210

@duongns-vn

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Reflecting on my project, I am most proud of successfully implementing a smooth fade-in and fade-out effect on mouseover and mouseleave events, respectively. These animations enhance user interaction and provide a polished user experience.

One of the main challenges I faced was ensuring cross-device compatibility and smooth animation transitions. To address this, I utilized setTimeout to delay the display: none property, and animation & transform css, ensuring the effects perform reliably across different devices and event triggers.

Looking ahead, I aim to improve the codebase's structure for better readability and maintainability. This includes refactoring to streamline the logic and enhance overall code efficiency. By doing so, I believe the project will not only perform better but also be easier to maintain and extend in the future.

Community feedback

errbrokko 80

@errbrokko

Posted

Impressive solution. I really like the way you have solved it.

1

duongns-vn 210

@duongns-vn

Posted

Thank you very much @errbrokko

0

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