Cacher is the code snippet organizer for pro developers

h1{
  text-align: center;
}
table {
  margin: 20px;
  border: 1px solid;
}
table tr td {
  padding : 10px;
  border: 1px solid;
}
div#form {
  border: 1px solid;
  border-radius: 15px;
  width: 49%;
  height: 400px;
  float: left;
}
div#table {
  border: 1px solid;
  border-radius: 15px;
  width: 49%;
  height: 400px;
  float: right;
}
div#section1{
  float: left;
}
div#section2{
  float: right;
}
button{
  margin: 10px;
  padding: 7px;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
div#btns {
  display: block;
  text-align: center;
}
button#btnDelete{
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #B71C1C;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;  
}
button#btnDelete:hover{
  background-color: #B71C1C;
  color: #FFFFFF;
  border: 2px solid #B71C1C;
}
button#btnSave{
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #00E676;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;  
}
button#btnSave:hover{
  background-color: #00E676;
  color: #FFFFFF;
  border: 2px solid #00E676;
}
button#btnLoad{
  background-color: #FFFFFF;
  color: #000000;
  border: 2px solid #1E88E5;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;  
}
button#btnLoad:hover{
  background-color: #1E88E5;
  color: #FFFFFF;
  border: 2px solid #1E88E5;
}
button#addC {
  background-color: #009688;
  color: #FFFFFF;
  transition: all 0.5s; 
}
button#addC span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
button#addC span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
button#addC:hover span {
  padding-right: 25px;
}
button#addC:hover span:after {
  opacity: 1;
  right: 0;
}
label{
  display: inline-block;
  margin: 5px 25px 5px 5px;
}
fieldset{
  margin: 20px;
  border-radius: 5px;
}
input{
  width:150px;
  float: right;
  border-radius: 4px;
}
input:invalid{
  border: 1px solid #EF9A9A;
}
input:valid{
  border: 1px solid #69F0AE;
}

let cm;
window.onload = init;
function init(){
  cm = new ContactManager();
  cm.testData();
  cm.displayAllContactsAsTable('contacts');
}
function formSubmitted(){
  let firstName = document.querySelector('#firstName');
  let lastName = document.querySelector('#lastName');
  let age = document.querySelector('#age');
  let email = document.querySelector('#email');
  let newContact = new Contact(firstName.value, lastName.value, email.value, age.value);
  cm.addContact(newContact);
  cm.displayAllContactsAsTable('contacts');
  firstName.value = '';
  lastName.value = '';
  age.value = '';
  email.value = ''; 
  return false;
}
function deleteContacts(){
  cm.deleteAllContacts();
  cm.displayAllContactsAsTable('contacts');
}
function saveContacts(){
  cm.saveContacts();
  cm.displayAllContactsAsTable('contacts');
}
function loadContacts(){
  cm.loadAllContacts();
  cm.displayAllContactsAsTable('contacts');
}
function removeContact(contactMail){
    for(let i=0; i<cm.listOfContacts.length; i++){
      if(contactMail == cm.listOfContacts[i].email){
        cm.listOfContacts.splice(i, 1);
        cm.displayAllContactsAsTable('contacts');
        break;
      }
    }
}
class Contact{
  constructor(firstName, lastName, email, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
    this.age = age;
  }
}
class ContactManager{
  constructor(){
    this.listOfContacts = [];
  }
  addContact(newContact){
    this.listOfContacts.push(newContact);
  }
  sortContacts(){
    this.listOfContacts.sort(ContactManager.compareContacts);
  }
  static compareContacts(c1, c2){
    if(c1.name < c2.name){
      return -1;
    } else if (c1.name > c2.name){
      return 1;
    } else {
      return 0;
    }
  }
  saveContacts(){
    localStorage.contacts = JSON.stringify(this.listOfContacts);
  }
  deleteAllContacts(){
    this.listOfContacts = [];
  }
  loadAllContacts(){
    if(localStorage.contacts !== undefined){
      this.listOfContacts = JSON.parse(localStorage.contacts);
    }
  }
  testData(){
    let c1 = new Contact("Eleonore", "Mcquaid", "EleonoreMcquaid@gmail.com", 25);
    let c2 = new Contact("Carroll", "Quintal", "CarrollQuintal@gmail.com", 26);
    let c3 = new Contact("Alyssa", "Felch", "AlyssaFelch@gmail.com", 24);
    this.addContact(c1);
    this.addContact(c2);
    this.addContact(c3);
    this.sortContacts();
  }
  displayAllContactsAsTable(containerID){
    let container = document.querySelector('#'+containerID);
    container.innerHTML ='';
    if(this.listOfContacts.length === 0){
      container.innerHTML = '<p>The List of Contact is empty..</p>';
    }
    
    let table = document.createElement('table');
    this.listOfContacts.forEach(function(contact, index, listContacts){
      let row = table.insertRow();
      row.innerHTML = '<tr><td>'+contact.firstName+'</td>'+
                      '<td>'+contact.lastName+'</td>'+
                      '<td>'+contact.email+'</td>'+
                      '<td>'+contact.age+'</td>'+'<td><button id="'+index+'"><i class="fa fa-trash"> Delete</i></button></td></tr>';
    });
    container.appendChild(table);
    for(let i=0; i<this.listOfContacts.length; i++){
      let btn = document.querySelector('#'+i);
      btn.onclick=removeContact(this.listOfContacts[i].email);
    }
  }
  
}

<html lang="en">
  <head>
    <title>Contact Manager</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div id="form">
      <h1>Add New Contact</h1>
      <form onsubmit="return formSubmitted();">
        <fieldset>
          <legend>Personal Informations</legend>
          <div id="section1">
            <label for="firstName">FirstName: </label>
            <input type="text" name="firstName" id="firstName" required>
            <br>
            <label for="age">Age: </label>
          <input type="number" name="age" id="age" required>
          </div>
          <div id="section2">
            <label for="lastName">LastName: </label>
            <input type="text" name="lastName" id="lastName" required>
            <br>
            <label for="email">Email Address: </label>
            <input type="email" name="email" id="email" required>
          </div>
          <button id="addC"><span>Add Contact</span></button>
        </fieldset>
      </form>
    </div>
    <div id="table">
      <h1>List of all Contacts</h1>
      <div id="contacts"></div>
      <div id="btns">
       <button id="btnDelete" onclick="deleteContacts();">Delete Contacts</button> 
      <button id="btnSave" onclick="saveContacts();">Save Locally</button> 
      <button id="btnLoad" onclick="loadContacts();">Load</button>
      </div>

    </div>    
  </body>
</html>