Enhancing the User Experience and Security of a Custom Login Page.

Welcome, developers! Your task is to create a login page that involves addressing potential usability issues, such as ensuring input validation and responsive design.

• Must to have
  • The id of the Name input box should be "name".
  • The id of the Email input box should be "email".
  • The id of the Password input box should be "pass".
  • The id of the Submit button should be "btn" and type of the Submit button should be "submit".
  • The id of the Clear button should be "cancelbtn" and type of the Submit button should be "button".
• Functionality tested
  • Submit the data on clicking submit button.
  • When you click on Submit button, there should be an alert "Form submitted successfully.".
  • Name field should contain only upper case and lower case characters and spaces.
  • Email field should contain an email ending with "@codingninjas.com".
  • Password field should contain password with size >= 8 and contains "@".
  • If you put any wrong details in all the fields, then on submitting, there should be an alert "Fill the form correctly.".
  • Clear button should reset all the fields.

• Use the given provided code and try to mirror the UI.

• After submission, your solution will be evaluated automatically based on the tasks defined above.
• Upon successful completion of all the tasks/requirements, you will get a full score, and there will not be any partial scoring.
• You can work on your failed test cases & resubmit your solution.
• Your problem will get evaluated instantly.

• Use the given code structure in editor and do not make any changes.
• Do not modify existing classes or tags.
• Focus on correct HTML structure and class names.

• In case of any query/feedback on this project, please fill this form & we will soon get in touch with you to resolve.

Best of luck, developers! We are eager to see your login from!