When adding a new item to the list i would like it to change color based on the input value.

How do i add the input.value to my new appended li item?

I have created a codepen if anyone would be able to help 
<http://codepen.io/o-sewell/pen/mOBjvQ>

```
// DIV TOGGLE
const toggleButton = document.querySelector('#toggleList');
const listDiv = document.querySelector('.list');

// User INPUT
const userInput = document.querySelector('.userInput');
const button = document.querySelector('button.description');
const p = document.querySelector('p.description');
let listItem = document.querySelectorAll('li');

// ADD ITEM
const addItemInput = document.querySelector('.addItemInput');
const addItemButton = document.querySelector('button.addItemButton');

button.addEventListener('click', () => {
  for (let i = 0; i < listItem.length; i++) {
    listItem[i].style.color = userInput.value;
  }

  p.innerHTML = userInput.value + ':';
});

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

addItemButton.addEventListener('click', () => {
  let list = document.querySelector('ul');
  let li = document.createElement('li');

  li.textContent = addItemInput.value;
  let appendedItem = list.appendChild(li);

  console.log(appendedItem);

  for (let i = 0; i < appendedItem.length; i++) {
    appendedItem[i].style.color = userInput.value;
  }

  console.log(appended item);

  addItemInput.value = '';
});

```