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. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • 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

Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: Github Pages

My process

Built with

What I learned

In this project, reforced the implementation of the <template></template> tag again.

<template data-js-template>
  <!-- Success message start -->
  <img
    src="./assets/images/icon-list.svg"
    width="64"
    height="64"
    aria-hidden="true"
    alt="" />
  <h1 class="newsletter__title">Thanks for subscribing!</h2>
  <p>
    A confirmation email has been sent to
    <strong>{{email}}</strong>
    Please open it and click the button inside to confirm your subscription.
  </p>
  <button class="button" data-js-reset>Dismiss message</button>
  <!-- Success message end -->
</template>

I created a function where you have data-reset attribute on the dismiss button and reloads the page. The second JavaScript snippet is setting the input to empty string.

// return to the Newsletter form
function returnToForm(e) {
  if (e.target.hasAttribute("data-js-reset")) {
    location.reload();
  }
}

// set the input to empty string
document.getElementById("email").value = "";

Useful resources

• Interactive rating compoment - I used the same approach with this project.
• Template tag - The <template> tag is great use case for a project like this because the HTML content is hidden when the page loads. The content within the <template> tag can be displayed by JavaScript.
• Clear an Input - Removes the email and sets the input to an empty string

Author

Acknowledgments

Newsletter Sign-up form solution reference