Ada-C7 · janicewilson · May 30, 2017 · Jun 1, 2017 · Jun 1, 2017 · Jun 2, 2017
diff --git a/build/css/app.css b/build/css/app.css
@@ -3,57 +3,88 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6, p, label {
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+h1 {
+     margin-top: 1.4rem;
+     font-size: 1.4rem;
+     font-weight: bold;
+     text-transform: uppercase;
+}
+
+h3 {
+     margin-top: 1.4rem;
+     font-size: 1.2rem;
+     font-weight: light;
+     text-transform: uppercase;
+}
+
+h4 {
+     font-size: 1rem;
+     font-weight: light;
+     text-transform: uppercase;
+}
+
+ul {
+     list-style-type: none;
 }
 
 header {
   text-align: center;
+  background-color: rgba(0, 0, 0, 0.35);
   width: 30%;
   position: fixed;
-  background-image: url("/imgs/sparks.jpeg");
+  /*background-image: url("/imgs/sparks.jpeg");*/
   background-size: cover;
   background-position: center;
   height: 100%;
   z-index: 5;
   color: rgb(211, 231, 231);
+
 }
 
 .contact-form {
-  background-color: rgba(0, 0, 0, 0.35);
+  /*background-color: rgba(0, 0, 0, 0.35);*/
 }
 
 .contact-form label {
-  color: white;
-  font-size: 1.5rem;
+     margin-top: 1.4rem;
+     text-align: left;
+     color: white;
+     font-size: 1rem;
 }
 
 #contact-details {
-  z-index: 10;
-  position: fixed;
-  width: 30%;
-  height: 30%;
-  top: 30%;
-  left: 30%;
-  background-color: #538ca3;
-  text-align: center;
-  border: 1em solid white;
-  margin-left: 20%;
-  border-radius: 20%;
+     z-index: 10;
+     position: fixed;
+     width: 30%;
+     height: 30%;
+     top: 30%;
+     left: 30%;
+     background-color: #538ca3;
+     text-align: center;
+     border: .04em solid white;
+     margin-left: 20%;
+}
+
+#contact-details.hidden {
+     visibility: hidden;
 }
 
 #contact-cards {
-  width: 70%;
-  margin: 0 auto;
-  float: right;
-  text-align: center;
+     width: 70%;
+     margin: 0 auto;
+     float: right;
+     text-align: center;
 }
 
 .contact-card {
   display: inline-block;
   padding: 2%;
   margin: 2%;
   background-color: #fff;
-  border-radius: 2%;
+  border: .1em solid #538ca3;
 }
 
 .contact-card:hover {

diff --git a/build/css/foundation.css b/build/css/foundation.css
@@ -1479,12 +1479,12 @@ kbd {
   padding: 0.85em 1em;
   margin: 0 0 1rem 0;
   font-size: 0.9rem;
-  background-color: #2199e8;
+  background-color: #538ca3;
   color: #fefefe; }
   [data-whatinput='mouse'] .button {
     outline: 0; }
   .button:hover, .button:focus {
-    background-color: #1583cc;
+    background-color: #70a5bb;
     color: #fefefe; }
   .button.tiny {
     font-size: 0.6rem; }

diff --git a/build/index.html b/build/index.html
@@ -1,59 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Rolodex</title>
-    <meta charset="utf-8">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css/foundation.css">
-    <link rel="stylesheet" href="css/app.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
-  </head>
-  <body>
-    <div id="application">
-      <header>
-        <h1>Rolodex</h1>
-        <section class="row contact-form">
-          <h3>Add A New Contact</h3>
-          <div class="columns">
-            <label>
-              Name
-              <input type="text" name="name">
-            </label>
-            <label>
-              Email
-              <input type="text" name="email">
-            </label>
-            <label>
-              Phone
-              <input type="text" name="phone">
-            </label>
-            <h3 class="button btn-save">Save</h3>
-            <h3 class="button btn-cancel">Cancel</h3>
+     <head>
+          <title>Yolodex</title>
+          <meta charset='utf-8'>
+          <meta http-equiv='x-ua-compatible' content='ie=edge'>
+          <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+          <link rel='stylesheet' href='css/foundation.css'>
+          <link rel='stylesheet' href='css/app.css'>
+          <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:bold,regular,light'>
+     </head>
+
+     <body>
+          <div id='application'>
+
+               <header>
+                    <h1>Yolodex</h1>
+                    <section class='row contact-form'>
+                         <h3>Add A New Contact</h3>
+                         <div class='columns'>
+                              <label>
+                                   Name
+                                   <input type='text' name='name' id='name' class='form-field'>
+                              </label>
+                              <label>
+                                   Email
+                                   <input type='text' name='email' id='email'class='form-field'>
+                              </label>
+                              <label>
+                                   Phone
+                                   <input type='text' name='phone' id='phone' class='form-field'>
+                              </label>
+                              <h3 class='button btn-save'> Save </h3>
+                              <h3 class='button btn-cancel' id='cancelContact'> Cancel </h3>
+                         </div>
+                    </section>
+               </header>
+
+               <main>
+                    <ul id='contact-cards' class='row align-center'></ul>
+                    <section id='contact-details' class = 'hidden'></section>
+               </main>
+
           </div>
-        </section>
-      </header>
-
-      <main>
-        <ul id="contact-cards" class="row align-center"></ul>
-        <section id="contact-details"></section>
-      </main>
-    </div>
-
-    <!-- Underscore Templates -->
-    <script type="text/template" id="tmpl-contact-card">
-      <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
-        <h4><%- name %></h4>
-      </li>
-    </script>
-
-    <script type="text/template" id="tmpl-contact-details">
-      <h3><%- name %></h3>
-      <h4><%- email %></h4>
-      <h4><%- phone %></h4>
-    </script>
-
-    <!-- Entire JS project built by Webpack -->
-    <script src="/app.bundle.js" charset="utf-8"></script>
-  </body>
+
+          <!-- Underscore Templates -->
+
+          <script type='text/template' id='tmpl-contact-card'>
+               <li class='contact-card small-11 medium-4 large-2 medium-offset-1 columns'>
+                    <h4><%- name %></h4>
+               </li>
+          </script>
+
+          <script type='text/template' id='tmpl-contact-details'>
+               <h3><%- name %></h3>
+               <h4><%- email %></h4>
+               <h4><%- phone %></h4>
+          </script>
+
+          <!-- Entire JS project built by Webpack -->
+          <script src='/app.bundle.js' charset='utf-8'></script>
+     </body>
 </html>
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "dependencies": {
-    "babel-polyfill": "^6.16.0"
+    "babel-polyfill": "^6.16.0",
+    "backbone.modal": "^1.1.6"
   }
 }
diff --git a/src/app.js b/src/app.js
@@ -1 +1,33 @@
 import $ from 'jquery';
+import _ from 'underscore';
+import Yolodex from './app/collections/yolodex.js'
+import YolodexView from './app/views/yolodex_view.js'
+
+var contactData = [
+     {
+          name: 'Princess Leia',
+          email: 'princess@therebellion.com',
+          phone: '+3 (333) 333-3333'
+     }, {
+          name: 'Darth Vadar',
+          email: 'darth@theempire.com',
+          phone: '+1 (111) 111-1111'
+     }, {
+          name: 'Han Solo',
+          email: 'han@themilleniumfalcon.com',
+          phone: '7+ (777) 777-7777'
+     }
+];
+
+var firstYolodex = new Yolodex(contactData);
+
+$( document ).ready( function() {
+
+     var firstYolodexView = new YolodexView({
+          model: firstYolodex,
+          template: _.template($('#tmpl-contact-card').html()),
+          el: '#application'
+     });
+
+     firstYolodexView.render();
+});
diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
diff --git a/src/app/collections/yolodex.js b/src/app/collections/yolodex.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Contact from '../models/contact';
+
+const Yolodex = Backbone.Collection.extend({
+     const: Contact
+});
+
+export default Yolodex;
diff --git a/src/app/models/contact.js b/src/app/models/contact.js
@@ -1,8 +1,11 @@
 import Backbone from 'backbone';
 
 const Contact = Backbone.Model.extend({
-  // This model should have the attributes for
-  // a single contact: name, phone number, and email.
+     defaults: {
+       name: '',
+       email: '',
+       phone: ''
+     }
 });
 
 export default Contact;
diff --git a/src/app/views/contact_view.js b/src/app/views/contact_view.js
@@ -1,6 +1,32 @@
 import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+import Contact from '../models/contact.js';
 
 const ContactView = Backbone.View.extend({
+     initialize: function( params ) {
+     this.template = params.template;
+     this.listenTo( this.model, 'change', this.render );
+     this.$el.addClass( 'row align-center' )
+},
+render: function() {
+     var renderedTemplate = this.template(this.model.toJSON());
+     this.$el.html( renderedTemplate );
+     return this;
+},
+renderExpanded: function() {
+     var renderedTemplateExpanded = $('#tmpl-contact-details').html();
+     var templateObject = _.template(renderedTemplateExpanded);
+     var compiledHTML = templateObject(this.model.toJSON());
+     $('#contact-details').html(compiledHTML);
+},
+events: {
+     'click .contact-card': 'expandContact',
+},
+expandContact: function( event ) {
+     $( '#contact-details' ).toggleClass( 'hidden' );
+     this.renderExpanded();
+}
 });
 
 export default ContactView;