Finished project

build/css/app.css

@@ -31,14 +31,15 @@ header {
   z-index: 10;
   position: fixed;
   width: 30%;
-  height: 30%;
+  height: 35%;
   top: 30%;
   left: 30%;
   background-color: #538ca3;
   text-align: center;
   border: 1em solid white;
   margin-left: 20%;
   border-radius: 20%;
+  display: none;
 }
 
 #contact-cards {

build/index.html

@@ -48,9 +48,9 @@ <h4><%- name %></h4>
     </script>
 
     <script type="text/template" id="tmpl-contact-details">
-      <h3><%- name %></h3>
-      <h4><%- email %></h4>
-      <h4><%- phone %></h4>
+      <h3 id="name"><%- name %></h3>
+      <h4 id="email"><%- email %></h4>
+      <h4 id="phone"><%- phone %></h4>
     </script>
 
     <!-- Entire JS project built by Webpack -->

src/app.js

@@ -1,9 +1,36 @@
 import Application from 'app/models/application';
 import ApplicationView from 'app/views/application_view';
+import $ from 'jquery';
+import Backbone from 'backbone';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+import RolodexView from 'app/views/rolodex_view';
 
-var application = new Application();
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+var contactData = [
+{
+  name: 'Matthew Pavilanis',
+  phone: '269-267-3664',
+  email: 'matthewpavilanis@gmail.com'
+}, {
+  name: 'Jessica Pavilanis',
+  phone: '574-261-0261',
+  email: 'jessrpav11@gmail.com'
+}, {
+  name: 'Diana Clark',
+  phone: '269-267-3740',
+  email: 'diana@dougclarkcreative.com'
+}
+];
+
+
+$(document).ready(function() {
+  var rolodex = new Rolodex(contactData);
+  var application = new RolodexView({
+    el: $('body'),
+    model: rolodex
+  });
+    application.render();
 });

src/app/collections/rolodex.js

@@ -1,10 +1,12 @@
 import Backbone from 'backbone';
+import Contact from 'app/models/contact';
 
 const Rolodex = Backbone.Collection.extend({
   // This Rolodex represents a collection of Contacts
   // and should include any methods or attributes
   // that are involved in working with more than one
   // Contact.
+  model: Contact
 });
 
 export default Rolodex;

src/app/models/contact.js

@@ -1,8 +1,26 @@
 import Backbone from 'backbone';
+import ContactView from 'app/views/contact_view';
+import Rolodex from 'app/collections/rolodex';
+import RolodexView from 'app/views/rolodex_view';
+import Application from 'app/models/application';
+import ApplicationView from 'app/views/application_view';
+import $ from 'jquery';
+import _ from 'underscore';
 
 const Contact = Backbone.Model.extend({
   // This model should have the attributes for
   // a single contact: name, phone number, and email.
+
+defaults: {
+    name: 'Name Here',
+    email: 'Email Here',
+    phone: 'Number Here'
+  },
+
+  initialize: function(options) {
+    console.log("new contact" + this.get("name"));
+  },
+
 });
 
 export default Contact;

src/app/views/application_view.js

@@ -1,13 +1,11 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import ContactView from 'app/views/contact_view';
+
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
-    this.render();
-  },
 
-  render: function() {
-    return this;
-  }
 });
 
 export default ApplicationView;

src/app/views/contact_view.js

@@ -1,6 +1,47 @@
 import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+import RolodexView from 'app/views/rolodex_view';
+import Contact from 'app/models/contact';
+import Application from 'app/models/application';
+import ApplicationView from 'app/views/application_view';
+import Rolodex from 'app/collections/rolodex';
+
 
 const ContactView = Backbone.View.extend({
+
+  initialize: function(options) {
+    this.contact = options.model;
+    this.template = options.template;
+    this.cardTemplate = _.template($('#tmpl-contact-details').html());
+  },
+
+  render: function() {
+    var html = this.template( this.model.toJSON());
+
+
+    this.$el.html(html);
+    this.delegateEvents();
+
+    return this;
+  },
+
+  events: {
+   'click .contact-card': 'showModal',
+  },
+
+  showModal: function(event) {
+    var html = this.cardTemplate({
+      name: this.contact.attributes.name,
+      email: this.contact.attributes.email,
+      phone: this.contact.attributes.phone
+    });
+
+    // event.stopPropagation();
+    $('#contact-details').show();
+    $('#contact-details').html(html);
+  }
 });
 
+
 export default ContactView;

src/app/views/rolodex_view.js

@@ -1,6 +1,130 @@
 import Backbone from 'backbone';
+import $ from 'jquery';
+import _ from 'underscore';
+import Rolodex from 'app/collections/rolodex';
+import Contact from 'app/models/contact';
+import ContactView from 'app/views/contact_view';
+
 
 const RolodexView = Backbone.View.extend({
+
+  initialize: function(options) {
+    // Store a the full list of contacts
+    this.modelList = [];
+
+    // Compile a template to be shared between the individual contacts
+    this.contactTemplate = _.template($('#tmpl-contact-card').html());
+
+    // Keep track of the <ul> element
+    this.listElement = this.$('#contact-cards');
+
+    // Create a ContactView for each task
+    this.rolodex = [];
+    this.model.forEach(function(contact) {
+      this.addContact(contact);
+    }, this);
+
+    // Keep track of our form input fields
+    this.input = {
+    name: this.$('.contact-form input[name="name"]'),
+    email: this.$('.contact-form input[name="email"]'),
+    phone: this.$('.contact-form input[name="phone"]')
+  };
+
+    this.listenTo(this.model, 'update', this.render);
+    this.listenTo(this.model, 'add', this.addContact);
+    // this.listenTo(this.model, "show", this.showModal);
+    // this.listenTo(this.model, "hide", this.hideModal);
+  },
+
+  render: function() {
+    // Make sure the list in the DOM is empty
+    // before we start appending items
+    this.listElement.empty();
+
+    // Loop through the data assigned to this view
+    this.rolodex.forEach(function(card) {
+      // Cause the task to render
+      card.render();
+
+      // Add that HTML to our contacts
+      this.listElement.append(card.$el);
+    }, this);
+
+    return this; // enable chained calls
+  },
+
+   events: {
+     'click .btn-cancel': 'clearInput',
+     'click .btn-save': 'createContact',
+     'click ': 'hideModal'
+   },
+
+ hideModal: function(event) {
+   console.log("getting here!");
+     if($(event.target).closest('.contact-card').length === 0) {
+       $('#contact-details').hide();
+     }
+ },
+
+
+  getInput: function() {
+    var contact = {
+      name: this.input.name.val(),
+      email: this.input.email.val(),
+      phone: this.input.phone.val()
+    };
+    return contact;
+  },
+
+  addContact: function(contact) {
+    var card = new ContactView({
+      model: contact,
+      template: this.contactTemplate
+    });
+
+    this.rolodex.push(card);
+  },
+
+  clearInput: function(event) {
+   this.input.name.val('');
+   this.input.email.val('');
+   this.input.phone.val('');
+  },
+  createContact: function(event) {
+   // Normally a form submission will refresh the page.
+   // Suppress that behavior.
+   event.preventDefault();
+
+   // Get the input data from the form and turn it into a contact
+   var contact = new Contact(this.getInput());
+
+   // add contact to the model but don't need to add to view.
+   this.model.add(contact);
+
+   // Clear the input form so the user can add another contact
+   this.clearInput();
+  }
 });
 
+
+// $(document).not('.contact-details').click(function () {
+//    $('.contact-details').hide();
+// });
+//
+// $(document).on('click', function(event) {
+//   if ($(event.target).has('.contact-details').length) {
+// 	$(".contact-details").hide();
+//   }
+// });
+
+// element.listenTo(button1, 'no-suggestions'), header.hide());
+//
+// hide: function(){
+//   this.$el.hide();
+// }
+
+
+
+
 export default RolodexView;