In this challenge, you will develop a responsive newsletter subscription section from the given designs. The section will contain a form where users can enter their emails to sign up for the newsletter. You should ensure that the form is responsive, implements client-side validation and submits the details to an API endpoint.

User Stories

• As a potential subscriber, I want clear confirmation that my email has been accepted or instructions on correction if it hasn't, so I can confidently complete the subscription process.
• As a user interested in subscribing, I expect to submit my details through a secure and efficient process, so that my subscription preferences are promptly registered with the service.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The layout should reorganize responsively. The content should stack vertically on smaller screens and align horizontally as the screen width increases.
  • Element adaptability: Ensure that text elements and images resize appropriately without distortion or loss of quality.
• Interactivity:
  • Button states: Implement and style buttons to reflect different states - normal, hover, and focus.
  • Input field states: Implement and style input fields to reflect different states - normal, focus, filled, disabled, error, error filled, error focused.
• Client-side validation: Implement email validation on the client to catch errors before they reach the server, ensuring a smoother user experience.
  • Format check: Validate that the email entered matches the standard email format (e.g., user@example.com), providing immediate feedback if the format is incorrect.
  • Required: Ensure the email field is not left blank. If the field is empty upon submission attempt.
  • [Stretch goal] Customize error messages for better UX:
    • Format check → "Please enter a valid email address."
    • Required → "Email address is required."
• API submission: On successful validation, the form should submit the data to the provided API endpoint, handling responses and errors gracefully to inform the user of the subscription status:
  • Success feedback: After API submission, parse the successful response and confirm subscription to the user with "Subscription successful! Please check your email to confirm.".
  • API error response: Handle any API error responses (e.g., 400 Bad Request, 500 Internal Server Error) by displaying an appropriate message such as "Failed to subscribe. Please ensure your email is correct or try again later." or displaying the error message from the server.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
• [Stretch goal] Accessibility and semantics: Ensure that the form is accessible according to WCAG guidelines. Use semantic HTML and ARIA roles where necessary, proper alt tags for images and ensure that buttons can be navigated to and selected using keyboard controls.