Lesson Monday

Our address book application is almost complete! Let's add a few finishing touches: In this lesson we'll write an Address prototype method called fullAddress() that will return all properties of an Address object as a single string. It will work just like the fullName() method we added to the Contact prototype in previous lessons.

First, we'll add the prototype itself to the business logic section of our scripts:

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

Then, 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!

These fullName() and fullAddress() methods may seem unnecessary, but doing as much work as possible in the business logic is a great habit. This keeps your front-end logic as clear as possible. You may be tired of hearing it, but remember: Always keep your business and user interface logic well separated!


Completed GitHub addressBook Repo with fullAddress Method on Address Prototype

Example


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("");

  });
});