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.
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
- Solution URL: Frontend Mentor
- Live Site URL: Github Pages
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 = "";- 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
