Refactor 2: Readable Branching Logic

document.addEventListener('DOMContentLoaded', ()=>{
const form = document.getElementById('registrar');
const input = form.querySelector('input');

const mainDiv= document.querySelector('.main');
const ul= document.getElementById('invitedList');

const div= document.createElement('div');
const filterLabel= document.createElement('label');
const filterCheckbox= document.createElement('input');

filterLabel.textContent="Hide those who have'nt invited";
filterCheckbox.type= 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckbox);
mainDiv.insertBefore(div,ul);

filterCheckbox.addEventListener('change', (e)=>{
 const ischecked= e.target.checked;
  const lis= ul.children;
  if(ischecked){
    for(let i = 0; i<lis.length; i+=1){
    let li= lis[i];
      if(li.className==='responded'){
      li.style.display= '';
      }else{
        li.style.display= 'none';
      }
    }
  }else{
  for(let i=0; i<lis.length; i+=1){
    let li= lis[i];
    li.style.display='';
  }

  }
});




form.addEventListener('submit', (e)=>{
e.preventDefault();
const text= input.value;
  input.value= '';



    const span= document.createElement('span');
  const li= document.createElement('li');
  span.textContent= text;
  li.appendChild(span);
  const label= document.createElement ('label');
  label.textContent= 'confirmed';
  const checkbox= document.createElement('input');
  checkbox.type= 'checkbox';
  label.appendChild(checkbox);
  li.appendChild (label);
  ul.appendChild(li);
  const editButton= document.createElement('button');
  editButton.textContent= 'edit';
  li.appendChild(editButton);
  const removebutton= document.createElement('button');
  removebutton.textContent= 'remove';
  li.appendChild(removebutton);

  ul.appendChild(li);
});

ul.addEventListener('change', (e) => {
const checkbox = event.target;
const checked = checkbox.checked; 
const listItem = checkbox.parentNode.parentNode; 

if(checked){
listItem.className='responded';
} else{

listItem.className= '';
  }
});

ul.addEventListener('click', (e)=>{
 if (e.target.tagName==='BUTTON' ){
   const button= e.target;
    const li= button. parentNode;
   const ul= li. parentNode;
   function removeName(){
   ul.removeChild(li);
   }
function editName(){
   const span= li.firstElementChild;
   const input= document.createElement('input');
   input.type= 'text';
   input.value= span.textContent;
   li.insertBefore(input, span);
   li.removeChild(span);
   button.textContent= 'save';
   }
 function saveName{
      const input= li.firstElementChild;
   const span= document.createElement('span');
   span.textContent=input.value;
   li.insertBefore(span, input);
   li.removeChild(input);
   button.textContent= 'edit';
   }
 if (button.textContent==='remove'){  
removeName();   
 }else if(button.textContent === 'edit'){
  editName();

 }else if(button.textContent === 'save'){
   saveName();
   }
  }                   
 });
});