script.js

'use strict'

let tableVisible = false

const itemCol = 0
const qtyCol = 1
const actCol = 2

document.addEventListener('DOMContentLoaded', () => {
	console.log('page loaded')
	document.querySelector('input[name="item"]').focus()
	document.querySelectorAll('input').forEach( elem => elem.onkeyup = addText )
	document.querySelector('form').onsubmit = addItem
	document.querySelector('table').onclick = deleteRow
})

function addText(e) {
	const enterKey = 13
	console.log('keyup')
	console.log(e.target.name)
	if(e.which === enterKey) addItem(e)
}

function addItem() {
	console.log('addItem')
	const itemField = document.querySelector('input[name="item"]')
	const item = itemField.value
	itemField.value = ''
	itemField.focus()
	if(item.length) addNode(item)
	return false // prevents the form from submitting

}

function clearInput() {
	document.querySelector('input[name="item"]').value = ''
	document.querySelector('input[name="item"]').focus()
}

function addNode(item, qty) {
	const table = document.querySelector('table')
	const row = table.insertRow(-1)
	row.insertCell(0).innerHTML = item
	row.insertCell(1).innerHTML = '<a href="#">delete</a>'
	clearInput()
}

function deleteRow(e) {
	console.log('delete row')
	const index = e.target.parentElement.rowIndex
	document.querySelector('table').deleteRow(index)
}