Ping coming soon page solution

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

hat are you most proud of? • Successfully setting up and configuring Tailwind CSS, even troubleshooting issues along the way. • Implementing email validation in JavaScript and learning to debug logic errors. • Gaining a deeper understanding of how flexbox, m-auto, and container work for centering elements. • Figuring out how to modify SVG styles dynamically using Tailwind and CSS.

What would you do differently next time? • Plan the project structure more carefully to avoid path-related issues in Tailwind’s content array. • Test error messages earlier to ensure they update dynamically as expected. • Use button instead of <a> for form submission to avoid workarounds. • Utilize Tailwind’s utility classes more effectively to streamline styling. • Break down debugging into smaller, isolated tests to resolve issues faster.

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

Challenges Encountered & How I Overcame Them 1. Tailwind CSS Not Applying Styles • Challenge: My custom colors and styles weren’t working as expected. • Solution: I adjusted the content paths in tailwind.config.js to correctly target my HTML, CSS, and JS files. I also recompiled Tailwind to ensure the changes took effect. 2. Centering Elements with Flexbox & Tailwind • Challenge: Some elements, like the footer and the cta section, weren’t centering properly. • Solution: I refined my use of flex, justify-center, items-center, and m-auto while ensuring the parent containers had defined heights. 3. SVG Icons Disappearing Inside Flex Containers • Challenge: When styling my footer with flex, my SVG icons disappeared. • Solution: I ensured the <a> tags wrapping the SVGs had inline-flex or flex items-center so they maintained their size within the layout. 4. Email Validation Logic Not Updating Error Message • Challenge: The error message wasn’t updating dynamically when the email field was empty. • Solution: I corrected my JavaScript logic by ensuring I used textContent instead of value and properly handled the visibility of the error message. 5. Making <a> Act Like a Submit Button • Challenge: Using an <a> tag instead of a <button> for submission made handling form actions tricky. • Solution: I switched to using a <button> inside the form, which natively supports submission and event handling.

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

1. Tailwind CSS Styling Issues • Centering elements properly using flex, m-auto, and container. • Ensuring SVG icons remain visible inside a flex container. • Styling placeholders using Tailwind CSS. • Changing the fill color of an SVG icon on hover. 2. HTML & Form Behavior • Making an <a> tag trigger a form submission action. 3. JavaScript Debugging & Form Validation • Properly validating an email input field using regex. • Ensuring error messages update correctly based on input conditions. • Fixing logic that hides the error message instead of displaying it. • Correctly changing error messages when the email field is empty or invalid.