const username = document.getElementById("username");
const username_icon_cancel = document.getElementById("icon-cancel__username");
const username_icon_check = document.getElementById("icon-check__username");
const username_input_error = document.getElementById("input-error__username");
const password = document.getElementById("password");
const password_icon_cancel = document.getElementById("icon-cancel__password");
const password_icon_check = document.getElementById("icon-check__password");
const password_input_error = document.getElementById("input-error__password");

username.addEventListener('input', validate_username_length);
password.addEventListener('input', validate_password_length);

function validate_username_length(e) {
    var username_length = e.target.value.length;
    if(username_length < 4){
	username_icon_check.style.display = "none";
	username_icon_cancel.style.display = "block";
	username_input_error.style.display = "block";
    }
    if(username_length >=4 && username_length <= 16){
	username_icon_check.style.display = "block";
	username_icon_cancel.style.display = "none";
	username_input_error.style.display = "none";
    }
    if(username_length > 16){
	username_icon_check.style.display = "none";
	username_icon_cancel.style.display = "block";
	username_input_error.style.display = "block";
    }
}
function validate_password_length(e) {
    var password_length = e.target.value.length;
    if(password_length < 4){
	password_icon_check.style.display = "none";
	password_icon_cancel.style.display = "block";
	password_input_error.style.display = "block";
    }
    if(password_length >=4 && password_length <= 12){
	password_icon_check.style.display = "block";
	password_icon_cancel.style.display = "none";
	password_input_error.style.display = "none";
    }
    if(password_length > 12){
	password_icon_check.style.display = "none";
	password_icon_cancel.style.display = "block";
	password_input_error.style.display = "block";
    }
}