todo list

by tomexx

HTML

<h1>My list:</h1>
<ul class="list">
</ul>
<input type="text" class="input" />
<button class="add">Add item</button>

CSS

.list {
  display: block;
  margin-bottom: 20px;
}

.remove {
  margin-left: 0.5rem;
}

JavaScript

let items = []

const body = document.querySelector('body')
const list = document.querySelector('.list')
const add = document.querySelector('.add')
const input = document.querySelector('.input')

const getRandomId = () => {
	return 'id-' + Math.round(Math.random() * 100000000000)
}

const renderList = (defaultItems) => {
	list.innerHTML = ''
  const itemsToRender = defaultItems != null ? defaultItems : items
	itemsToRender.forEach((item) => {
  	const newElement = document.createElement('li')
    newElement.className = 'item'
    newElement.id = item.id
    const span = document.createElement('span')
    const remove = document.createElement('button')
    remove.className = 'remove'
    remove.innerHTML = 'X'
    remove.addEventListener('click', (e) => {
    	items = itemsToRender.filter(item => item.id !== e.path[1].id)
      renderList(items)
    })
    span.innerHTML = item.value
    newElement.appendChild(span)
    newElement.appendChild(remove)
  	list.appendChild(newElement)
    
    localStorage.setItem('items', JSON.stringify(items))
  })
}

add.addEventListener('click', () => {
	const id = getRandomId()
	items.push({
  	id,
    value: input.value
  })
  renderList()
  input.value = ''
})

window.addEventListener('load', () => {
	if (localStorage.getItem('items')) {
    items = JSON.parse(localStorage.getItem('items'))
  }
	items.forEach((item) => {
  	renderList(items)
  })
})