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

Robin Schel
Robin Schel
Full Stack JavaScript Techdegree Student 2,652 Points

My solution to the challenge

Hi all,

I came up with this solution, hope someone is able to give me feedback!

Snapshot

const toggleList = document.querySelector('#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 listButtons = listUl.querySelectorAll('button');


function attachListItemButtons() {

  let index = 0;
  let list = listUl.children;

  for (let i = 0; i < list.length; i++) {

    let lastListItem = list.length - 1;

    // Remove existing buttons first
    let child = list[i].lastElementChild;  
    while (child) { 
        list[i].removeChild(child); 
        child = list[i].lastElementChild; 
    } 

    let up = document.createElement('button');
    up.className = 'up';
    up.textContent = 'Up';
    up.style.background = '#52bab3';

    let down = document.createElement('button');
    down.className = 'down';
    down.textContent = 'Down';
    down.style.background = '#508abc';

    let remove = document.createElement('button');
    remove.className = 'remove';
    remove.textContent = 'Remove';
    remove.style.background = '#768da3';

    if (index !== 0) {
      list[i].appendChild(up);
    }

    if (index !== lastListItem) {
      list[i].appendChild(down);
    }

    list[i].appendChild(remove);



    // Setting the background colors to the first and last lines
    if (index == 0) {
      list[i].style.backgroundColor = 'lightskyblue';
    } else if (index == lastListItem) {
      list[i].style.backgroundColor = 'lightsteelblue';
    } else {
      list[i].style.backgroundColor = '';
    }

    index++;
  }
}


attachListItemButtons();  


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);
      }
    }
    attachListItemButtons();
  }
});

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');
  let value = addItemInput.value.trim();

  if (value.length > 0) {
    li.textContent = value;
    ul.appendChild(li);
    attachListItemButtons();
  }

  addItemInput.value = "";
});