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

Mobile First Form with sign up using Flexbox

Rom 780

@RomWeb3

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feel free to comment if you have any advice :)

Community feedback

@fazzaamiarso

Posted

Hi Rom! Clean Solution!

Here is my refactor, I just abstracted the dom manipulation to a function

function checkInputError(errorCondition, inputField, errorText){
    const toggleClass = errorCondition ? inputField.classList.add : inputField.classList.remove;

    toggleClass("active");
    errorText.style.display = errorCondition ? 'block' : "none";
}
    input[0].addEventListener('input', (e) => {
        const value = e.target.value;
        checkInputError(value.length <= 0, input[0], errorTxt[0]); 
    });

    input[1].addEventListener('input', (e) => {
        const value = e.target.value;
        checkInputError(value.length <= 0, input[1], errorTxt[1]); 
    });

    input[2].addEventListener('input', (e) => {
        const value = e.target.value;
        checkInputError(!validateEmail(value), input[2], errorTxt[2]); 
     })

    input[3].addEventListener('input', (e) => {
        const value = e.target.value;
        checkInputError(value.length <= 0, input[3], errorTxt[3]); 
    });

I hope it helps! Cheers!

Marked as helpful

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