const form = document.querySelector(".signup-form");
const feedback = document.querySelector(".feedback");
const usernamePattern = /^[a-zA-Z]{6,12}$/;

form.addEventListener("submit", (e) => {
    e.preventDefault()
    const username = form.username.value;

    if (usernamePattern.test(username)) {
        // feedback good info
        feedback.textContent = "that username is valid"
    } else {
        // feedback help info
        feedback.textContent = "username must contain letters only & and be between 6 and 12 charachters long"
    }
});

// live feedback
form.username.addEventListener("keyup", e => {
    //console.log(e.target.value, form.username.value)
    console.log(e);
    if(usernamePattern.test(e.target.value)){ 
        // wenn das Username nicht dem Pattern entpricht, wird das Username-Fenster rot gefärbt
        // wenn es dem Pattern entspricht, wird es green gefärbt
        // console.log("passed")
        form.username.setAttribute("class","success")
    }else{
        // console.log("failed")
        form.username.setAttribute("class","error")
    }
})