Submitted 7 months ago

Newsletter sign-up form with success message

Kwabena Boakye•470

@Kingkobi01

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

How I rendered two components into the DOM without refresh and without reactjs.

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

how to use an external js while using Vite. All the relative URLs break after the build so I had to write the js in a script tag in the HTML. I don't like it but I did it anyway. C'est la vie.

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

How do I add an external JS when I'm using Vite

Community feedback

Kwabena Boakye•470
@Kingkobi01Posted 7 months ago
Thanks, man. I forgot to remove the submitBtn variable from the js because it had no use anymore. Thank you very much for the <submit type="module" src="..."></submit> tip.
0

markus•2,160

@markuslewinPosted 7 months ago

It should be as simple as:

<html lang="en">
  <body></body>
  <s cript type="module" src="/src/script.js"></s cript>
</html>

(FEM doesn't let me write script)

The <input onclick="handleSubmit()" /> will break since it can't find handleSubmit, so you'll have to move the form.addEventListener() out of that function. After doing that, the form will listen for submits as soon as the page loads:

// `/src/script.js`
const submitBtn = document.querySelector(".submit-btn");

const emailInput = document.querySelector('input[type="email"]');

emailInput.addEventListener("input", () => {
  emailInput.checkValidity()
    ? submitBtn.classList.add("valid-email")
    : submitBtn.classList.remove("valid-email");
});

const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  document.querySelector(".form-card").classList.remove("form-card-visible");
  document.querySelector(".form-card").classList.add("hidden");
  document.querySelector(".success-card").style.display = "block";
});

document.querySelector(".dismiss-btn").addEventListener("click", () => {
  document.querySelector(".success-card").style.display = "none";
  document.querySelector(".form-card").classList.add("form-card-visible");
});

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord