Lesson Wednesday

We've done most of the work on our address book, but let's practice prototype methods some more by adding a fullAddress method to the Address prototype that will, predictably, return all of an address object's three properties in a single string. It will work just like the fullName method we added to the Contact prototype.

Let's add this to the business logic section of our scripts:

js/scripts.js
Address.prototype.fullAddress = function() {
  return this.street + ", " + this.city + " " + this.state;
}

And now on the front-end we can replace address.street + ", " + address.city + " " + address.state with address.fullAddress().

This line:

$("ul#addresses").append("<li>" + address.street + ", " + address.city + " " + address.state + "</li>");

becomes:

$("ul#addresses").append("<li>" + address.fullAddress() + "</li>");

And it still works, so let's commit!

Completed GitHub addressBook repo with fullAddress method on Address prototype

These fullName() and fullAddress() methods may seem unnecessary in this case, but it's a really good idea to get in the habit of doing as much of the work as possible in the business logic so that the front-end logic can be as clear as possible and independent of the back-end as much as possible.

Sample code

js/scripts.js
//business logic
function Contact(first, last) {
  this.firstName = first;
  this.lastName = last;
  this.addresses = [];
}

function Address(street, city, state) {
  this.street = street;
  this.city = city;
  this.state = state;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

Address.prototype.fullAddress = function() {
  return this.street + ", " + this.city + ", " + this.state;
}

// user interface logic
$(document).ready(function() {

  $("#add-address").click(function() {
    $("#new-addresses").append('<div class="new-address">' +
                                 '<div class="form-group">' +
                                   '<label for="new-street">Street</label>' +
                                   '<input type="text" class="form-control new-street">' +
                                 '</div>' +
                                 '<div class="form-group">' +
                                   '<label for="new-city">City</label>' +
                                   '<input type="text" class="form-control new-city">' +
                                 '</div>' +
                                 '<div class="form-group">' +
                                   '<label for="new-state">State</label>' +
                                   '<input type="text" class="form-control new-state">' +
                                 '</div>' +
                               '</div>');
  });

  $("form#new-contact").submit(function(event) {
    event.preventDefault();

    var inputtedFirstName = $("input#new-first-name").val();
    var inputtedLastName = $("input#new-last-name").val();
    var newContact = new Contact(inputtedFirstName, inputtedLastName);

    $(".new-address").each(function() {
      var inputtedStreet = $(this).find("input.new-street").val();
      var inputtedCity = $(this).find("input.new-city").val();
      var inputtedState = $(this).find("input.new-state").val();
      var newAddress = new Address(inputtedStreet, inputtedCity, inputtedState)
      newContact.addresses.push(newAddress)
    });

    $("ul#contacts").append("<li><span class='contact'>" + newContact.fullName() + "</span></li>");

    $(".contact").last().click(function() {
      $("#show-contact").show();
      $("#show-contact h2").text(newContact.fullName());
      $(".first-name").text(newContact.firstName);
      $(".last-name").text(newContact.lastName);
      $("ul#addresses").text("");
      newContact.addresses.forEach(function(address) {
        $("ul#addresses").append("<li>" + address.fullAddress() + "</li>");
      });
    });

    $("input#new-first-name").val("");
    $("input#new-last-name").val("");
    $("input.new-street").val("");
    $("input.new-city").val("");
    $("input.new-state").val("");

  });
});