Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@alanacapcreates

Desktop design screenshot for the Ping single column coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Whats your go to way to go about email validation???

Community feedback

Angel M 370

@csmurillo

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord