Welcome! 👋

Frontend Mentor - Newsletter sign-up form with success message

This is a solution to the Design preview for the Newsletter sign-up form with success message coding challenge

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

Table of contents

• Welcome
  • Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

The challenge

My challenge is to build out this Newsletter sign-up form with success message web page.

Users should be able to:

• Incorporated DOM manipulation to make changes in html🌠.
• And 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 "Valid email required" and unable to submit the form.📄
• If you fill your email correct then your form will be submit and you will see Thanks message by displaying that Thanks for subscribing and a confirmation message will be sent to "entered" mail and also integrated dismiss button below by clicking on that you can dismiss the thanks message.
• Also updated, with modern secure email format validation technique like, if you enter your email without the extension ".com" or if you write any other extension then you will unable to submit the form and you"ll see a error message like this 👉 Valid email required.
• Utilizing DOM manipulation, when a form is submitted and an incorrect email is entered, an onChange event listener on the email input field will trigger, continuously updating with error messages until a correctly formatted email is provided."
• Added hover🔥 on submit button with new look, make sure to view it.
• Secured a flawless 100% Lighthouse score across performance, accessibility, best practices, and SEO benchmarks, showcasing our commitment to excellence.📊
• Integrated ESLint for code quality assurance and maintainability.🛠️
• Implemented autoprefixer for seamless CSS compatibility across different browsers, ensuring a consistent user experience.🌐
• 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❤️

In addition, I added some email format validation, focus-outline none, transition effect as well in submit button.

Screenshot

Links

• Solution URL: https://github.com/Bishalsnghd07/Newsletter-signup-form
• Live URL: https://newsletter-signup-form-wine.vercel.app/

My Process

🛠️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

This project enhance my skills in basics JavaScript concepts like, Event Handling, DOM Manipulation, Error Handling(client-side validation), Conditional rendering and Next.js Image component.

In before intro sign up component project, I implement DOM Manipulation and make changes in html by using javascript DOM. So, it becomes easier for me to start this project with approach. But, adding new javascript topics in this project like, Event Listener which I learn during this project, it's give me a strengthen in my basics and I will not say it's a big challenge for me, I will say it's a good challenge enhance my skills in basics of javascript. First I used Event handler for detect error in inputs from html which is bit a complex and time taking but for code maintainibility and time management I revert back to use event listener, in this I direct taking validate input from DOM and passed to the handleChange function. So, in this case when we submit form, if there is any error in input field. Then handleChange function will track each character is matching email format or not. After, correctly passes email in input field then we able to submit the form successfully.

I learnt it from youtube and chatGPT, it helps me a lot to overcome this challenge. And it is the basics of javascript, which we use in live project in daily basis and as well as in personal projects too

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 reusable icons 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.
• For client side Validation I used pure javascript, can be use react form and zod easily, but wants to enhance my skills in pure javascript DOM manipulation, Error Handling, Event listener and conditional rendering with live projects, will use react form or can be zod in larger project to enhance code flow.

👨‍💻Author

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

Acknowledgement

Thanks for checking out this front-end coding challenge💓