Cacher is the code snippet organizer for pro developers

body {
	background-color: #171b2c;
	font-size: 20px;
    font-family: Helvetica, Arial, Verdana, monospace, sans-serif;
    font-size: 14px;
    
}

#topDiv {
	max-width: 1000px;
	margin: 0 auto;
	background-color: #eaffeb;
	min-height: 100vh;
	padding: 10px;
	border: 1px solid orange;
	border-radius: 10px;
}
/* FORM */
/* legend { background-color: rgb(181, 228, 242)} */
fieldset {
	padding: 10px;
	border-radius: 10px;
	background-color: rgb(181, 228, 242);
 }
 
 fieldset label {
	display: inline-block;
	margin-bottom: 10px;
 }
 
 form input {
	float: right;
	margin-right: 20px;
	width: 150px;
 }
 
 form input:invalid {
	background-color: pink;
 }
 
 form input:valid {
	background-color: lightgreen;
 }
 
 /* SEARCH DIV */
 
#searchDiv {
	border: 1px solid black;
	border-radius: 10px;
	background-color: rgb(181, 228, 242);
	padding: 10px;
}

#searchDiv input {
	/* float: right; */
	margin-left: 30px;
	
	width: 150px;
}

#searchInput {
	background-color: lightcyan;
}

#match-display {
	background-color: lightgoldenrodyellow;
}

 /*  TABLE */
 #contacts {
	overflow: auto;
 }

 table {
	margin-top: 20px;
	width: 100%;
	
 }
 table,
 tr,
 td,
 th {
	border: 1px solid blue;
 }
 
 tr,
 td,
 th {
	padding: 7px 10px 7px 10px;
 }
 
 th {
	background-color: lightblue;
 }
 
 tr:nth-child(even) {
	background-color: lightsteelblue;
 }
 
 tr:nth-child(odd) {
	background-color: lightcyan;
 }
 
 tr:hover {
	background-color: lightgreen;
 }
 
 td.trashIcon {
/* 	background-image: url("../img/trash-icon.png"); */
	/* For remote image, use next line */
	background-image: url("http://irvingangulo.com/assets/cm-f/contact-manager/img/trash-icon.png");
	
	/* background-color: transparent; */
	background-position: center center;
	background-repeat: no-repeat;
	width: 20px;
	/* padding-left: 5px;
		padding-right: 5px; */
	/* padding: 30px; */
 }

 td.trashIcon:hover {
	background-color: rgb(252, 62, 62);
 }
 

//====SCRIPT
window.onload = init;

// The contact manager as a global variable
let cm = {};

//	-----------------------------------
function init() {
	// create an instance of the contact manager
	cm = new ContactManager();

	cm.addTestData(4);
	// cm.printContactsToConsole();

	// Display contacts in a table
	// Pass the id of the HTML element that will contain the table
	displayFullListOfContacts("contacts", cm);

	addListeners(cm);
}
//=====================================
//====CONTACT CLASS
class Contact {
	constructor(name, age, email, city, zip, country) {
		this.name = name;
		this.age = parseInt(age);
		this.email = email;
		this.city = city;
		this.zip = parseInt(zip);
		this.country = country;
	}
}

//	-----------------------------------
//====CONTACT MANAGER CLASS
class ContactManager {
	constructor() {
		// when we build the contact manager, it
		// has an empty list of contacts
		this.listOfContacts = [];
		this.displayOfContacts = [];
		this.dataCounter = 0;

		//sortOrder will invert the sorting algorithms
		//if sortOrder === 1, sorting = ascending; if -1, sorting = descending
		this.sortOrder = 1;

		//prevAttCalled / name of last invoked function 
		this.prevAttCalled = '';
	}

	addTestData(numberOfContacts) {
		for (let i = 0; i < numberOfContacts; i++) {
			let newC = ContactManager.createRandomContact();
			this.add(newC);
		}
		this.resetSortByName();
	}

	//Sets previous invoker's name to '' so sortByName() will sort ascending
	resetSortByName() {
		this.displayOfContacts = this.listOfContacts.slice();//copy array
		//'' so this.sortOrder will be 1 in toggleSortOrderAndCompareInvoker
		this.prevAttCalled = '';
		// sort list of contacts by Name
		this.sortByName();
	}

	// Will erase all contacts
	empty() {
		this.listOfContacts = [];
	}

	add(contact) {
		this.listOfContacts.push(contact);
		this.displayOfContacts = this.listOfContacts.slice();//make a copy
	}

	remove(contact) {
		for (let i = 0; i < this.listOfContacts.length; i++) {
			var c = this.listOfContacts[i];

			if (c.email === contact.email) {
				// remove the contact at index i
				this.listOfContacts.splice(i, i);
				// stop/exit the loop
				break;
			}
		}
	}

	printContactsToConsole() {
		// this.listOfContacts.forEach(function (c) {
		// 	console.log(c.name);
		// });
        console.log(this.listOfContacts);
	}

	load() {
		if (localStorage.contacts !== undefined) {
			this.listOfContacts = JSON.parse(localStorage.contacts);
		}
	}

	save() {
		localStorage.contacts = JSON.stringify(this.listOfContacts);
	}

	//====CONTACT MANAGER SORTING FUNCTIONS
    //sort strings
	sortByName() {
		this.sortStringProp('name');
	}
	sortByEmail() {
		this.sortStringProp('email');
	}
	sortByCity() {
		this.sortStringProp('city');
	}
	sortByCountry() {
		this.sortStringProp('country');
	}
    //sort numbers
	sortByAge() {
		this.sortNumberProp('age');
	}
	sortByZip() {
		this.sortNumberProp('zip');
	}

	//Sorts string-containing properties of a contact
	sortStringProp(propName) { //(string)
		this.toggleSortOrderAndCompareAtt(propName);
		this.displayOfContacts.sort(
			ContactManager.sortStringByProp(propName, this.sortOrder));
		this.prevAttCalled = propName;
	}

	//Sorts number-containing properties of a contact
	sortNumberProp(propName) { //(string)
		this.toggleSortOrderAndCompareAtt(propName);
		this.displayOfContacts.sort(
			ContactManager.sortNumberByProp(propName, this.sortOrder));
		this.prevAttCalled = propName;
	}

	toggleSortOrderAndCompareAtt(whoIsCalling) {//(string), last called Att
		//Changing this variable to the opposite value changes 
		//the sorting order of compare functions
		this.sortOrder = -this.sortOrder;

		/**Compare the names of the last attribute called function with the current
		 * attribute at the moment, if they do not match, set sortOrder 
		 * to 1, and assign new name to prevAttCalled
		 * This part of the function ensures that the sort order always 
		 * start in ascending order */
		if (this.prevAttCalled !== whoIsCalling) { this.sortOrder = 1; }
	}

	//====CONTACT MANAGER STATIC FUNCTIONS
	//callback for sorting array by strings. Using closure to pass 
	// contact's property and sortOrder
	static sortStringByProp(propertyNameAsString, sortOrder) {//(string)
		return (c1, c2) => {
			c1 = c1[propertyNameAsString].toLowerCase();
			c2 = c2[propertyNameAsString].toLowerCase();

			if (c1 < c2)
				return -1 * sortOrder;
			if (c1 > c2)
				return 1 * sortOrder;
			return 0;
		}
	}

	//callback for sorting array by numbers. Using closure to pass 
	// contact's property and sortOrder
	static sortNumberByProp(propertyNameAsString, sortOrder) {//(string)
		return (c1, c2) => {
			c1 = c1[propertyNameAsString];
			c2 = c2[propertyNameAsString];
			return (c1 - c2) * sortOrder;
		}
	}

	//creates random contact using the rCD object literal
	static createRandomContact() {
		let n = getRandomFromArray(rCD.firstNames);//first
		let last = getRandomFromArray(rCD.lastNames);//last
		let e = last + "@" + n + '.com';//email: last@first.com

		e = e.toLocaleLowerCase();
		n = n + " " + last;//first + last

		let a = Math.round(Math.random() * 100);//age
		let ct = getRandomFromArray(rCD.cities);//city
		let z = getRandomFromArray(rCD.zips);//zip
		let ctry = getRandomFromArray(rCD.countries);//country

		//new Contact(name, age, email, city, zip, country)
		return new Contact(n, a, e, ct, z, ctry);
	}
}

//=====================================
//====COMPARE INPUT
// this funciton is called every time a value is received on input.
//cm as reference instead of gobal variable
function compareValues(cm) {
	return function (evt) {
		let input = evt.target.value;//a string
		input = input.toLowerCase();
		let myTable = document.querySelector('#contacts table');
		let feedback = document.querySelector('#match-display');
		let countMatches = 0;
		cm.displayOfContacts = [];

		//Filter array. If the input matches the a contact's name at 
		//length of input, it is added to the display of contacts array
		// e.g.  input = irv; contact name = Irving; contact name is sliced 
		//to irv

		cm.displayOfContacts = cm.listOfContacts.filter(contact => {
			let name = contact.name.toLowerCase();
			name = name.slice(0, input.length);
			if(input === name) countMatches++;
			return input === name;
		});

		//if input > 0, display only partial list; else display full list
		if (input.length > 0) {
			displayContactsAsATable('contacts', cm);

			//...and countMatches > 0 (at least one match): display number of matches
			if (countMatches > 0) {
				feedback.value = countMatches + ' ' + 'contacts match.'
			} else if (countMatches === 0) {
				//else display that there are no matches
				feedback.value = 'Sorry, no contact found.'
			}

			//if no input is present, display all contacts
		} else if (input.length === 0) {//else display full list
			displayFullListOfContacts('contacts', cm);
			feedback.value = "Displaying all contacts.";
		}
	}
}

//=====================================
//====TABLE DISPLAY
function displayFullListOfContacts(idOfContainer, cm) {//(string, ContactManager)
	cm.displayOfContacts = cm.listOfContacts.slice();//copy array
	cm.resetSortByName();
	displayContactsAsATable(idOfContainer, cm);
}

//	-----------------------------------
function displayContactsAsATable(idOfContainer, cm) {//(string, ContactManager)
	// empty the container that contains the results
	let container = document.querySelector("#" + idOfContainer);
	container.innerHTML = "";

	if (cm.displayOfContacts.length === 0) {
		container.innerHTML = "<p>No contacts to display!</p>";
		// stop the execution of this method
		return;
	}

	// counts rows created, assigns dataset.id to trashbin
	cm.dataCounter = 0;

	// creates and populate the table with users
	let table = document.createElement("table");
	createHeaderCellsAndAssignId(table);

	let tBody = table.createTBody();
	createRows(tBody, cm);

	// adds the table to the div
	container.appendChild(table);

	addTableListeners(cm);
}

//	-----------------------------------
// this function aside for ease of reading - it would ideally be "private"
function createRows(tBody, cm) {//(table, ContactManager) / both references

	// iterate on the array of users
	cm.displayOfContacts.forEach(function (c) {
		//c = Contact /(name, age, email, city, zip, country)

		// creates a row
		var row = tBody.insertRow();

		for (let prop in c) {
			row.insertCell().innerHTML = c[prop];
		}

		var trashBin = row.insertCell();
		trashBin.classList.add('trashIcon');

		//assign id - matches index in listOfContacts
		trashBin.dataset.id = cm.dataCounter;
		trashBin.addEventListener('click', deleteContact);

		//The list is 0-indexed. Counter increases after assigning it. 
		//Next contact will have the increased number. 
		cm.dataCounter++;
	});
}

//	-----------------------------------
function createHeaderCellsAndAssignId(table) {

	let tHead = table.createTHead();//create table header
	let head = tHead.insertRow();//insert row
	head.innerHTML = "<th>Name</th><th>Age</th><th>Email</th><th>City</th><th>Zip</th>"
		+ "<th>Country</th><th>Delete</th>";
	//(name, age, email, city, zip, country)
	//assign ids
	head.cells[0].id = 'nameCell';
	head.cells[1].id = 'ageCell';
	head.cells[2].id = 'emailCell';
	head.cells[3].id = 'cityCell';
	head.cells[4].id = 'zipCell';
	head.cells[5].id = 'countryCell';
	head.cells[6].id = 'delCell';
}

//=====================================
//====TABLE LISTENERS AND TABLE LISTENERS' FUNCTIONS
function addTableListeners(cm) {
	// let nameCell = document.querySelector('#nameCell');
	// nameCell.addEventListener('click', sortByNameListener(cm));

	let nameCell = document.querySelector('#nameCell');
	nameCell.addEventListener('click', sortByNameListener(cm));

	let ageCell = document.querySelector('#ageCell');
	ageCell.addEventListener('click', sortByAgeListener(cm));

	let emailCell = document.querySelector('#emailCell');
	emailCell.addEventListener('click', sortByEmailListener(cm));

	let cityCell = document.querySelector('#cityCell');
	cityCell.addEventListener('click', sortByCityListener(cm));

	let zipCell = document.querySelector('#zipCell');
	zipCell.addEventListener('click', sortByZipListener(cm));

	let countryCell = document.querySelector('#countryCell');
	countryCell.addEventListener('click', sortByCountryListener(cm));
}

//	-----------------------------------
function sortByNameListener(cm, propertyNameAsString) {
	return function test1(e) {
		cm.sortByName();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function sortByAgeListener(cm) {
	return function (e) {
		cm.sortByAge();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function sortByEmailListener(cm) {
	return function test1(e) {
		cm.sortByEmail();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function sortByCityListener(cm) {
	return function (e) {
		cm.sortByCity();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function sortByZipListener(cm) {
	return function (e) {
		cm.sortByZip();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function sortByCountryListener(cm) {
	return function (e) {
		cm.sortByCountry();
		displayContactsAsATable("contacts", cm);
	}
}

//	-----------------------------------
function deleteContact(evt) {

	let confirmation = confirm('Are you sure you want to delete this contact?');

	if (confirmation) {
		let id = parseInt(evt.target.dataset.id);

		//using display of contacts, because it is the one that matches the 
		// assigned dataset.id in createRows
		cm.displayOfContacts.splice(id, 1);
		cm.listOfContacts = cm.displayOfContacts.slice();
		cm.save();
		loadList();
	}
}

//	-----------------------------------
//unused at the moment
function deleteTableListeners(cm) {
	let nameCell = document.querySelector('#nameCell');
	nameCell.removeEventListener('click', sortByName(cm).test1);
}

//=====================================
//====LISTENERS
function addListeners(cm) {
	//passing cm as reference instead of accessing as global variable
	let searchInput = document.querySelector('#searchInput');
	//search-compare.js
	searchInput.addEventListener('input', compareValues(cm));

	let printListB = document.querySelector('#printList');
	printListB.addEventListener('click', printList);

	let addRandomContact = document.querySelector('#addRandomContact');
	addRandomContact.addEventListener('click', addTestDataL(cm));

	let formSubmit = document.querySelector('#inputForm');
	formSubmit.addEventListener('submit', formSubmitted);

	let emptyListB = document.querySelector('#emptyList');
	emptyListB.addEventListener('click', emptyList);

	let cmSaveB = document.querySelector('#cmSave');
	cmSaveB.addEventListener('click', cmSave);

	let loadListB = document.querySelector('#loadList');
	loadListB.addEventListener('click', loadList);
	/*** TABLE LISTENERS ADDED IN table-listeners.js ***/
}

//	-----------------------------------
function addTestDataL(cm) {
	return function () {
		cm.addTestData(1);
		displayFullListOfContacts("contacts", cm);
	}
}

//	-----------------------------------
function printList() {
	console.log('Print contacts to console: ', '\n', cm.listOfContacts);
}

//	-----------------------------------
function formSubmitted(e) {
	e.preventDefault();

	// Get the values from input fields
	let name = document.querySelector("#name");
	let email = document.querySelector("#email");
	let age = document.querySelector("#age");
	let city = document.querySelector("#city");
	let zip = document.querySelector("#zipCode");
	if (zip.value === "") zip.value = 00000;
	let country = document.querySelector("#country");

	let newContact = new Contact(name.value, age.value, email.value,
		city.value, zip.value, country.value);

	cm.add(newContact);
 
	// Empty the input fields
	name.value = "";
	email.value = "";
	age.value = "";
	city.value = "";
	zip.value = "";
	country.value = "";

	// refresh the html table
	displayFullListOfContacts("contacts", cm);

	// do not let browser submit the form using HTTP
	return false;
}

//	-----------------------------------
function emptyList() {
	cm.empty();
	displayFullListOfContacts("contacts", cm);
}

function cmSave () {
	cm.save();
}
//	-----------------------------------
function loadList() {
	cm.load();
	displayFullListOfContacts("contacts", cm);
}

//=====================================
//====UTILITIES
//  Map function. Will produce values out of range if input is out of range
//  https://gist.github.com/AugustMiller/85b54d49493bb71ba81e
Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
    return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
};

//  -------------------------
//  both ways work
function randNum(min, max) { 
    //  generate a random number
    //  not inclusive of max though
    return (Math.random() * (max - min)) + min;
}

//  -------------------------
function randNum2(min, max){
    //  another way to randomize, the map function would be needed for this one, unless I encapsulate it here
    return  ( Math.random() ) * ( max - min )  + min; // map embedded here
    // return Math.random().map(0, 1, min, max);
}

//  -------------------------
function capitalizeFirstLetter(string) {
	return string.charAt(0).toUpperCase() + string.slice(1);
}

//  -------------------------
//reverse string algorithm
function reverse(string) {
	//https://stackoverflow.com/questions/41582256/javascript-reverse-string-algorithm
	return string.split('').reverse().join('');
}

//  -------------------------
function getRandomFromArray2 (arr) {
	let randomIndex = Math.floor(Math.random()*arr.length);
	let randomElement = arr[randomIndex];
	return randomElement;
}

//  -------------------------
function getRandomFromArray (arr) {
	return arr[Math.floor(Math.random()*arr.length)]
}

//=====================================
//====RANDOM CONTACT DETAILS = rCD
let rCD = {}; //Random Contact Details
rCD.firstNames = ["Thao", "Caroll", "Julie", "Darcey", "Julene", "Evelin", "Deon", "Amiee", "Kristine", "Kaylene", "Elizebeth", "Gonzalo", "Romaine", "Ernest", "Ayako", "Kathe", "Kristle", "Trena", "Jeraldine", "Dolly", "Isidro", "Cleora", "Inell", "Amira", "Rossie", "Nakia", "Jerry", "Rodrigo", "Wai", "Brian", "Donnie", "Cyrus", "Janean", "Barb", "Sergio", "Darin", "Delfina", "Nyla", "Gema", "Audry", "Alexia", "Junko", "Chet", "Collette", "Nathanael", "Claud", "Dorian", "Silas", "Willene", "Vida", "Sophie", "Clarita", "Bryant", "Shaun", "Francesca", "Trey", "Ahmed", "Rachelle", "Javier", "Adelia", "Clemencia", "Mozelle", "George", "Tawana", "Cherly", "Shay", "Eryn", "Mellissa", "Gabrielle", "Gisela", "Huey", "Kyle", "Brittni", "Ai", "Jake", "Mignon", "Tana", "Emeline", "Walton", "Karla", "Geraldo", "Azzie", "Allen", "Tawny", "Elaina", "Dwain", "Forest", "Ula", "Alejandrina", "Despina", "Zina", "Delila", "Wei", "Raul", "Jeannie", "Lisette", "Donn", "Katrice"];

rCD.lastNames = ["Barnes", "Morrow", "Aguilar", "Holden", "Ramos", "Roth", "Harding", "Luna", "Thornton", "Mcintyre", "Atkinson", "Willis", "Sharp", "Leblanc", "Underwood", "Morales", "Warner", "Spears", "Gilliam", "Harris", "Good", "Stevenson", "Carver", "Woodard", "Olsen", "Ballard", "Irwin", "Lopez", "Valencia", "Pollard", "Padilla", "Carlson", "Velez", "Foreman", "Lloyd", "James", "Webster", "Mcleod", "Reeves", "Cole", "Joyce", "Gaines", "Barnes", "Knowles", "Hensley", "Hunter", "Rocha", "Mcbride", "Head", "Thompson", "Morris", "York", "Vance", "Reed", "Hall", "Rodriguez", "Herring", "Noble", "Stone", "Mcintosh", "Trujillo", "Carver", "Bridges", "Ortega", "Stevens", "Simpson", "Dalton", "Johnston", "Gilliam", "Joseph", "Boyd", "Greene", "Silva", "Barber", "Kent", "Frazier", "Mckee", "Salinas", "Rodriquez", "Fitzpatrick", "Clayton", "Randolph", "Warren", "Holland", "Green", "Garza", "Shaw", "William", "Drake", "Petersen", "Hill", "Merritt", "Mckenzie", "Wright", "Mcdaniel", "Mccarthy", "Potts", "Kline", "Ashley", "Walsh"];

rCD.countries = ["India", "Kenya", "Comoros", "Venezuela", "Cocos (Keeling) Islands", "Trinidad and Tobago", "St. Pierre and Miquelon", "Bhutan", "Andorra", "Libyan Arab Jamahiriya", "Nauru", "Sierra Leone", "Iceland", "Finland", "Guinea", "Georgia", "Tonga", "Iraq", "Montserrat", "Zambia", "Saudi Arabia", "Malaysia", "Tunisia", "Andorra", "Uganda", "Mali", "Palau", "Malta", "United States", "Christmas Island", "Northern Mariana Islands", "Brazil", "Italy", "Djibouti", "St. Pierre and Miquelon", "Cote d'Ivoire", "Korea, Republic of", "Virgin Islands (British)", "Netherlands Antilles", "Angola", "Japan", "Sweden", "Solomon Islands", "Kyrgyzstan", "Philippines", "Austria", "Mauritania", "Liberia", "Guinea-Bissau", "Bosnia and Herzegowina", "Swaziland", "Brazil", "Belgium", "Lesotho", "Portugal", "Mauritius", "Morocco", "St. Helena", "Cote d'Ivoire", "Cocos (Keeling) Islands", "Mauritania", "Mozambique", "Bosnia and Herzegowina", "Tuvalu", "Latvia", "Austria", "El Salvador", "Benin", "Gibraltar", "Burundi", "Niue", "St. Helena", "Falkland Islands (Malvinas)", "Martinique", "Pakistan", "Congo", "Solomon Islands", "Somalia", "Norway", "Ghana", "Kenya", "Haiti", "Guadeloupe", "Niue", "French Southern Territories", "Tanzania, United Republic of", "Denmark", "Cambodia", "Congo", "Mexico", "Romania", "Myanmar", "Macau", "India", "Tokelau", "Venezuela", "Turkmenistan", "Martinique", "Niger"];

rCD.zips = [65202, 35988, 83663, 83371, 40653, 30187, 93198, 19521, 13440, 80282, 85838, 80310, 45265, 19952, 87362, 13557, 91916, 49101, 50692, 39953, 64976, 43901, 16208, 82982, 50817, 29036, 55643, 32558, 39407, 81554, 14184, 91658, 71277, 70839, 17521, 82810, 51396, 85446, 46405, 27478, 59491, 19255, 32199, 43241, 94593, 79156, 24193, 45300, 10240, 53918, 69525, 99273, 56661, 94185, 69279, 79956, 52511, 70843, 26176, 49864, 31017, 17641, 80971, 66678, 59015, 12174, 79342, 62607, 41562, 84884, 95729, 57722, 28704, 14277, 56806, 62418, 40343, 84469, 57222, 66669, 80022, 47690, 64797, 13921, 16550, 84939, 10981, 19734, 66051, 97500, 85333, 23217, 52915, 62909];

rCD.cities = ["Ashville", "Millry", "Leighton", "Riverview", "Indian springs village", "Abbeville", "Slocomb", "Baileyton", "Coker", "Billingsley", "Ider", "Fulton", "Newville", "Orange beach", "Helena", "Oakman", "Pickensville", "Oak hill", "Brent", "Mobile", "Mcdonald chapel", "Evergreen", "Ridgeville", "Blue mountain", "Bessemer", "Geraldine", "Vestavia hills", "Linden", "Oxford", "Notasulga", "New brockton", "Sanford", "Daleville", "Union grove", "Hazel green", "Hokes bluff", "South vinemont", "Vredenburgh", "Lexington", "Uniontown", "Parrish", "Hoover", "Childersburg", "Sipsey", "Ashville", "Kennedy", "West jefferson", "Gainesville", "Dadeville", "Grayson valley", "Forkland", "Daphne", "Gaylesville", "Slocomb", "Snead", "Moundville", "Fulton", "Camden", "Woodland", "Flomaton", "Grand bay", "Phenix city", "Fairfield", "Mcmullen", "Centre", "Silverhill", "Cordova", "Summerdale", "Sheffield", "Kimberly", "Dozier", "Elba", "Childersburg", "Boligee", "York", "Mobile", "Sand rock", "Mcintosh", "Camp hill", "Union grove", "Carolina", "La fayette", "Elba", "Toxey", "Jackson", "New site", "Edgewater", "Hackleburg", "Spanish fort", "Smiths", "Oxford", "Bon air", "Alexander city", "Tarrant", "Elmore", "Margaret", "Steele", "Woodland", "Huguley", "Meridianville"];

<head>
    <title>A contact manager, v3</title>
    <meta charset="utf-8" />
</head>

<body>
    <div id="topDiv">
        <p>
            <a href='https://github.com/irvAng/contact-manager' target="_blank">See source code on GitHub
			</a>
        </p>
        <form id='inputForm' onsubmit="return formSubmitted();">
            <fieldset>
                <legend>Personal information</legend>
                <label>
					Name :  <br>
					<input type="text" id="name" required placeholder="First Last">
				</label>
                <label>
					Age : <br>
					<input type="number" min='0' max='120' id="age" required>
				</label>
                <label>
					Email : <br>
					<input type="email" id="email" required>
				</label>
                <label>
					City : <br>
					<input type="text" id="city">
				</label>
                <label>
					Zip Code : <br>
					<input type="number" min='0' max='99999' id="zipCode" placeholder='00000'>
				</label>
                <label>
					Country : <br>
					<input type="text" id="country">
				</label>
                <br>
                <button>Add new Contact</button>
                <button id='addRandomContact' type='button'>Add two random Contacts</button>
            </fieldset>
        </form>

        <br>
        <div id='searchDiv'>
            <label for="searchInput">Search contact by name:
				<input id='searchInput' type="text" placeholder="First Last">
			</label>
            <!-- Displays matches -->
            <input id='match-display' type='text' readonly placeholder="Displaying all contacts.">
            <button id='printList'> Print contacts to console</button>
        </div>

        <h2>List of contacts </h2>
        <p>To sort, click on the corresponding table header.</p>
        <!-- <h3>&#x25B2; &#x25BC; &#9650; &#9660;</h3> -->

        <p>
            <button onclick="emptyList();">Empty</button>
            <button onclick="cm.save();">Save</button>
            <button onclick="loadList();">Load</button>
        </p>

        <div id="contacts">
            <!-- TABLE GOES HERE -->
        </div>

    </div>
</body>