Responsive Landing Page using CSS Grid, flexbox.

Community feedback

• 

  Mohamed Muntasir•220

  @devmothegPosted almost 3 years ago

  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

  1

  ---

  

  Kareemah Ajina•120

  @Kareemah-codesPosted almost 3 years ago

  @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.

  0

  

  Mohamed Muntasir•220

  @devmothegPosted almost 3 years ago

  @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

  0
• 

  Kareemah Ajina•120

  @Kareemah-codesPosted almost 3 years ago

  Wow, Thank you so much. This was so helpful. I actually thought I knew enough about event listeners, turns out I don't . I will make sure to correct my code. Thanks a lot once again. I really appreciate it!

  1

  ---

  

  Mohamed Muntasir•220

  @devmothegPosted almost 3 years ago

  @Kareemah-codes Never say "I know enough", there's always room for improvement :]

  0