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

Javascript animate and Nesting CSS experience!

RaidEyes 390

@RaidEyes

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Took me 5 days to Complete this challenge!

I decided to use some new features like Nesting CSS, <dialog> in HTML & .anime() in Javascript. And suprisingly, they are not completed. I got a few bugs in my code and took me a hard time to debug them. Therefore, I recommend using traditional stuffs before jumping into these guys. In short:

  1. <dialog> is fun but if you apply a display property for it, it will automatically appear without being called. Be careful!!
  2. Nesting CSS is fairly new, there are clashes every where. Traditional CSS is fine.
  3. .aniate() in Javascript is a web APIs, it's not new but it reduces the complexity of my code and it's fun to use. Other than that I also use element.validity.valid to check the user input's validity, which is very useful.

Happy coding!

Community feedback

RaidEyes 390

@RaidEyes

Posted

Sorry guys, a typo there .animate()

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