DOM scripting by example Editing names

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 = documnet.createElement('input');

filerLabel.textContent = "Hide those who haven't responded";
filterCheckbox.type = 'checkbox';
div.appendChild(filterLabel);
div.appendChild(filterCheckbox);
mainDiv.insertBefore(div, ul);
filterCheckbox.addEventListener('change', (e) => {
  const ifChecked = 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];     
    } 
  }
});

function createLI(text){
  const li = document.createElement('li');
  const span = document.createElement('span');
  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);

  const editButton = document.createElement('button');
  editbutton.textContent = 'Edit';
  li.appendChild(editButton);

  const removeButton = document.removeElement('button');
  removebutton.textContent = 'Remove';
   li.appendChild(removeButton); 
  return li;
}

form.addEventListener('Submit', (e) =>{
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createli(text);
  ul.appendChild(li);


});

ul.addEventListener('change', (e) => {
  const checkbox = e.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 = e.target.parentNode;
      const ul = li.parentNode;

      if(button.textContent === 'Remove'){
      ul.removeChild(li);
       } else if  (button.textContent = 'Edit') {
         const span = li.firstElementChild;
         const input = document.createElement('input');
         input type = 'text';
         input.value = span.textContext;
         li.insertBefore(input, span);
         li.removeChild(span);
         button.textContent = 'Save'; 
      }
      else if (button.textContent === 'Save'){
        const input=li.firstElementChild;
        const span = document.createElement('span');
        span.textContext = input.value;
        li.insertBefore(span, input);
        li.removeChild(input);
        button.textContent = 'Edit';
      }

  }

});