My solution to (almost) all improvements RSVP App

document.addEventListener('DOMContentLoaded', () => {
  const header = document.getElementById('header');
  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');

  const namesArray = [];

  let newText = '';

  filterLabel.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 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 = '';
          li.querySelector('label').style.display = 'none';  
        } else {
          li.style.display = 'none';                    
        }
      }
    } else {
      for (let i = 0; i < lis.length; i += 1) {
        let li = lis[i];
        li.style.display = '';
        li.querySelector('label').style.display = '';
      }                                 
    }
  });

  function createLI(text) {
    function createElement(elementName, property, value) {
      const element = document.createElement(elementName);  
      element[property] = value; 
      return element;
    }

    function appendToLI(elementName, property, value) {
      const element = createElement(elementName, property, value);     
      li.appendChild(element); 
      return element;
    }

    const li = document.createElement('li');

    appendToLI('span', 'textContent', text);     
    appendToLI('label', 'textContent', 'Confirm')
      .appendChild(createElement('input', 'type', 'checkbox'));
    appendToLI('textarea', 'placeholder', 'Notes');
    appendToLI('button', 'textContent', 'edit');
    appendToLI('button', 'textContent', 'remove');
    return li;
  }

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }  

  function errorEmpty() {
    const errorEmpty = document.createElement('p');
    errorEmpty.className = 'errorEmpty';
    errorEmpty.textContent = ('You have not entered a name!');
    header.appendChild(errorEmpty);
  }

  function errorDuplicate() {
    const errorDuplicate = document.createElement('p');
    errorDuplicate.className = 'errorDuplicate';
    errorDuplicate.textContent = ('You have already entered this name!');
    header.appendChild(errorDuplicate);
  }

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

    const errorEmpty = document.createElement('p');
    errorEmpty.className = 'errorEmpty';
    errorEmpty.textContent = ('You have not entered a name!');
    const errorCountEmpty = document.getElementsByClassName('errorEmpty').length;

    const errorDuplicate = document.createElement('p');
    errorDuplicate.className = 'errorDuplicate';
    errorDuplicate.textContent = ('You have already entered this name!');
    const errorCountDuplicate = document.getElementsByClassName('errorDuplicate').length;

    if (text === '') {
      header.appendChild(errorEmpty);
      const pEmpty = document.querySelector('.errorEmpty'); //
      const pDuplicate = document.querySelector('.errorDuplicate'); //
        if (errorCountEmpty > 0) {
          pEmpty.remove();
        }
        if (errorCountDuplicate > 0) {          
          pDuplicate.remove();
        }

    } else {
      const isDuplicate = namesArray.indexOf(text);

      if (isDuplicate > -1) {
        header.appendChild(errorDuplicate);
        if (errorCountDuplicate > 0) {
          header.removeChild(errorDuplicate);
        }
        if (errorCountEmpty > 0) {
          const pEmpty = document.querySelector('.errorEmpty'); //
          pEmpty.remove();
        }
      } else {
        namesArray.push(text);
          localStorage.setItem('storage', JSON.stringify(namesArray));
        input.value = '';
        const li = createLI(text);
        ul.appendChild(li);
        const pEmpty = document.querySelector('.errorEmpty'); //
        const pDuplicate = document.querySelector('.errorDuplicate'); //
          if (errorCountEmpty > 0) {
            pEmpty.remove();
          }
          if (errorCountDuplicate > 0) {          
            pDuplicate.remove();
          }
        }
      }  
  });

  window.onload = function() {
    function getItems() {
      const items = localStorage.getItem('storage');
      if (items) {
        const startItems = JSON.parse(items);
        for(let i = 0; i < startItems.length; i++) {
          namesArray.push(startItems[i]);
          const li = createLI(startItems[i]);
          ul.appendChild(li);
        }
      }
    }
    getItems();
  }


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

    if (checked) {
      listItem.className = 'responded';
      label.childNodes[0].textContent = 'Confirmed';
    } else {
      listItem.className = '';
      label.childNodes[0].textContent = 'Confirm';
    }
  });


  ul.addEventListener('click', (e) => {
    const spanOldText = '';
    if (e.target.tagName === 'BUTTON') {
      const button = e.target;
      const li = button.parentNode;
      const ul = li.parentNode;
      const action = button.textContent;
      const nameActions = {
        remove: () => {
          const span = li.firstElementChild;
          newText = span.textContent;
          const indexnewText = namesArray.indexOf(newText);
          if (indexnewText > -1) {
            namesArray.splice(indexnewText, 1);
          }
          localStorage.setItem('storage', JSON.stringify(namesArray));
          ul.removeChild(li);
        },
        edit: () => {
          const span = li.firstElementChild;
          newText = span.textContent;
          console.log(newText);
          const input = document.createElement('input');
          input.type = 'text';
          input.value = newText;
          li.insertBefore(input, span);
          li.removeChild(span);
          button.textContent = 'save';
        },
        save: () => {
          const input = li.firstElementChild;
          const span = document.createElement('span');
          const text = capitalizeFirstLetter(input.value.toLowerCase());
          const pEmpty = document.querySelector('.errorEmpty');
          const errorCountEmpty = document.getElementsByClassName('errorEmpty').length;
          const pDuplicate = document.querySelector('.errorDuplicate');
          const errorCountDuplicate = document.getElementsByClassName('errorDuplicate').length;
          span.textContent = text;
          if (text === '') {
            errorEmpty();
            if (errorCountEmpty > 0) {
              pEmpty.remove();
            }
            if (errorCountDuplicate > 0) {          
              pDuplicate.remove();
            }
          } else {
            const isDuplicate = namesArray.indexOf(text);
            if (isDuplicate > -1) {
              errorDuplicate();
              if (errorCountEmpty > 0) {
                pEmpty.remove();
              }
              if (errorCountDuplicate > 0) {          
                pDuplicate.remove();
              }
            } else {
              namesArray.push(text);
              console.log(newText);
              const indexnewText = namesArray.indexOf(newText);
              console.log(indexnewText);

              if (indexnewText > -1) {
                namesArray.splice(indexnewText, 1);
              }

              localStorage.setItem('storage', JSON.stringify(namesArray));
              li.insertBefore(span, input);
              li.removeChild(input);
              button.textContent = 'edit';
              if (errorCountEmpty > 0) {
                pEmpty.remove();
              }
              if (errorCountDuplicate > 0) {          
                pDuplicate.remove();
              }
            }
          }        
        }
      };

      // select and run action in button's name
      nameActions[action]();
    }
  });  
});