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

My Solution to the Challenge

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 lis = listUl.children;
const firstListItem = listUl.firstElementChild;
const lastListItem = listUl.lastElementChild;

firstListItem.style.backgroundColor = 'lightskyblue';
lastListItem.style.backgroundColor = 'lightsteelblue';

function attachListItemButtons(li) {
  if (li !== firstListItem) {
    let up = document.createElement('button');
    up.className = 'up';
    up.textContent = 'Up';
    li.appendChild(up);
  }

  if (li !== lastListItem) {
    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);
}

function removeButtonFromListItem (li, buttonType) {
  const liChildren = li.children;

  for (let i = 0; i < liChildren.length; i += 1) {
    if (liChildren[i].className === buttonType) {
      li.removeChild(liChildren[i]);
    }
  }
}

function addButtonToListItem(li, buttonType) {
  let button = document.createElement('button');
  const liChildren = li.children;

  button.className = buttonType;
  if (buttonType === 'up') {
    button.textContent = 'Up';
  } else {
    button.textContent = 'Down';
  }

  for (let i = 0; i < liChildren.length; i += 1) {
    if (buttonType === 'up' && liChildren[i].className === 'down') {
      li.insertBefore(button, liChildren[i]);
    } else if (buttonType === 'down' && liChildren[i].className === 'remove') {
      li.insertBefore(button, liChildren[i]);
    }
  }
}

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

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 (li === listUl.firstElementChild) {
        removeButtonFromListItem (li, 'up');
        addButtonToListItem(prevLi, 'up');
      } else if (prevLi === listUl.lastElementChild) {
        removeButtonFromListItem (prevLi, 'down');
        addButtonToListItem(li, 'down');
      }
    }
    if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
      }
      if (li === listUl.lastElementChild) {
        removeButtonFromListItem (li, 'down');
        addButtonToListItem(nextLi, 'down');
      } else if (nextLi === listUl.firstElementChild) {
        removeButtonFromListItem (nextLi, 'up');
        addButtonToListItem(li, 'up');
      }
    }
  }
});

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

addItemButton.addEventListener('click', () => {
  let ul = document.getElementsByTagName('ul')[0];
  let li = document.createElement('li');
  li.textContent = addItemInput.value;
  attachListItemButtons(li);
  ul.appendChild(li);
  addItemInput.value = '';
});
Steven Parker
Steven Parker
163,369 Points

Are you just sharing, or did you have a question about this?

1 Answer

Adam Lyles Kauffman
Adam Lyles Kauffman
11,325 Points

you should add comments to this code