Contact Database

In this example below you will see how to do a Contact Database with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rcmeisty, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rcmeisty ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <h2>Create New Contact</h2>
<h5>First Name</h5>
<input id="firstNameSubmit"></input>
<h5>Last Name</h5>
<input id="lastNameSubmit"></input>
<h5>Phone</h5>
<input id="phoneSubmit"></input>
<br>
<br>
<button class="btn btn-primary" id="submitContact">Submit new Contact</button>
<h2>Current Contacts</h2>
<table>
  <tbody id="contactTable">
    
  </tbody>
</table>



<script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script>



/*Downloaded from https://www.codeseek.co/rcmeisty/contact-database-MGrZwa */
    


/*Downloaded from https://www.codeseek.co/rcmeisty/contact-database-MGrZwa */
      // Initialize Firebase
var config = {
    apiKey: "AIzaSyAFNEYo5naBOVqkVx4wUfHH9tqhSL-ajN8",
    authDomain: "contacts-database-7465d.firebaseapp.com",
    databaseURL: "https://contacts-database-7465d.firebaseio.com",
    projectId: "contacts-database-7465d",
    storageBucket: "",
    messagingSenderId: "707412680691"
  };
  firebase.initializeApp(config);

var contactRef = firebase.database().ref();

contactRef.on("value", getContacts);

var contacts;
var toWriteContacts;
var fName;
var lName;
var phone;
var writeDropdown = "<option>Select the person to update contact</option>"
function populateDropdown(){
  var y;
  for(y=0;y<contacts.length;y++){
    writeDropdown = writeDropdown + "<option value='"+contacts[y].firstName+"_"+contacts[y].lastName+"'>"+contacts[y].firstName+" "+contacts[y].lastName+"</option>";
  }
  $("#updateDropdown").html(writeDropdown);
  console.log(writeDropdown);
}
function getContacts(results){
  contacts = results.val();
  console.log(contacts);
  populateDropdown();
}

var fNameToSubmit;
var lNameToSubmit;
var phoneToSubmit;

function writeContacts(){
  var i;
  for(i=0;i<contacts.length;i++){
    fName = contacts[i].firstName;
    lName = contacts[i].lastName;
    phone = contacts[i].phone;
    toWriteContacts = toWriteContacts + "<tr><td>"+fName+"</td><td>"+lName+"</td><td>"+phone+"</td></tr>";
  }
  $("#contactTable").html(toWriteContacts);
}

function createNewContact() {
  fNameToSubmit = $("#firstNameSubmit").val();
  lNameToSumit = $("#lastNameSubmit").val();
  phoneToSubmit = $("#phoneSubmit").val();
  var connectionItem = contacts.length;
  firebase.database().ref('/'+connectionItem).set({
    firstName: fNameToSubmit,
    lastName: lNameToSumit,
    phone: phoneToSubmit
  });
  console.log("logged!");
}


$("#submitContact").click(function(){
  createNewContact();
  $("#contactTable").html("<tr></tr>")
  writeContacts();
  populateDropdown();
})
$("#updateForm").hide();
$("#updateMessage").hide();

var updateSelection;
var updateSelectionWrite;
var updateSelectionPerson;
var updateIndex;
var personProcess;
function findIndexOfUpdate(){
  updateSelectionPerson = $("#updateDropdown").val();
  console.log(updateSelectionPerson+"updateSelectionPerson");
  var a;
  for(a=0;a<contacts.length;a++){
    personProcess = contacts[a].firstName + " " + contacts[a].lastName;
    if(updateSelectionPerson==personProcess){
      updateIndex = a;
      return updateIndex;
      break;
    }
  }
}
$("#updateSelect").change(function(){
  updateSelection = $("#updateSelect").val();
  $("#insertUpdateChoice").html(updateSelection);
})

$("#updateDropdown").change(function(){
  updateSelection = $("#updateSelect").val();
  $("#updateForm").show();
  $("#updateMessage").show();
  $("#insertUpdateChoice").html(updateSelection);
})
var updatedData;
function updateSelectionProcess(){
  if(updateSelection=="First Name"){
    updatedData=$("#updateInput").val();
    firebase.database().ref('/'+updateIndex).update({
    firstName: updatedData
  });
  }else if(updateSelection=="Last Name"){
    updatedData=$("#updateInput").val();
    firebase.database().ref('/'+updateIndex).update({
    lastName: updatedData});
  }else if(updateSelection=="Phone"){
    updatedData=$("#updateInput").val();
    firebase.database().ref('/'+updateIndex).update({
    lastName: updatedData});
  }
}
function updateWrite(){
  findIndexOfUpdate();
  updateSelectionProcess();
}
$("#updateContactButton").click(function(){
  updateWrite();
})

$("#updateContactButton").click(function(){
  updateWrite();
})


Comments