Dhairyash-1 / Signup-Form-with-Complete-Validation

This SignUp Form is the challange by Frontend mentor and I bulild this Form using Tailwind CSS and with the help of Pure JavaScript I added complete client side form validation.

Frontend Mentor - Intro component with sign up form solution

This is a solution to the Intro component with sign up form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Tech Stacks
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: [e-mail]). The message for this error should say "Looks like this is not an email"

Screenshot of Output

Links

• Solution URL: solution URL here
• Live Site URL: live site here

My process

Built with

• Mobile-first workflow
• Tailwind CSS - For styles
• JavaScript- For Form Validation
• Semantic HTML5 markup
• Flexbox

Tech Stacks

What I learned

• During working on this project I learn Tailwind CSS
• I learn how to do complete form validation with javascript
• I learn how to use vite for production build
• I learn how to build complete responsive SignUp Form

Continued development

• In the future When I will learn Backend development then I will also add database to this form.

Useful resources

• JavaScript Client-side Form Validation - This great video by Florin Pop helped me to write proper form validation in javaScript.

Connect With Me

• Twitter - @dhairyashgupta
• Linkedin - Dhairyash Gupta

Author

• Website - Dhairyash Gupta
• Frontend Mentor - @Dhairyash-1