Frontend Mentor - Intro component with sign up form

This is a solution to the Intro component with sign-up form

Welcome! 👋

Thanks for checking out this front-end coding challenge.

To do this challenge, need a basic understanding of HTML, CSS and JavaScript.

The challenge

My challenge is to build out this intro component with sign up form web page.

Users should be able to:

• View the optimal layout for the section depending on their device's screen size
• See focus-visible states for all interactive elements on the page❤️
• Used Error handling and event listener by using DOM manipulation. When submitting the form, if you fill wrong inputs or leave form as empty, then error will catch and the message for this error will say "[Field Name] cannot be empty" and unable to submit the form.
• If you fill everything correct then your form will be submit and you will see Thanks message by displaying that Thanks for signing up and also integrated dismiss button below by clicking on that you can dismiss the thanks message.
• Added transition effect and hover🔥 on submit button with new look, make sure to view it.

In addition, I added some password format validation, focus-visible outline, transition effect, delay animation as well in submit button.

Screenshot

Links

• Solution URL: https://github.com/Bishalsnghd07/Intro-component-with-sign-up-form
• Live URL: https://intro-component-with-sign-up-form-two-murex.vercel.app/

My Process

🎮Features

1. Focused on JavaScript in this challenge📑
2. Achieved 100% in performance, accessibility, Best practices and SEO in lighthouse testing📲
3. Developed with Next.js for optimized performance and enhanced user experience.🚀
4. Integrated ESLint for code quality assurance and maintainability.🛠️
5. Implemented autoprefixer for seamless CSS compatibility across different browsers, ensuring a consistent user experience.🌐
6. Applied transition effect and hover on submit button with new look, make sure to view it.🎆

🛠️Built With

• Semantic Meaningful HTML5📃
• TailwindCSS 🎨
• React.js👾
• Next.js 14.1.0🔺
• TypeScript🤖
• TSX📜
• Flexbox📚
• CSS Grid📰
• MObile First Workflow📲
• JS Library🎴

Code Quality

What I learned

Client side form validation was tough, I was away from javascript. So, first I learnt Javascript basics, then I understand how DOM manipulation works, how event listener works.

I do it all myself using vanilla JS and React.useState(hooks) to manage all of the input validation.

I can be use react form which is JavaScript library to maintain code flow but, I enjoy to dirty my hand on pure JavaScript and I quite enjoy it.

Also, play with useState hooks too much to manage state and render to successfull thanks form page. When form is not submitted we show the Error validation and form should not be submitted by calling "formSubmitted(false)" and when form is submitted we manage the data in useState hook and display the thanks page by using "formSubmitted(true)"

Overall, I'm happy with my progress and want to dip dive more in javascript.

Continued Development

• Organised code to enhance reusability and readibility in many concerns, what I did it, I make different organised component for the form and passed as a prop in the main component, to maintain code quality and code cleaniliness.
• I would love to work on tailwind CSS and would explore more JS Library and will continue implement in my further projects.
• Added delay animation and would love to add more new animation features.
• For client side Validation I used pure javascript, can be use react form easily, but wants to enhance my skills in DOM manipulation with live projects, will use react form in larger project to enhance code flow.

👨‍💻Author

• My Youtube Channel - FrontendFineness
• Website - intro component using sign up web page
• Frontend Mentor - @Bishalsnghd07