Examples

A basic extending list

Enter text to expand the list.
Drag and drop elements to rearrange them.
Double click validated elements to modify them again.
Clear elements and deselect them to delete them

Source Code 
const simpleList = new ListExtender()
simpleList.addAfter('#simpleList p')
simpleList.setPlaceholder('Type here!')

Try a few of the built-in styles for extending lists!

Source Code 
const themeList = new ListExtender()
themeList.addBefore('#themeList details')
themeList.setPlaceholder('Type here!')
themeList.addFromArray(['Try', 'The', 'Buttons', 'Above'])

// event listener on button
const setTheme = event => {themeList.setTheme(themeList[event.target.getAttribute('theme')])}

Try community-made built-in styles for extending lists!

Source Code 
const commList = new ListExtender()
commList.addBefore('#commList details')
commList.setPlaceholder('Type here!')
commList.addFromArray(['Try', 'The', 'Buttons', 'Above'])

// event listener on button
const setCommTheme = event => {commList.setTheme(commList[event.target.getAttribute('theme')])}

Want to add your own theme to this list? Check out contributing.md

We also have built-in styles for extending lists! Special thanks to @basil08 for the contribution 🚀

Source Code 
const themeList = new ListExtender({ showDeleteButton: true })
themeList.addBefore('#delThemeList details')
themeList.setPlaceholder('Type here!')
themeList.addFromArray(['Try', 'The', 'Buttons', 'Above'])

// event listener on button
const setDelTheme = event => {delThemeList.setDelBtnTheme(delThemeList.delBtnThemes[event.target.getAttribute('theme')])}

Want to add your own theme to this list? Check out contributing.md

Lists have an optional delete button that shows on hover

When not using the delete button, remove an item by double clicking it and clearing the text.

Source Code 
const deleteList = new ListExtender({ showDeleteButton: true })
deleteList.addAfter('#deleteButton p')
deleteList.setPlaceholder('Type Here!')
deleteList.addFromArray(['Delete', 'These', 'Elements!!'])

ListExtender makes it easy to validate inputs

The following list accepts dates in the following formats: 2020-12-19, 12/19/2020, 19122020

Source Code 
const validateOne = new ListExtender({ showDeleteButton: true })
validateOne.addAfter('#validationOne p')
validateOne.setPlaceholder('yyyy-mm-dd || mm/dd/yyyy || ddmmyyyy')
validateOne.addValidation(value => {
  return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) ||
  (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) || 
  (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value)
}, 'Please follow specified format!!')

ListExtender allows for more complex validation as well!

The following list does not accept duplicate dates entries.

Source Code 
const validateTwo = new ListExtender() 
validateTwo.addAfter('#validationTwo p') 
validateTwo.setInputType('date')
validateTwo.addValidation(value => { 
  const vals = validateTwo.getData() 
  for (let i = 0; i < vals.length; i++) { 
    if (vals[i] === value) { 
      return false 
    } 
  } 
  return true 
}, 'Duplicates not allowed!')

It's easy to add items to the list!

Type text in the input box below, each word will be added to the list

Source Code 
const addItems = new ListExtender()
addItems.setPlaceholder('Use form above!')
addItems.appendTo('#addItems')

// event listener for button click
const handleSubmit = event => {
  event.preventDefault()
  const items = event.target.firstElementChild.value.split(' ').filter(val => val !== '')
  addItems.addFromArray(items)
  event.target.firstElementChild.value = ''
}

It's easy to get items from the list!

The items given in the list are:

Source Code 
const getItems = new ListExtender()
getItems.addAfter('#getItems code')

getItems.setPlaceholder('Type Here!')
// event listener for button click
const handleGetItems = event => {
  const p = event.target.previousElementSibling
  p.innerText = ''
  const data = getItems.getData()
  p.appendChild(document.createTextNode(`The items given in the list are: ${data.toString()}`))
}

Make a simple completed todo list!

The items that you can set complete.

Source Code 
const markedLists = new ListExtender({ showDeleteButton: true })
markedLists.addAfter('#markedLists p')
const dataMarkedList = ['bug fixing', 'implement new feature']
markedLists.addFromArray(dataMarkedList)
markedLists.element.addEventListener('mouseenter', event => {
  const children = [...markedLists.element.children]
  children.forEach(child => {
    if (child.querySelector('input[type="submit"]')) {
      child.querySelector('input[type="submit"]').value = 'DONE'
      child.querySelector('input[type="submit"]').style.visibility = 'visible'
      child.querySelector('input[type="submit"]').style.background = 'green'
    }
  })
})
markedLists.element.addEventListener('mousedown', event => {
  if (event.target.tagName === 'INPUT' && event.target.getAttribute('type') === 'submit') { 
    let ulElement = event.target.parentElement
    markedLists.element.insertBefore(ulElement, markedLists.element.children[0])
    ulElement.style['text-decoration'] = 'line-through'
  }
})