@devmotheg
Posted
You should add an event listener for the first problem, of course I can just show you the code here, but I would suggest you to look up MDN's documentation on that because it will really benefit you in the long run.
For the second question, I would suggest you to do the grid challenge here on frontend mentor & just do multiple grid projects (everything is hard until you get good at it), hope that helps!
Marked as helpful
@Kareemah-codes
Posted
@devmotheg Hello, thanks for replying to my questions. I highly appreciated it. I wanted to say that I have tried the event listener approach but I still can seem to figure it out. I would appreciate it if you could put the code here as you said. It would really go a long way for me. But thanks all in all.
@devmotheg
Posted
@Kareemah-codes First you should grab a reference to your form; then you have to add an event listener; lastly do whatever you want in the if(!match) statement, hope that helps!
const FORM_CONT = document.querySelector("#form-container");
function validateEmail() {
FORM_CONT.addEventListener("submit", event => {
let userInput = document.getElementById("email-box").value;
let match = EMAIL_PATTERN.test(userInput);
if (!match) {
event.preventDefault()
}
});
}
validateEmail();
Marked as helpful
