Grocery list (plain JS)

by tomexx

HTML

<h1>Grocery list</h1>

<p>I should buy these:</p>

<div>
  <ul class="list">
  </ul>
  <form>
    <input type="text" class="input" />
    <button class="add">Add to the list</button>
  </form>
</div>

JavaScript

let items = [];

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

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

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

const deleteItem = (id) => {
	items = items.filter(item => {
  	return item.id !== id
  })
  renderList()
}

const renderList = () => {
	list.innerHTML = ''

  items.forEach(item => {
  	const newListItem = document.createElement('li')
    const newLabel = document.createElement('span')
    newLabel.innerHTML = item.label
    const deleteButton = document.createElement('button')
    deleteButton.innerHTML = 'X'
    deleteButton.addEventListener('click', () => {
    	deleteItem(item.id)
    })
    
    newListItem.appendChild(newLabel)
    newListItem.appendChild(deleteButton)
    
    list.appendChild(newListItem)
  })
  
  localStorage.setItem('groceryList', JSON.stringify(items))
}

items = JSON.parse(localStorage.getItem('groceryList'))
renderList()