Responsive Contact Form with Animated Toast Notification

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

I'm most proud of stepping out of my comfort zone for this challenge. Specifically, I utilized grids, keyframe animations, and switch cases (as opposed to ifs and nested if/else if/else statements). I don't really enjoy using grid, although I know it can offer more capabilities for layouts (especially complex ones), but I also just wanted to practice it without feeling overwhelmed. As I'm completing more projects, I wanted to step outside of the box and utilize an animation for the toast notification. I wanted to make this form reusable so the best way to do it for me was to have the notification slide out once the user reads it. Finally, I noticed that I was doing too many if and else ifs... so I decided to implement switch cases if I felt that a specific scenario could utilize them (e.g., running a block of code based on the type of form element).

What I would fix is my localStorage when saving current form data. The only way I thought I could fix it was to simply refresh the page after the user submits the form to ensure that no old form data was saved within the program. I did not really like this since I didn't want the page to refresh at all, but it's okay.

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

While utilizing grid, particularly for the first and last names, I did not check if my grid set up worked for all use cases (if both inputs were valid, if both were invalid, or if 1 was valid and the other was not). I tested it well after, and after hundreds of lines of code written, I noticed that my layout broke when it was one invalid input and one valid input.

The best fix at this point for me was to set up the grid with a third row that accounted for the error message, that way the layout will stay the same regardless of whether the error message was hidden or visible. This added unwanted spacing though, but it was the best fix at the moment for me.

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

Any feedback is appreciated!