Kwabena Boakye• 470
@Kingkobi01
Posted
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
Submitted
Newsletter sign-up form with success message
#accessibility#tailwind-css#vite
Kwabena Boakye• 470
@Kingkobi01
Design comparison
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
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");
});
0
Please log in to post a comment
Log in with GitHub
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