I want to apply colors to input field while typing in it, However it is applied only after I click on the button "submit".

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

 form.addEventListener('submit', (e)=>{
 e.preventDefault();
 if(pattern.test(form.username.value)){
 feedback.textContent='Nice :)';
 }else{feedback.textContent='Too Sad :('}
 })

 form.username.addEventListener('keyup', (e)=>{
 if(pattern.test(e.target.value)){
 form.username.setAttribute('class', 'success')}
 else{form.username.setAttribute('class', 'error')}
  })