Newsletter Sign-up Form with Success Message

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

This project was hard for me but I am very proud of completing it. The most difficult part for me was trying to get the functionality of the email component to test if: A. a proper email was entered B. If not, do not directly go to the success page but instead show the email error message on the main page.

I eventually figured out that it wasn't what I was or was not missing in my code, but rather the order in which the commands were placed which was causing the issue. I always wondered why in some tutorials, some developers will place commands in a specific order but never explain why, and the reason is the same as the cascade in CSS - things have to be placed in a specific order to take effect, or else it is just bloated code and takes up space.

Having learned this lesson, I will make a conscious effort to organize my code based on what I call the "cart before the horse" concept, ensuring I am not calling elements before they are defined or using defined elements outside of their function unless defined as global.

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

As previously mentioned, I found this exercise quite difficult. The organization of the JavaScript to ensure the use of the elements in their proper cascade was one issue, I also ran into styling issues with the email-error element and the checkmark list-icon styling. I am not too familiar with the pseudo codes outside of hover, so the use of "li:before" was a challenge to understand, but from what I gathered, the ":before" and ":after" pseudo-classes allow for developers to insert additional content to an existing element like an image or icon, allowing them to modify the appearance of the defined content -which is how I got the background if the white checkmarks to be the defined tomato color.

For the email error message, I needed to create a validation function to check the value of what the user entered into the DOM input. from there, I needed to check to see if the value contained elements that aren't normally allowed in email addresses like asterisks and dollar signs. If those elements are found, a message requesting a valid email is shown, as well as ensuring there is a clause to catch if there is no email at all and returning a request message to enter an email in the same span.

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

I appreciate anyone willing to look at my work and provide feedback. All help is welcome!