A responsive signup page with basic email validation

Community feedback

• 

  Mohit yadav•220

  @yaadevmohitPosted 12 months ago

  Here are some suggestions after looking at your code:

  1. You need to improve your desktop design for bigger screen sizes as it start stretching too much. Consider adding max-width and max-height to your component-container.
  2. Still need to implement mobile design in case you are not aware.
  3. In javascript, consider using regex for email validation.
  4. For validation you want the errorMsg to stay until the user types a valid email. Try implementing the removal of error message after the submit button if its a valid email.
  5. Modular javascript is a good way to creating reusable code using vanilla javascript. Here's a youtube playlist for that https://www.youtube.com/watch?v=HkFlM73G-hk&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f&ab_channel=LearnCode.academy

  I'll take a look at your code again later in detail and add more suggestions here.

  Marked as helpful

  2

  ---

  

  P

  Aayush Jha•410

  @Aayush895Posted 12 months ago

  @yaadevmohit thank you for your suggestions and I was wondering if you could clarify point number 2. I am asking you about this because I implemented the responsive design for the sign-in page. But based on your comment and after rechecking the site I am assuming that you are talking about the success message component. If there is anything else besides that then I would be grateful if you could provide me with a bit more clarity as I ran the site on a responsive-design simulator to recheck the working of the website for various devices and other than the success page everything else seems to work fine.

  0

  

  Mohit yadav•220

  @yaadevmohitPosted 12 months ago

  @Aayush895 Ignore that point for now. For mobile design, I set the media query with max-width of 600px so I did't realize you did implement mobile design. I would still suggest to set max-width to around 600px for mobile design as you've words overlapping inside h1 between screen width of 500px and 600px.

  0

  

  P

  Aayush Jha•410

  @Aayush895Posted 12 months ago

  @yaadevmohit Oh alright thank you for the clarification I will surely work on that.

  0