Kelly Tran

build/css/app.css

@@ -14,6 +14,8 @@ header h1 {
   font-size: 4em;
   font-weight: bolder;
   color: #052111;
+  /*newly added*/
+  font-family: 'Rubik Mono One';
 }
 
 .quotes li {

build/index.html

@@ -23,11 +23,11 @@ <h1>Ada Trader</h1>
       <li class="large-4 small-12 columns">
         <div class="quote">
           <div class="row">
-            <h3 class="symbol large-6 small-6 columns"><%- symbol %></h3>
+            <h3 class="symbol large-6 small-6 columns"><%- quote.symbol %></h3>
             <div class="large-6 small-6 columns">
-              <h4 class="price">$<%- price.toFixed(2) %></h4>
-              <button class="btn-sell tiny alert button">Buy</button>
-              <button class="btn-buy tiny success button">Sell</button>
+              <h4 class="price">$<%- quote.price.toFixed(2) %></h4>
+              <button class="btn-buy tiny alert button">Buy</button>
+              <button class="btn-sell tiny success button">Sell</button>
             </div>
           </div>
         </div>

src/app.js

@@ -1,5 +1,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
+
+import QuoteView from 'app/views/quote_view';
 import ApplicationView from 'app/views/application_view';
 
 const simulate = function(quote) {
@@ -17,14 +19,61 @@ const simulate = function(quote) {
   quote.trigger('change:price', change);
 };
 
+var quoteData = [
+  {
+    symbol: "HUMOR",
+    price: 88.50,
+    about: "Cristal's HumorUs capstone"
+  }, {
+    symbol: "CLOTH",
+    price: 81.70,
+    about: "Sophia's Cloth Sim capstone"
+  }, {
+    symbol: "HABIT",
+    price: 98.00,
+    about: "Val's Habitmon capstone"
+  }, {
+    symbol: "SUPER",
+    price: 83.10,
+    about: "Rowan's Super Hero Draft capstone"
+  }, {
+    symbol: "INGRD",
+    price: 79.40,
+    about: "Nicole's Ingredient Inspector capstone"
+  }, {
+    symbol: "MXTPE",
+    price: 109.20,
+    about: "Jess's Digital Mixtape capstone"
+  }, {
+    symbol: "CNTAR",
+    price: 90.70,
+    about: "Leah's Centaur capstone"
+  }, {
+    symbol: "EVCLR",
+    price: 101.90,
+    about: "Lisa's Evolution In Color capstone"
+  }, {
+    symbol: "FUZZY",
+    price: 88.60,
+    about: "Jade's Fuzz Therapy capstone"
+  },
+];
+
+
 $(document).ready(function() {
   var appView = new ApplicationView({
-    el: '#application'
+    el: '#application',
+    quoteData: quoteData
   });
 
   appView.render();
 
   setInterval(function() {
-    // Call simulate() on each quote in the ApplicationView
+    // Wave 3
+    var allQuotes = appView.cardList;
+    allQuotes.forEach(function(quote) {
+      console.log(quote);
+      simulate(quote);
+    });
   }, 1000);
 });

src/app/views/application_view.js

@@ -1,12 +1,47 @@
+import $ from 'jquery';
 import Backbone from 'backbone';
+import _ from 'underscore';
+
+import QuoteView from 'app/views/quote_view';
 
 const ApplicationView = Backbone.View.extend({
-  initialize: function() {
+  initialize: function(options) {
+    //Receive and store a list of quote data objects.
+    this.quoteData = options.quoteData;
+
+    //Compile the same Underscore template from Wave 1. This compiled template will replace the one used in `QuoteView` during Wave 1.
+    this.quoteTemplate = _.template($('#tmpl-quote-view').html());
+
+    //Create and store a list of *at least* two `QuoteView` instances. Each instance should be given:
+    //     * The data for a single quote.
+    //     * The compiled Underscore template from the above step.
+    this.cardList = [];
+    this.quoteData.forEach(function(quote) {
+      var card = new QuoteView({
+        quote: quote,
+        template: this.quoteTemplate
+      });
+
+      this.cardList.push(card);
+    }, this);
+
+    //Store the HTML unordered list element from `index.html` that will contain the list of rendered `quotes`.
+    this.listElement = this.$('.quotes');
   },
 
+  // * Have a `render` function that should:
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    // this.$el.html('<p>Hello World</p>');
 
+    // Make sure the list in the DOM is empty before we start appending items
+    this.listElement.empty();
+    //   * Render each `QuoteView` instance in the list created within `initialize`.
+    //   * Use the stored HTML unordered list element.
+    //   * Append to that element the jQuery object for each `QuoteView` instance we rendered.
+    this.cardList.forEach(function(card) {
+      card.render();
+      this.listElement.append(card.$el);
+    }, this);
     return this;
   }
 });

src/app/views/quote_view.js

@@ -0,0 +1,57 @@
+import Backbone from 'backbone';
+// import _ from 'underscore';
+
+// Have an initialize function that should:
+// Receive and store a JavaScript object with quote data (symbol and price). See Example Stocks for inspiration. (Symbol: HUMOR, Price: $88.50 - Cristal's HumorUs capstone)
+
+// Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html).
+
+// Have a render function that should:
+// Use the compiled template to render HTML for a single quote, using the quote data stored by initialize.
+
+var QuoteView = Backbone.View.extend({
+  initialize: function(options) {
+    // options = an element in a list of quotes
+    this.quote = options.quote;
+    this.template = options.template;
+    // Wave 3: set up an event listener
+    this.on('change:price', function priceCallback(change) {
+      this.quote.price += change;
+      this.render();
+    });
+  },
+
+  render: function() {
+    var html = this.template({quote: this.quote});
+    this.$el.html(html);
+    return this;
+  },
+
+  // The `QuoteView` class should:
+  //   * Have an `events` property that defines two handlers for the `click` event, one for each `button` in the quote template.
+  events: {
+    'click .btn-sell' : 'decreasePrice',
+    'click .btn-buy' : 'increasePrice',
+  },
+
+  //   * Have a function that runs when the `click` event happens on the buy button. This function should:
+  //     * Increase the stock's price by a fixed amount (say, $1.00).
+  //     * Re-render the view so that the new price is displayed to the user.
+
+  increasePrice: function(event) {
+    console.log("increasePrice called");
+    this.quote.price += 1;
+    this.render();
+  },
+
+  //   * Have a function that runs when the `click` event happens on the sell button. This function should:
+  //     * Decrease the stocks' price by a fixed amount (say, $1.00).
+  //     * Re-render the view so that the new price is displayed to the user.
+  decreasePrice: function(event) {
+    console.log("decreasePrice called");
+    this.quote.price -= 1;
+    this.render();
+  },
+});
+
+export default QuoteView;