JavaScript JavaScript and the DOM Traversing the DOM Getting the First and Last Child

Sharing my Solution to everyone

const toggleList = document.getElementById('toggleList');
const listDiv = document.querySelector('.list');
const descriptionInput = document.querySelector('input.description');
const descriptionP = document.querySelector('p.description');
const descriptionButton = document.querySelector('button.description');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const ul = document.querySelector('div > ul');
const lis = ul.children;
const buttons = ['Up','Down','Delete'];

function setButtons(li) {
    for(let i = 0; i < buttons.length; i++) {
      let btn = document.createElement('button');
      btn.className = buttons[i];
      btn.textContent = buttons[i];
      li.appendChild(btn);
    }
}

function btnConfig() {
  const firstchild = ul.firstElementChild;
  const lastchild = ul.lastElementChild;
  for(let i = 0; i < lis.length; i++) {
    if(lis[i] == firstchild) {
      lis[i].querySelector('button.Up').style.visibility = 'hidden';
    } else if(lis[i] == lastchild) {
      lis[i].querySelector('button.Down').style.visibility = 'hidden';
    } else {
       lis[i].querySelector('button.Up').style.visibility = 'visible';
       lis[i].querySelector('button.Down').style.visibility = 'visible';
    }
  }  
}

toggleList.addEventListener('click', () => {
  if (listDiv.style.display == 'none') {
    toggleList.textContent = 'Hide list';
    listDiv.style.display = 'block';
  } else {
    toggleList.textContent = 'Show list';                        
    listDiv.style.display = 'none';
  }                         
});

descriptionButton.addEventListener('click', () => {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

ul.addEventListener('click', (event) => {

  if(event.target.className == 'Up') {
    const li = event.target.parentNode;
    ul.insertBefore(li,li.previousElementSibling);
  }

  if(event.target.className == 'Down') {
    const li = event.target.parentNode;
    ul.insertBefore(li.nextElementSibling,li);
  }

  if(event.target.className == 'Delete') {
    ul.removeChild(event.target.parentNode);
  }

  btnConfig();
});

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  setButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
  btnConfig();
});

for(let i = 0; i < lis.length; i++) {
    setButtons(lis[i]);
}

btnConfig();

i tried to avoid repeating codes as much as possible