Ping Single Column Coming Soon Page | HTML/CSS/JS

Community feedback

• 

  Angel M•370

  @csmurilloPosted almost 2 years ago

  Hello Alana, First of all good job in completing the Ping Coming Soon challenge. I went through your code and I would suggest the following:

  1. Add this css to your style sheet .icon-container:hover i{color:white;} this will fix the problem that the icon container background turns blue which covers the icon with blue.

  2. For your email verification I would say your implementation is valid. Some people may remove the error when the form is not on focus. So I would do something like this:(feel free to use)

  let subscribeForm = document.getElementById('emailForm')
  let errorMsg = document.getElementById('errorMsg')
  let emailInput = document.getElementById('email-input')
  //things I added (remove comment)
  emailInput.addEventListener('blur',()=>{
    emailInput.classList.remove('inputError')
    errorMsg.style.display='none';
  });
  emailInput.addEventListener('keydown',()=>{
    emailInput.classList.remove('inputError')
    errorMsg.style.display='none';
  });
  subscribeForm.children[1].addEventListener('blur', (e)=>{
    emailInput.classList.remove('inputError')
    errorMsg.style.display='none';
  });
  //end of things i added (remove this)
  
  subscribeForm.addEventListener('submit', (e)=>{
      e.preventDefault()
      if(emailInput.value=="" || !(validator.isEmail(emailInput.value))){
          emailInput.classList.add('inputError')
          errorMsg.style.display='block'
      }
      else{
          emailInput.classList.remove('inputError')
          errorMsg.style.display='none'
      }
  })
  

  Also add this to your stylesheet

  .inputError:focus{
      outline: none !important;
      border: 1px solid red !important;
  }
  

  Some things that may be useful: Pixel vs REM:Article

  More on this: Whats your go to way to go about email validation??? Some people may use stackoverflow to find the result to not use the npm packages available. But most people just use email validation npm packages available in their pure js, react, angular, vue app.(In my experience I have seen this)

  Any more questions just reply to this message.

  0