Challenge Solution

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 listUl = listDiv.querySelector('ul');
const addItemInput = document.querySelector('input.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');
const listItems = document.getElementsByTagName('li');
const lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild; 

function attachListItemButtons (li) {
  let up = document.createElement('button');
  up.className = 'up';
  up.textContent = 'up';
  li.appendChild(up);

  let down = document.createElement('button');
  down.className = 'down';
  down.textContent = 'down';
  li.appendChild(down);

  let remove = document.createElement('button');
  remove.className = 'remove';
  remove.textContent = 'remove';
  li.appendChild(remove);
}


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


//Loop through the list items
//If there are no previousElementSiblings to li: hide the second child node (UP button) of the list item
//Else if there are no nextElementSiblings to li: set style: 'display: none' (for aesthetics**) to the third child node (DOWN button) of the list item
//**Note: hiding the DOWN button causes a gap between the UP button and REMOVE button
//Else do not hide/display:none
function hideUpDownBtns() {
  for (let i = 0; i < lis.length; i++) {
    if (!lis[i].previousElementSibling) {
      lis[i].childNodes[1].style.visibility = 'hidden';
    } else if (!lis[i].nextElementSibling){
      lis[i].childNodes[2].style.display = 'none';
    } else {
      lis[i].childNodes[1].style.visibility = 'visible';
      lis[i].childNodes[2].style.display = 'flex';
    }
  }
}

//Call the function on page load
hideUpDownBtns();


listUl.addEventListener('click', (event) => {
  if (event.target.tagName == 'BUTTON') {
    if (event.target.className == 'remove') {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    }
    if (event.target.className == 'up') {
      let li = event.target.parentNode;
      let prevLi = li.previousElementSibling;
      let ul = li.parentNode;
      if (prevLi) {
        ul.insertBefore(li, prevLi);
      }
    }
    if (event.target.className == 'down') {
      let li =event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
      }
    }
    //Call the function when a button is pressed to refresh button styles
    hideUpDownBtns();
  }
});


toggleList.addEventListener('click', function() {
  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', function() {
  descriptionP.innerHTML = descriptionInput.value + ':';
  descriptionInput.value = '';
});

addItemButton.addEventListener('click', function() {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
  //Call the function after adding item to refresh button styles
  hideUpDownBtns();
});