Responsive Newsletter Sign Up - HTML, CSS, JavaScript with Validator

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

This is my 3rd JavaScript project as well as my 6th Junior project!

What I've used to build this project:

• HTML
• CSS - grid and flex
• Javascript
• Validator.js

I'm not very good when it comes to JavaScript. Since my knowledge is limited, I had to go through Google and read MDN Docs and many other websites for the email validation to work.

I have learned some things throughout the project:

• learned to make images responsive with the help of the srcset attribute of HTML.
• learned some more concepts of JavaScript for the form's working such as:
  • taking the value of input fields and storing them inside a variable.
  • updating the states of the input fields as well as the error text whenever the entered value does not meet the requirements.
  • I think I have improved a bit of my CSS too. Sadly, I forgot to use grid for this one.

I had lot of fun making this one. It was very challenging to me...

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

As I mentioned, I'm not very good at JavaScript. I don't know much about it.

E-mail validation was a bit of a challenge to me. It made me go through various MDN and GeeksForGeeks articles to implement.

Things I did easily:

• the error state when email input is empty.
• the success modal inheriting the input email address.
• switching back and forth between the modal and the form when clicking on the buttons.

How I overcame the issue: I spent hours to create it and, in the end, I had to use Validator.js library. It was pretty easy to use and implement.

But it didn't work. It just leads to the modal despite me not entering a valid email. I don't know understand how to fix it. Here's my code snippet:

• In the HTML, I imported the library using CDN:

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

• Next time, I will learn more of JavaScript concepts to make sure things work as they're intended to.
• I will start with mobile-first workflow to make things responsive in a better way.
• Learn more about useful libraries to make things easier and better.

Any suggestions are welcome! 😃