script.js

'use strict'

const minNameLength = 3
const minEmailLength = 10

document.addEventListener('DOMContentLoaded', async() => getAll())

function selectContact(e) {
	// We access the id attribute of the link we clicked
	const key = e.target.getAttribute('id')
	// And use this to retrieve the relevant record
	const data = JSON.parse(localStorage.getItem(key))
	// Now we insert the data into the form
	document.querySelector('input[name="name"]').value = data.name
	document.querySelector('input[name="email"]').value = data.email
	document.querySelector('input[name="key"]').value = key
	// now we change the text on the button and rewire the event handler
	document.querySelector('button#submit').innerHTML = 'Update Record'
	document.querySelector('button#submit').onclick = updateContact
	// finally we reveal the delete button
	document.querySelector('button#delete').classList.remove('hidden')
	return false
}

function updateContact() {
	// we grab all the data from the form's input boxes into an object
	const data = Array.from(document.querySelectorAll('input')).reduce( (acc, val) => {
		if(val.name !== 'key') acc[val.name] = val.value
		return acc
	}, {})
	// next we get the record key stored in the hidden field
	const key = document.querySelector('input[name="key"]').value
	// and finally store the updated data using the same key
	localStorage.setItem(key, JSON.stringify(data))
	// lastly we reload the contact list
	getAll()
	return false
}

function deleteContact() {
	// we get the record key stored in the hidden field
	const key = document.querySelector('input[name="key"]').value
	// and delete that object from localstorage
	localStorage.removeItem(key)
	// lastly we reload the contacts list
	getAll()
	return false
}

function clearForm() {
	// we delete the data from all the input boxes
	document.querySelector('input[name="name"]').value = ''
	document.querySelector('input[name="email"]').value = ''
	// return the cursor focus to the name field
	document.querySelector('input[name="name"]').focus()
	// change the button text
	document.querySelector('button').innerHTML = 'Add Record'
	// wire the button to the add function
	document.querySelector('button').onclick = addContact
	document.querySelector('button#delete').onclick = deleteContact
	// hide the delete button
	document.querySelector('button#delete').classList.add('hidden')
}

function addContact() {
	if (document.querySelector('input[name="name"]').value.length < minNameLength) return false
	if (document.querySelector('input[name="email"]').value.length < minEmailLength) return false
	const data = Array.from(document.querySelectorAll('input')).reduce( (acc, val) => {
		if(val.name !== 'key') acc[val.name] = val.value
		return acc
	}, {})
	const key = getHash()
	localStorage.setItem(key, JSON.stringify(data))
	getAll()
	return false
}

function getAll() {
	const items = {...localStorage} // spread operator to return all keys
	const list = document.querySelector('ol')
	list.innerHTML = ''
	for(const key in items) {
		const listItem = document.createElement('li')
		const link = document.createElement('a')
		link.onclick = selectContact
		link.setAttribute('href', '#')
		link.setAttribute('id', key)
		link.innerHTML = JSON.parse(items[key]).name
		listItem.appendChild(link)
		list.appendChild(listItem)
	}
	clearForm()
}

function getHash() {
	const hashLen = 36
	const keyLen = 8
	const offset = 2
	return Math.random().toString(hashLen).substr(offset, keyLen)
}