Welcome! 👋

This solution to the challenge Pod request access landing page That i built an early access landing page with custom form validation in JS.

---

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
• Author

#overview ##the challenge Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements
• Receive an error message when the form is submitted if:
• The Email address field is empty should show "Oops! Please add your email"
• The email is not formatted correctly should show "Oops! Please check your email"

##links

• solution URL
• live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• JavaScript
• desktop-first

What I learned

I improved my knowledge in HTMLand CSS, and I learned how to make a framework for email validation in JavaScript

• I learned to use a tag as a container so that in the design I can put a button inside the input:

<form name="register" class="register">
  <input name="email" type="email" placeholder="Email address" >
  <button type="submit" id="submit" class="button" onclick="validacaoEmail(register.email)">Request Access</button>
</form>

• I learned how to use the -webkit-autofill pseudo-classe to remove the background color when we select an existing data in memory

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #2C344B inset;
  -webkit-text-fill-color: white !important;
}

• I reinforced how to use the after pseudo-class to create a filter color on top of the img

.background-right:after{
content: '';
width: 100%;
height: 100%;
background-color: rgba(84, 230, 175, 0.1);
position: absolute;

}

• I learned how to remove the outline in the input focus

.register input:focus{
    outline: none;
}

• I learned to use the .substring function and the .search function to be able to go through and validate the email field

   function validacaoEmail(field) {
  usuario = field.value.substring(0, field.value.indexOf("@"));
  dominio = field.value.substring(field.value.indexOf("@")+ 1, field.value.length);
  user = field.value.substring(0,field.value.length)
  btn = document.querySelector("#submit");

  if ((usuario.length >=1) &&
          (dominio.length >=3) &&
          (usuario.search("@")==-1) &&
          (dominio.search("@")==-1) &&
          (usuario.search(" ")==-1) &&
          (dominio.search(" ")==-1) &&
          (dominio.search(".")!=-1) &&
          (dominio.indexOf(".") >=1)&&
          (dominio.lastIndexOf(".") < dominio.length - 1)) {
    console.log("valid email address");
  }
}

Author

• Linkdin - Marco Tullio Franca
• Frontend Mentor - @MarcoFranca