@yaadevmohit
Posted
Here are some suggestions after looking at your code:
- 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.
- Still need to implement mobile design in case you are not aware.
- In javascript, consider using regex for email validation.
- 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.
- 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
@Aayush895
Posted
@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.
@yaadevmohit
Posted
@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.
@Aayush895
Posted
@yaadevmohit Oh alright thank you for the clarification I will surely work on that.
