Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
dynamic-websites/exercises/05_client/contacts/script.js
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
101 lines (91 sloc)
3.39 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'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) | |
} |