Here is my code

document.addEventListener('DOMContentLoaded' , () =>{ const form = document.getElementById('registrar') const input = form.querySelector('input') const divmain = 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 = ' Show who has confirmed the invitation '; filterCheckbox.type = 'checkbox'

div.appendChild(filterLabel) div.appendChild(filterCheckbox)

divmain.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){
    const 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){
    const li = lis[i]
    li.style.display = '';}}})

function createLi(text){ function createElement(elementName , property , value) { const element = document.createElement('elementName') element[property] = value; return element } const li = document.createElement('li'); const span = createElement('span', 'texContent' , 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.createElement('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)

})