Frontend Mentor - Newsletter sign-up form with success message solution

This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor.A simple UI with form to receive email and check if email format is correct show success message if not valid it shows an error.

Table of contents

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

Overview

The challenge

Users should be able to:

• Add their email and submit the form
• See a success message with their email after successfully submitting the form
• See form validation messages if:
  • The field is left empty
  • The email address is not formatted correctly
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Links

• Solution URL: Solution URL
• Live Site URL: Live Site URL

My process

Built with

• HTML5
• CSS custom properties
• Mobile-first workflow
• Typescript

What I learned

With this project I have delved into typescript specifically event handling and form validation with typescript.

<form action="">
  <label for="email"
    >Email address
    <span class="error-message hidden">Valid email required</span>
  </label>
  <input type="email" placeholder="email@company.com" required />
  <button type="submit" disabled>Subscribe to monthly newsletter</button>
</form>

  const validateEmail = (email: string) => {
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return emailPattern.test(email);
  };
  signupFormInput?.addEventListener("input", (e: Event) => {
    validateEmail((e.target as HTMLInputElement).value)
      ? handleValidEmail()
      : handleInvalidEmail();
  });

Continued development

I want to expand my skill on typescript event handling and add more validation to the form input.

Useful resources

• Typescript documentation - This guide, typescript for Javascript programmers helped me to type my functions, events as well as event listeners. I really liked this and will continue to use it going forward.

Author

• Website - Feven Seyfu
• Frontend Mentor - @FevenSeyfu
• Twitter - @FevenSeyfu

Acknowledgments

I have completed this challenge as part of Womenwhocode frontend, #frontendfriday challenge I would like to thank the community for the feedback as well as the continued support and thanks to Frontendmentor for the design files.