Responsive newsletter signup form using Tailwind CSS, Next

What are you most proud of, and what would you do differently next time?

Hi Front-End Mentor Community🙋‍♂️ I'm Bishal and this is my solution for this challenge.🧑‍🎓

NOTE: I intentionally changes the background color of the design in places to improve the accessibility.

I most proud of I use Vanilla JS in this project to enhance my skills in JavaScript and next time I would use react hook form or can be used zod for email validation rather than Vanilla JS. Will trying new things will flex and give strengthen to my skills. 👉I Incorporated this new features in this challenge to improve basics in JavaScript and performance of my web page👈

🎮Features

1. Incorporated DOM manipulation to make changes in html🌠.

2. 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.📄

3. Secured a flawless 100% Lighthouse score across performance, accessibility, best practices, and SEO benchmarks, showcasing our commitment to excellence.📊

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. Responsive layout with mobile first approach and focused on pixel perfection📲

7. Developed with Next.js for optimized performance and enhanced user experience.🚀

🛠️Built With

• HTML5📃
• TailwindCSS 🎨
• React.js👾
• Next.js 14.1.0🔺
• TypeScript🤖
• TSX📜
• Framer-motion🎭

What challenges did you encounter, and how did you overcome them?

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, automatically error will be removed and 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

What specific areas of your project would you like help with?

Specific areas I need help in related to my code structure, code quality, code scalability, code flow, code readibility, code maintainibility and any areas if you can see I'm lacking then feel free to guide me or give me any suggestion so, that I can improve myself as a developer. I would love to hear your feedback and suggestions. Thank You❤️