Difficult to add prevent adding same name functionality

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('registrar');
    const input = form.querySelector('input');
    const ul = document.getElementById('invitedList');
    const mainDiv = ul.parentElement
    const div = document.createElement('div');
    const filterLabel = document.createElement('label');
    const filterCheckbox = document.createElement('input');

    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 = '';
            }
        }
    });

    filterLabel.textContent = "Hide those who haven't responded";
    filterCheckbox.type = 'checkbox';
    div.appendChild(filterLabel);
    div.appendChild(filterCheckbox);

    mainDiv.insertBefore(div, ul);




    //This code was originally squeezed into one function but was broken apart into several functions to make it more modular and easier to read.

    //Creates li element, label lement and checkbox element. Then it appends the checkbox and label and then returns li when called upon.
    function createLi(text) {
        //Streamlines the create element action into a function that takes 3 arguments.
        function createElement(elementName, property, value) {
            const element = document.createElement(elementName);
            element[property] = value;
            return element;
        }

        function appendTo(element, parent) {
            parent.appendChild(element);
        }
        const li = document.createElement('li');

        // Puts text into span element text content to make it an html element that can be edited easily.
        const span = createElement('span', 'textContent', text);
        appendTo(span, li);
        const label = createElement('label', 'textContent', 'Confirmed'); 
        const checkbox = createElement('input', 'type', 'checkbox');

        appendTo(checkbox, label);
        appendTo(label, li);
        //edit button.
        const editButton = createElement('button', 'textContent', 'edit');
        appendTo(editButton, li);
        const removeButton = createElement('button','textContent', 'remove');
        appendTo(removeButton, li);

        return li;
    }

    // prevents default behaviour of event target. Then turns text into input value user enters and resets input value on screen. Passes text input variable to function createLi to add textContent to new li. Then runs removeButton function with li which adds remove button then it appends li under ul.
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        var sameName = false;
        if (input.value != '') { 
            for (i = 0; i < ul.children.length; i ++) {
                if (input.value == ul.children[i].span.textContent) {
                    sameName === true;
                }
            }
                if (sameName != true) {
                const text = input.value;
                input.value = '';
                const li = createLi(text);
                // pay attention here. This is creating a tree of elements ul > li > label > checkbox. 
                ul.appendChild(li);
                }
           } else {
                alert('Please enter a name');
        }
    });

    ul.addEventListener('change', (e) => {
        // console.log(e.target.checked);
        // Actual checkbox as related to the event.
        const checkbox = event.target;
        // This can also be represented by 'document.getElementsByTagName('input')[1].checked'
        const checked = checkbox.checked;
        const listItem = checkbox.parentNode.parentNode; // = li

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

    // Creates reference to target button parent node which is li and the parent node of li (which is ul) so that you can refer to the child of ul when using removeChild to remove the entire list item and also when to save the li. You can click several edit buttons and save buttons regardless of order because the first if statement always sets the appropriate constants parent elements in relation to the event target.

    //Below is a perfect example of how to put a complex line of code with contextual if statements into a variable holding several objects. Each object holds the function and you simply use nameActions.whateverfunction() in order to run that function in the same scope. This makes code more simple and more modular.

    //Practice putting your functions into objects to make them easier to reference.
    ul.addEventListener('click', (e) => {
         if (e.target.tagName === 'BUTTON') {
             const button = e.target;
             const li = button.parentNode;
             const ul = li.parentNode;
             const nameActions = {
                 remove: () => {
                 ul.removeChild(li);
                 }, 
                 edit: () => {
                  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';
                 },
                     save: () => {
                   const input = li.firstElementChild;
                   const span = document.createElement('span');
                   li.insertBefore(span, input);
                   span.textContent = input.value;
                   li.removeChild(input);
                   button.textContent = 'edit';
                 }
            }; 
             //Creates input text element and places it before span. Then removes the span element.

             const action = button.textContent;
             if (action === 'remove') {
                nameActions.remove();
              } else if (action === 'edit') {
                  console.log(event.target);
                  nameActions.edit();
              } else if(action === 'save') {
                  console.log(event.target);
                  nameActions.save();
                   }

             //Guy also replaced the above if statement with nameActions[Action](); With that case, nameActions runs and uses the action variable which will either run one of the objects remove, edit or save which essentialy does the functionality of the if statement above. This only works because the button text content names is the same as the object functions in nameActions.

           }

         });  

});```