🚀 Newsletter Sign-up Form ✨

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

I am proud of the JavaScript logic I built for the form's error handling. Instead of just blindly creating a new error message element every time the user clicks submit, I implemented a DOM state check to see if the error already exists. This completely prevents the "spam click" bug and optimizes the browser's memory.

I am also really happy with the custom CSS @keyframes animation I wrote for the success card. Combining opacity and transform: translateY gave the component a premium slide-up entrance that feels much more natural than a sudden layout shift.

What challenges did you encounter, and how did you overcome them?

The "Spam-Click" Error Message Bug

The Challenge: Initially, my JavaScript logic blindly manufactured a brand new <p> element for the error message every single time the user clicked "Submit" with an invalid email. If a user spam-clicked the button, multiple error messages would stack up in the UI before the setTimeout could remove them.

The Solution: I implemented a "Look before you build" DOM state check. Before executing document.createElement, my script uses document.querySelector to check if the error class already exists on the screen. By wrapping the creation logic inside an if (errorAlert = null) statement, the script only build the error message if one isn't already there.

What specific areas of your project would you like help with?

I would love a general code review! Any feedback on my HTML semantics, CSS architecture or JavaScript logic is highly appreciated. Let me know if you see any areas where I could improve or follow better industry best practices!