Newsletter Form Validation Challenge

Community feedback

• 

  M. Abubakr•250

  @m-abubakr1

  Posted 5 months ago

  You have done a great job there.

  Instead of relying solely on flexbox, consider using CSS Grid for centering key containers. For example, you can center the main sign-up form like this:

  body {
    display: grid;
    place-items: center; /* centers both horizontally and vertically */
    min-height: 100vh;
    background-color: #ffffff;
    font-family: "Manrope", serif;
  }
  

  This method is very concise and reliable for centering your content on the page.

  Your JavaScript toggles the display by directly changing inline styles. To better separate behavior from styling, you can toggle CSS classes. This makes your code more maintainable and easier to adjust later.

  Example:

  Define hidden/visible states in CSS:

  .hidden {
    display: none;
  }
  .visible {
    display: flex; /* or block, depending on your layout */
  }
  

  Update your JavaScript:

  document.addEventListener("DOMContentLoaded", function () {
    const form = document.querySelector("form");
    const emailField = document.getElementById("EmailField");
    const emailError = document.getElementById("EmailError");
    const mainerContainer = document.querySelector(".MainerContainer");
    const successPage = document.querySelector(".SuccessPage");
  
    function validateEmail(event) {
      const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
      
      // Check email validity
      if (!emailField.value.match(emailPattern)) {
        emailError.textContent = "Valid email required";
        emailField.classList.add("error");
        event.preventDefault();
        return;
      } else {
        emailError.textContent = "";
        emailField.classList.remove("error");
      }
  
      event.preventDefault();
      mainerContainer.classList.add("hidden");
      successPage.classList.remove("hidden");
      successPage.classList.add("visible");
    }
  
    form.addEventListener("submit", validateEmail);
  });
  

  And in your CSS, you might add styles for the error state:

  .error {
    border: 1px solid #e49e99;
    background-color: #ffe8e6;
  }
  

  This approach improves readability and makes it easier to update the presentation without touching your JavaScript.

  Avoid using inline style changes within JavaScript. By toggling classes (as shown above), you let CSS handle presentation and JavaScript focus solely on behavior.

  Try to group common styles or use CSS variables to avoid repeating similar declarations across media queries. This will make your stylesheet easier to maintain.

  Your naming (e.g., .MainerContainer, .SuccessPage) is clear. Just double-check consistency (e.g., sometimes main is spelled differently) to keep the codebase neat.

  01

  Marked as helpful