Cacher is the code snippet organizer for pro developers

table {
  margin-top: 20px;
}
table, tr, td {
  border: 1px solid;
} 

fieldset {
  padding:10px;
  border-radius:10px;
}

label {
  display:inline-block;
  margin-bottom:10px;
}

input {
  float:right;
  margin-right:70px;
  width:150px;
}

input:invalid {
  background-color:pink;
}

input:valid {
  background-color:lightgreen;
}

"use strict";
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();
  	cm.printContactsToConsole();

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

function formSubmitted() {
	// Get the values from input fields
	let name = document.querySelector("#name");
 	let email = document.querySelector("#email");
  let city = document.querySelector("#city");
  let country = document.querySelector("#country");
	let newContact = new Contact(name.value, email.value, city.value, country.value);
	cm.add(newContact);
	
	// Empty the input fields
	name.value = "";
	email.value = "";
	city.value="";
  country.value="";
	// refresh the html table
	cm.displayContactsAsATable("contacts");
	
	// do not let your browser submit the form using HTTP
	return false;
}

function emptyList() {
	cm.empty();
 	cm.displayContactsAsATable("contacts");
}

function loadList() {
	cm.load();
  	cm.displayContactsAsATable("contacts");
}

function removeRowContact(contactIndex){
	cm.removeAtIndex(contactIndex);
	cm.displayContactsAsATable("contacts");
}

class Contact {
	constructor(name, email, city, country) {
		this.name = name;
		this.email = email;
    this.city = city;
    this.country = country;
	}
}

class ContactManager {
	constructor() {
		// when we build the contact manager, it
		// has an empty list of contacts
		this.listOfContacts = [];
	}
	
	addTestData() {
		  var c1 = new Contact("Jimi Hendrix", "jimi@rip.com","Steele","Tokelau");
  		var c2 = new Contact("Robert Fripp", "robert.fripp@kingcrimson.com","Woodland","Turkmenistan");
  		var c3 = new Contact("Angus Young", "angus@acdc.com","Huguley","Martinique");
  		var c4 = new Contact("Arnold Schwarzenneger", "T2@terminator.com","Meridianville","Niger");
		
		this.add(c1);
		this.add(c2);
		this.add(c3);
		this.add(c4);
		
		// Let's sort the list of contacts by Name
		this.sort();
	}
	
	// Will erase all contacts
	empty() {
		this.listOfContacts = [];
	}
	
	add(contact) {
		this.listOfContacts.push(contact);
	}
	
	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;
			}
		}
	}
	
  // remove contact given index
	removeAtIndex(contactIndex) {
		this.listOfContacts.splice(contactIndex, 1);
	}
  
	sort() {
		// As our array contains objects, we need to pass as argument
		// a method that can compare two contacts.
		// we use for that a class method, similar to the distance(p1, p2)
		// method we saw in the ES6 Point class in module 4
		// We always call such methods using the name of the class followed
		// by the dot operator
		this.listOfContacts.sort(ContactManager.compareByName);
	}
	
	// class method for comparing two contacts by name
	static compareByName(c1, c2) {
		// JavaScript has builtin capabilities for comparing strings
		// in alphabetical order
		if (c1.name < c2.name)
     		return -1;
		
    	if (c1.name > c2.name)
     		return 1;
  
    	return 0;
	}
	
	printContactsToConsole() {
		this.listOfContacts.forEach(function(c) {
			console.log(c.name);
		});
	}
	
	load() {
		if(localStorage.contacts !== undefined) {
			// the array of contacts is savec in JSON, let's convert
			// it back to a reak JavaScript object.
			this.listOfContacts = JSON.parse(localStorage.contacts);
		}
	}
	
	save() {
		// We can only save strings in local Storage. So, let's convert
		// ou array of contacts to JSON
		localStorage.contacts = JSON.stringify(this.listOfContacts);
	} 
	
  	displayContactsAsATable(idOfContainer) {
		// empty the container that contains the results
    	let container = document.querySelector("#" + idOfContainer);
    	container.innerHTML = "";

		
		if(this.listOfContacts.length === 0) {
			container.innerHTML = "<p>No contacts to display!</p>";
			// stop the execution of this method
			return;
		}  
  
      
        
      
    	// creates and populate the table with users
    	var table = document.createElement("table");
        var th = table.createTHead();  
      	var thRow = th.insertRow();    
      	thRow.innerHTML = "<td>Name</td><td>Email</td><td>City</td><td>Country</td><td></td>";  

      	// create table body
      	var tBody = document.createElement ("tbody");
      	table.appendChild (tBody);

        var count = 0; // variable to store the row index
    	// iterate on the array of users
      
          
    	// iterate on the array of users
    	this.listOfContacts.forEach(function(currentContact) {
       
		      
        
        	// creates a row
        	var row = tBody.insertRow();
        	row.id = "row" + count;
        	var tData = row.insertCell();
        	tData.innerHTML = currentContact.name;
        	tData = row.insertCell();
        	tData.innerHTML = currentContact.email;
          tData = row.insertCell();
        	tData.innerHTML = currentContact.city;
          tData = row.insertCell();
        	tData.innerHTML = currentContact.country;
        
             
        
        	let trashbin = document.createElement("img");
			trashbin.src =  "http://i.imgur.com/yHyDPio.png";
			trashbin.dataset.contactId = count;

			//var _this = this;

			if(trashbin.addEventListener) {
				trashbin.addEventListener("click", function(){
					var image = this;
					removeRowContact(image.dataset.contactId);
				});
			}

			tData = row.insertCell();
			tData.appendChild(trashbin);

			count++;
      

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

<html lang="en">
<head>
<title>A contact manager, v4</title>
  <meta charset="utf-8"/>
</head>
<body> 
	<form onsubmit="return formSubmitted();">
	 <fieldset>
    <legend>Personal informations</legend>
		<label>
			Name : 
			<input type="text" id="name" required>
		</label>
		<label>
			Email : 
			<input type="email" id="email" required>
		</label>
      <label>
					City :
					<input type="text" id="city">
				</label>
      <label>
					Country :
					<input type="text" id="country">
				</label>
     
		<br>
		<button>Add new Contact</button>
		 </fieldset>
	</form>
	
  <h2>List of contacts</h2> 
  <div id="contacts"></div>
	<p><button onclick="emptyList();">Empty</button> 
	 <button onclick="cm.save();">Save</button> 
   <button onclick="loadList();">Load</button>
	</p>

</body>
</html>