Newsletter sign-up form with success message

Community feedback

• 

  Williams Akanni•330

  @shadowbanksPosted about 2 months ago

  Hello mohamedsec,

  Congrats on completing this challenge. 🥳 Awesome work! I have a few suggestions that can help improve your page:

  1. Centering your card
     Currently, the card isn't centered on the screen. To achieve this, you can use Flexbox on the body element to center it both vertically and horizontally. You can add this in your media query for Desktop:

  body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  This will center the main nicely.

  2. Adjust the Width for mobile
     In your main.container I'd recommend adjusting the style to:

  main.container{
  color: var(--DarkSlateGrey);
  width: 100%;
  height: 100%;
  }
  

  the position: relative isn't necessary here, using width: 100% instead of max-width and min-width will ensure that the container takes up the full width on mobile screens.

  3. Image Adjustments
     For your picture tag, I'd suggest the media query to (max-width:700px) instead of (max-width:600px) because you're using 700px as breakpoint for desktop. This ensure better image scaling. Also, consider tweaking the image's height a little to have more height.
     Side Note: If you notice a vertical scroll bar, it might be due to the height given to .content. I'd suggest checking this property and adjusting/removing it if necessary to avoid any unwanted overflow.
  4. Validation with js

  • Email input type
    Currently, email input only accepts emails that end with .com, It's better to allow all valid email formats unless you have a specific reason for restricting this.
  • Real-time Email Validation
    Instead of waiting for the user to submit the form, I recommend validating the email input in real-time to improve user experience. This way, users will know if there's an issue with their input right away.

  You can achieve this by breaking up the current loginForm.addEventListener and create a validateInput() function like this:

  const validateInput = () => {
      const formData = new FormData(loginForm).entries();
      const {email} = Object.fromEntries(formData);
      const isvalid = emailValidation(email);
      if (isvalid === "valid"){
          displayEerror.style.visibility ="hidden";
          formRreg.style.visibility = "hidden";
          formSucc.style.visibility = "visible";
      }
      if (isvalid === "invalid"){
          displayEerror.style.visibility ="visible";
          emailInput.classList.add("errorstyle");
      }
  }
  

  Then, add an event listener to the #email input (emailInput)

  emailInput.addEventListener('input', (e) => {
      validateInput();
  }
  

  Additionally, update the submit event listener like this:

  loginForm.addEventListener('submit',(e)=>{
      e.preventDefault();
      validateInput();
  }
  

  These adjustments will improve the user experience.

  I hope you find these suggestions helpful, Happy coding!!! :))

  Marked as helpful

  0

  ---

  

  mohamedsec•340

  @mohamedsecPosted about 2 months ago

  @shadowbanks Thank you Williams for the helpful comments

  1