From b9894acea4cf7a4a97334ea192e78e41b6be1c1a Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 11 Dec 2017 17:39:13 -0800
Subject: [PATCH 01/13] Added trade model file and some import dependencies

---
 src/app.js          | 5 +++++
 src/models/trade.js | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/models/trade.js

diff --git a/src/app.js b/src/app.js
index 03ec910..7629a23 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2,9 +2,11 @@ import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
 import $ from 'jquery';
+import _ from 'underscore';
 
 import Simulator from 'models/simulator';
 import QuoteList from 'collections/quote_list';
+import Trade from 'models/trade';
 
 const quoteData = [
   {
@@ -26,6 +28,9 @@ const quoteData = [
 ];
 
 $(document).ready(function() {
+  quoteTemplate = _.template($('#quote-template').html());
+  tradeTemplate = _.template($('#trade-template').html());
+
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
     quotes: quotes,
diff --git a/src/models/trade.js b/src/models/trade.js
new file mode 100644
index 0000000..8b60b1b
--- /dev/null
+++ b/src/models/trade.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Trade = Backbone.Model.extend({
+
+});
+
+export default Trade;

From d4c4c43880dd8a97afd77849c97173f975fd15ac Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Wed, 13 Dec 2017 10:48:38 -0800
Subject: [PATCH 02/13] Added views for quote and quote list

---
 src/app.js                   | 30 ++++++++++++++++++++++++++----
 src/views/quote_list_view.js | 28 ++++++++++++++++++++++++++++
 src/views/quote_view.js      | 19 +++++++++++++++++++
 3 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/views/quote_list_view.js
 create mode 100644 src/views/quote_view.js

diff --git a/src/app.js b/src/app.js
index 7629a23..725ff3e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,12 +1,20 @@
+// CSS
 import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
+// Modules
 import $ from 'jquery';
 import _ from 'underscore';
 
-import Simulator from 'models/simulator';
-import QuoteList from 'collections/quote_list';
-import Trade from 'models/trade';
+// Imports
+import Simulator from './models/simulator';
+import QuoteList from './collections/quote_list';
+// import Trade from './models/trade';
+
+import QuoteView from './views/quote_view';
+import QuoteListView from './views/quote_list_view';
+
+// -------------------------------------------------------
 
 const quoteData = [
   {
@@ -27,9 +35,15 @@ const quoteData = [
   },
 ];
 
+// Define some variables
+let quoteTemplate;
+
+// -------------------------------------------------------
+
+// jQuery Ready
 $(document).ready(function() {
   quoteTemplate = _.template($('#quote-template').html());
-  tradeTemplate = _.template($('#trade-template').html());
+  // tradeTemplate = _.template($('#trade-template').html());
 
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
@@ -37,4 +51,12 @@ $(document).ready(function() {
   });
 
   simulator.start();
+
+  const quoteListView = new QuoteListView({
+    el: 'main',
+    model: quotes,
+    template: quoteTemplate,
+  });
+
+  quoteListView.render();
 });
diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js
new file mode 100644
index 0000000..eb6af6e
--- /dev/null
+++ b/src/views/quote_list_view.js
@@ -0,0 +1,28 @@
+import Backbone from 'backbone';
+import QuoteView from './quote_view';
+import Quote from '../models/quote';
+
+const QuoteListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render() {
+    this.$('#quotes').empty();
+
+    this.model.each((quote) => {
+      const quoteView = new QuoteView({
+        model: quote,
+        template: this.template,
+        tagName: 'li',
+        className: 'quote',
+      });
+      this.$('#quotes').append(quoteView.render().$el);
+    });
+
+    return this;
+  },
+});
+
+export default QuoteListView;
diff --git a/src/views/quote_view.js b/src/views/quote_view.js
new file mode 100644
index 0000000..b3da4c6
--- /dev/null
+++ b/src/views/quote_view.js
@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+
+const QuoteView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'change', this.render);
+  },
+
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+  
+});
+
+export default QuoteView;

From c78b267c56617d2af2862f4807795e610737bfa2 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Wed, 13 Dec 2017 11:03:15 -0800
Subject: [PATCH 03/13] Added buy and sell events to the quote model and view

---
 src/models/quote.js     |  6 ++++++
 src/views/quote_view.js | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/models/quote.js b/src/models/quote.js
index 4fbf466..a5bf5d2 100644
--- a/src/models/quote.js
+++ b/src/models/quote.js
@@ -8,10 +8,16 @@ const Quote = Backbone.Model.extend({
 
   buy() {
     // Implement this function to increase the price by $1.00
+    let current_price = this.get('price');
+    console.log(current_price);
+    this.set('price', current_price += 1);
   },
 
   sell() {
     // Implement this function to decrease the price by $1.00
+    let current_price = this.get('price');
+    console.log(current_price);
+    this.set('price', current_price -= 1);
   },
 });
 
diff --git a/src/views/quote_view.js b/src/views/quote_view.js
index b3da4c6..1bae87e 100644
--- a/src/views/quote_view.js
+++ b/src/views/quote_view.js
@@ -13,7 +13,20 @@ const QuoteView = Backbone.View.extend({
 
     return this;
   },
-  
+
+  events: {
+    'click button.btn-buy': 'buy',
+    'click button.btn-sell': 'sell',
+  },
+
+  buy(event) {
+    this.model.buy();
+  },
+
+  sell(event) {
+    this.model.sell();
+  }
+
 });
 
 export default QuoteView;

From 98ba06a716a82b5d141d8af48020d765c77648c8 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Fri, 15 Dec 2017 10:12:42 -0800
Subject: [PATCH 04/13] Added function to append select option choices

---
 src/app.js              | 11 +++++++++++
 src/views/trade_view.js |  8 ++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/views/trade_view.js

diff --git a/src/app.js b/src/app.js
index 725ff3e..40d5b0c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,6 +16,7 @@ import QuoteListView from './views/quote_list_view';
 
 // -------------------------------------------------------
 
+// Given quotes
 const quoteData = [
   {
     symbol: 'HUMOR',
@@ -35,6 +36,10 @@ const quoteData = [
   },
 ];
 
+// Got quote names & prices into separate arrays
+const names = quoteData.map(info => info.symbol);
+const prices = quoteData.map(info => info.price);
+
 // Define some variables
 let quoteTemplate;
 
@@ -50,6 +55,12 @@ $(document).ready(function() {
     quotes: quotes,
   });
 
+  // Populate the form with options and prices
+  let selectBox = $('.order-entry-form form select[name="symbol"]');
+  for (name of names) {
+    selectBox.append(`<option value="${name}">${name}</option>`);
+  }
+
   simulator.start();
 
   const quoteListView = new QuoteListView({
diff --git a/src/views/trade_view.js b/src/views/trade_view.js
new file mode 100644
index 0000000..4d030ab
--- /dev/null
+++ b/src/views/trade_view.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Trade from '../models/trade';
+
+const TradeView = Backbone.View.extend({
+
+});
+
+export default TradeView;

From 6d32d2b8439c2931cac7d72c9d68be6033c96e21 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Fri, 15 Dec 2017 14:47:46 -0800
Subject: [PATCH 05/13] Working on event bus for trade history

---
 src/app.js                   | 11 ++++++++++-
 src/models/quote.js          |  4 ++++
 src/views/quote_list_view.js |  1 -
 src/views/quote_view.js      |  7 ++++---
 src/views/trade_view.js      |  7 ++++++-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app.js b/src/app.js
index 40d5b0c..b88365f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,10 +9,11 @@ import _ from 'underscore';
 // Imports
 import Simulator from './models/simulator';
 import QuoteList from './collections/quote_list';
-// import Trade from './models/trade';
+import Trade from './models/trade';
 
 import QuoteView from './views/quote_view';
 import QuoteListView from './views/quote_list_view';
+import TradeView from './views/trade_view';
 
 // -------------------------------------------------------
 
@@ -47,6 +48,14 @@ let quoteTemplate;
 
 // jQuery Ready
 $(document).ready(function() {
+
+  // EVENT BUS
+  // listen to buy and sell events in quote.js
+  // append #trade-templates for each; parse datas
+  // let bus = {};
+  // bus = _.extend(bus, Backbone.Events);
+  // const tradeView = new TradeView({bus: bus});
+
   quoteTemplate = _.template($('#quote-template').html());
   // tradeTemplate = _.template($('#trade-template').html());
 
diff --git a/src/models/quote.js b/src/models/quote.js
index a5bf5d2..37cac16 100644
--- a/src/models/quote.js
+++ b/src/models/quote.js
@@ -11,6 +11,8 @@ const Quote = Backbone.Model.extend({
     let current_price = this.get('price');
     console.log(current_price);
     this.set('price', current_price += 1);
+    let current_symbol = this.get('symbol');
+    return { symbol: current_symbol, price: current_price, buy: 'bought'};
   },
 
   sell() {
@@ -18,6 +20,8 @@ const Quote = Backbone.Model.extend({
     let current_price = this.get('price');
     console.log(current_price);
     this.set('price', current_price -= 1);
+    let current_symbol = this.get('symbol');
+    return { symbol: current_symbol, price: current_price, buy: 'sold'};
   },
 });
 
diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js
index eb6af6e..3366e62 100644
--- a/src/views/quote_list_view.js
+++ b/src/views/quote_list_view.js
@@ -7,7 +7,6 @@ const QuoteListView = Backbone.View.extend({
     this.template = params.template;
     this.listenTo(this.model, 'update', this.render);
   },
-
   render() {
     this.$('#quotes').empty();
 
diff --git a/src/views/quote_view.js b/src/views/quote_view.js
index 1bae87e..fed3788 100644
--- a/src/views/quote_view.js
+++ b/src/views/quote_view.js
@@ -20,13 +20,14 @@ const QuoteView = Backbone.View.extend({
   },
 
   buy(event) {
-    this.model.buy();
+    let tradeData = this.model.buy();
+    console.log(tradeData);
   },
 
   sell(event) {
-    this.model.sell();
+    let tradeData = this.model.sell();
+    console.log(tradeData);
   }
-
 });
 
 export default QuoteView;
diff --git a/src/views/trade_view.js b/src/views/trade_view.js
index 4d030ab..e7754f1 100644
--- a/src/views/trade_view.js
+++ b/src/views/trade_view.js
@@ -2,7 +2,12 @@ import Backbone from 'backbone';
 import Trade from '../models/trade';
 
 const TradeView = Backbone.View.extend({
-
+  initialize(params) {
+    this.template = params.template;
+  },
+  
+  render() {
+  },
 });
 
 export default TradeView;

From c99265e43d74e07603a4b370b5361bf765847c17 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Sun, 17 Dec 2017 01:24:35 -0800
Subject: [PATCH 06/13] Implemented trade history event bus

---
 dist/index.html              |  2 +-
 src/app.js                   | 19 ++++++++++++++-----
 src/models/quote.js          |  4 ++--
 src/views/quote_list_view.js |  3 +++
 src/views/quote_view.js      |  9 +++++++++
 src/views/trade_view.js      |  9 ++++++++-
 6 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 8a046fa..d5e8528 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -100,7 +100,7 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
     <script type="text/template" id="trade-template">
       <li class="trade">
         <span>
-          You <%- buy ? 'bought' : 'sold' %> <%- symbol %> at $<%- price.toFixed(2) %>
+          You <%- buy %> <%- symbol %> at $<%- price.toFixed(2) %>
         </span>
       </li>
     </script>
diff --git a/src/app.js b/src/app.js
index b88365f..06df59c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -43,6 +43,7 @@ const prices = quoteData.map(info => info.price);
 
 // Define some variables
 let quoteTemplate;
+let tradeTemplate;
 
 // -------------------------------------------------------
 
@@ -52,12 +53,11 @@ $(document).ready(function() {
   // EVENT BUS
   // listen to buy and sell events in quote.js
   // append #trade-templates for each; parse datas
-  // let bus = {};
-  // bus = _.extend(bus, Backbone.Events);
-  // const tradeView = new TradeView({bus: bus});
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
 
   quoteTemplate = _.template($('#quote-template').html());
-  // tradeTemplate = _.template($('#trade-template').html());
+  tradeTemplate = _.template($('#trade-template').html());
 
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
@@ -72,11 +72,20 @@ $(document).ready(function() {
 
   simulator.start();
 
+  // Render quote list view
   const quoteListView = new QuoteListView({
-    el: 'main',
+    el: $('#quotes-container'),
     model: quotes,
     template: quoteTemplate,
+    bus: bus,
   });
 
   quoteListView.render();
+
+  // Render trade history view
+  const tradeView = new TradeView({
+    template: tradeTemplate,
+    el: $('#trades-container'),
+    bus: bus,
+  })
 });
diff --git a/src/models/quote.js b/src/models/quote.js
index 37cac16..c26e8eb 100644
--- a/src/models/quote.js
+++ b/src/models/quote.js
@@ -12,7 +12,7 @@ const Quote = Backbone.Model.extend({
     console.log(current_price);
     this.set('price', current_price += 1);
     let current_symbol = this.get('symbol');
-    return { symbol: current_symbol, price: current_price, buy: 'bought'};
+    return { symbol: current_symbol, price: current_price, buy: 'bought' };
   },
 
   sell() {
@@ -21,7 +21,7 @@ const Quote = Backbone.Model.extend({
     console.log(current_price);
     this.set('price', current_price -= 1);
     let current_symbol = this.get('symbol');
-    return { symbol: current_symbol, price: current_price, buy: 'sold'};
+    return { symbol: current_symbol, price: current_price, buy: 'sold' };
   },
 });
 
diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js
index 3366e62..7c10222 100644
--- a/src/views/quote_list_view.js
+++ b/src/views/quote_list_view.js
@@ -5,6 +5,7 @@ import Quote from '../models/quote';
 const QuoteListView = Backbone.View.extend({
   initialize(params) {
     this.template = params.template;
+    this.bus = params.bus;
     this.listenTo(this.model, 'update', this.render);
   },
   render() {
@@ -16,8 +17,10 @@ const QuoteListView = Backbone.View.extend({
         template: this.template,
         tagName: 'li',
         className: 'quote',
+        bus: this.bus,
       });
       this.$('#quotes').append(quoteView.render().$el);
+      // console.log(quoteView);
     });
 
     return this;
diff --git a/src/views/quote_view.js b/src/views/quote_view.js
index fed3788..69ff392 100644
--- a/src/views/quote_view.js
+++ b/src/views/quote_view.js
@@ -4,7 +4,14 @@ import Quote from '../models/quote';
 const QuoteView = Backbone.View.extend({
   initialize(params) {
     this.template = params.template;
+    this.bus = params.bus;
     this.listenTo(this.model, 'change', this.render);
+    this.listenTo(this.bus, 'buy', (model) => {
+    if (model) {
+      this.model = model;
+      this.render();
+    }
+  });
   },
 
   render() {
@@ -22,11 +29,13 @@ const QuoteView = Backbone.View.extend({
   buy(event) {
     let tradeData = this.model.buy();
     console.log(tradeData);
+    this.bus.trigger('boughtOrSold', tradeData);
   },
 
   sell(event) {
     let tradeData = this.model.sell();
     console.log(tradeData);
+    this.bus.trigger('boughtOrSold', tradeData);
   }
 });
 
diff --git a/src/views/trade_view.js b/src/views/trade_view.js
index e7754f1..99a7bfc 100644
--- a/src/views/trade_view.js
+++ b/src/views/trade_view.js
@@ -3,9 +3,16 @@ import Trade from '../models/trade';
 
 const TradeView = Backbone.View.extend({
   initialize(params) {
+    this.bus = params.bus;
     this.template = params.template;
+
+    this.listenTo(this.bus, 'boughtOrSold', this.addTrade);
+  },
+  addTrade(tradeData) {
+    const compiledTemplate = this.template(tradeData);
+    this.$('#trades').prepend(compiledTemplate);
   },
-  
+
   render() {
   },
 });

From 69c5022f3545f8deff989fbdc46f24ba8da4b2e6 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Sun, 17 Dec 2017 19:26:59 -0800
Subject: [PATCH 07/13] DRY-ed up code

---
 src/app.js              |  7 +++----
 src/models/trade.js     |  7 -------
 src/views/trade_view.js | 10 +++-------
 3 files changed, 6 insertions(+), 18 deletions(-)
 delete mode 100644 src/models/trade.js

diff --git a/src/app.js b/src/app.js
index 06df59c..c569c8c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,7 +9,6 @@ import _ from 'underscore';
 // Imports
 import Simulator from './models/simulator';
 import QuoteList from './collections/quote_list';
-import Trade from './models/trade';
 
 import QuoteView from './views/quote_view';
 import QuoteListView from './views/quote_list_view';
@@ -50,15 +49,15 @@ let tradeTemplate;
 // jQuery Ready
 $(document).ready(function() {
 
-  // EVENT BUS
-  // listen to buy and sell events in quote.js
-  // append #trade-templates for each; parse datas
+  // Event Bus
   let bus = {};
   bus = _.extend(bus, Backbone.Events);
 
+  // Templates
   quoteTemplate = _.template($('#quote-template').html());
   tradeTemplate = _.template($('#trade-template').html());
 
+  // Default - simulator
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
     quotes: quotes,
diff --git a/src/models/trade.js b/src/models/trade.js
deleted file mode 100644
index 8b60b1b..0000000
--- a/src/models/trade.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Backbone from 'backbone';
-
-const Trade = Backbone.Model.extend({
-
-});
-
-export default Trade;
diff --git a/src/views/trade_view.js b/src/views/trade_view.js
index 99a7bfc..908299f 100644
--- a/src/views/trade_view.js
+++ b/src/views/trade_view.js
@@ -1,20 +1,16 @@
 import Backbone from 'backbone';
-import Trade from '../models/trade';
+// import Trade from '../models/trade';
 
 const TradeView = Backbone.View.extend({
   initialize(params) {
     this.bus = params.bus;
     this.template = params.template;
-
-    this.listenTo(this.bus, 'boughtOrSold', this.addTrade);
+    this.listenTo(this.bus, 'boughtOrSold', this.render);
   },
-  addTrade(tradeData) {
+  render(tradeData) {
     const compiledTemplate = this.template(tradeData);
     this.$('#trades').prepend(compiledTemplate);
   },
-
-  render() {
-  },
 });
 
 export default TradeView;

From b53a938c14227a32c6669912f7b9623f20858d7d Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Sun, 17 Dec 2017 19:40:16 -0800
Subject: [PATCH 08/13] Added empty order and order list models and views

---
 src/collections/order_list.js |  8 ++++++++
 src/models/order.js           |  7 +++++++
 src/views/order_list_view.js  | 11 +++++++++++
 src/views/order_view.js       | 10 ++++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 src/collections/order_list.js
 create mode 100644 src/models/order.js
 create mode 100644 src/views/order_list_view.js
 create mode 100644 src/views/order_view.js

diff --git a/src/collections/order_list.js b/src/collections/order_list.js
new file mode 100644
index 0000000..8d7cabd
--- /dev/null
+++ b/src/collections/order_list.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Order from 'models/order';
+
+const OrderList = Backbone.Collection.extend({
+  model: Order,
+});
+
+export default OrderList;
diff --git a/src/models/order.js b/src/models/order.js
new file mode 100644
index 0000000..ac00259
--- /dev/null
+++ b/src/models/order.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Order = Backbone.Model.extend({
+
+});
+
+export default Order;
diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js
new file mode 100644
index 0000000..be37b14
--- /dev/null
+++ b/src/views/order_list_view.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+import OrderView from './order_view';
+import Order from '../models/order';
+
+const OrderListView = Backbone.View.extend({
+  initialize(params){},
+  render(){},
+  events: {},
+});
+
+export default OrderListView;
diff --git a/src/views/order_view.js b/src/views/order_view.js
new file mode 100644
index 0000000..5712c5a
--- /dev/null
+++ b/src/views/order_view.js
@@ -0,0 +1,10 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+
+const OrderView = Backbone.View.extend({
+  initialize(params){},
+  render(){},
+  events: {},
+});
+
+export default OrderView;

From c526323fe3aa3ba75c6c7f60033ae998f044712d Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 18 Dec 2017 03:15:37 -0800
Subject: [PATCH 09/13] Can add to and cancel orders

---
 dist/index.html              |  2 +-
 src/app.js                   | 27 ++++++++++++++----
 src/views/order_list_view.js | 54 ++++++++++++++++++++++++++++++++++--
 src/views/order_view.js      | 21 ++++++++++++--
 4 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index d5e8528..37d8124 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -108,7 +108,7 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
     <script type="text/template" id="order-template">
       <h3 class="symbol"><%- symbol %></h3>
       <div class="detail">
-        <span class="action"><%- buy ? 'buy' : 'sell' %></span>
+        <span class="action"><%- buy %></span>
         at
         <span class="price">$<%- targetPrice.toFixed(2) %></span>
       </div>
diff --git a/src/app.js b/src/app.js
index c569c8c..30e8c5e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,10 +9,13 @@ import _ from 'underscore';
 // Imports
 import Simulator from './models/simulator';
 import QuoteList from './collections/quote_list';
+import OrderList from './collections/order_list';
 
 import QuoteView from './views/quote_view';
 import QuoteListView from './views/quote_list_view';
 import TradeView from './views/trade_view';
+import OrderView from './views/order_view';
+import OrderListView from './views/order_list_view';
 
 // -------------------------------------------------------
 
@@ -43,6 +46,7 @@ const prices = quoteData.map(info => info.price);
 // Define some variables
 let quoteTemplate;
 let tradeTemplate;
+let orderTemplate;
 
 // -------------------------------------------------------
 
@@ -56,12 +60,14 @@ $(document).ready(function() {
   // Templates
   quoteTemplate = _.template($('#quote-template').html());
   tradeTemplate = _.template($('#trade-template').html());
+  orderTemplate = _.template($('#order-template').html());
 
-  // Default - simulator
+  // Constants
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
     quotes: quotes,
   });
+  const orders = new OrderList();
 
   // Populate the form with options and prices
   let selectBox = $('.order-entry-form form select[name="symbol"]');
@@ -69,8 +75,6 @@ $(document).ready(function() {
     selectBox.append(`<option value="${name}">${name}</option>`);
   }
 
-  simulator.start();
-
   // Render quote list view
   const quoteListView = new QuoteListView({
     el: $('#quotes-container'),
@@ -79,12 +83,23 @@ $(document).ready(function() {
     bus: bus,
   });
 
-  quoteListView.render();
-
   // Render trade history view
   const tradeView = new TradeView({
-    template: tradeTemplate,
     el: $('#trades-container'),
+    template: tradeTemplate,
     bus: bus,
   })
+
+  // Render order list view
+  const orderListView = new OrderListView({
+    el: $('#order-workspace'),
+    model: orders,
+    template: orderTemplate,
+    quoteList: quotes,
+  });
+
+  quoteListView.render();
+  orderListView.render();
+  simulator.start();
+
 });
diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js
index be37b14..2cab00f 100644
--- a/src/views/order_list_view.js
+++ b/src/views/order_list_view.js
@@ -3,9 +3,57 @@ import OrderView from './order_view';
 import Order from '../models/order';
 
 const OrderListView = Backbone.View.extend({
-  initialize(params){},
-  render(){},
-  events: {},
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+    this.quoteList = params.quoteList;
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render() {
+    this.$('#orders').empty();
+
+    this.model.forEach((order) => {
+        const orderView = new OrderView({
+          model: order,
+          template: this.template,
+          tagName: 'li',
+          className: 'order',
+          bus: this.bus,
+        });
+        this.$('#orders').append(orderView.render().$el);
+    });
+    return this;
+  },
+
+  events: {
+    'click button.btn-buy': 'buyOrder',
+    'click button.btn-sell': 'sellOrder',
+  },
+
+  buyOrder: function(event){
+    this.addOrder(event, 'buy');
+  },
+
+  sellOrder: function(event){
+    this.addOrder(event, 'sell');
+  },
+
+  addOrder: function(event, action){
+    event.preventDefault();
+
+    const orderData = {};
+    orderData['symbol'] = this.$('select[name=symbol] option:selected').val();
+    orderData['buy'] = action;
+    const targetPrice = this.$('input[name=price-target]').val();
+    orderData['targetPrice'] = parseFloat(targetPrice);
+    const quoteMatch = this.quoteList.findWhere({symbol: orderData['symbol']});
+    orderData['quote'] = quoteMatch;
+
+    const newOrder = new Order(orderData);
+    console.log(newOrder);
+    this.model.add(newOrder);
+  },
 });
 
 export default OrderListView;
diff --git a/src/views/order_view.js b/src/views/order_view.js
index 5712c5a..2bfa3cc 100644
--- a/src/views/order_view.js
+++ b/src/views/order_view.js
@@ -2,9 +2,24 @@ import Backbone from 'backbone';
 import Order from '../models/order';
 
 const OrderView = Backbone.View.extend({
-  initialize(params){},
-  render(){},
-  events: {},
+  initialize(params) {
+    this.template = params.template;
+  },
+
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+
+  events: {
+    'click button.btn-cancel': 'cancel',
+  },
+
+  cancel(event) {
+    this.model.destroy();
+  }
 });
 
 export default OrderView;

From 3686427e8e684726cb9309a3f67cfbf75acea893 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 18 Dec 2017 06:10:23 -0800
Subject: [PATCH 10/13] Changed form rendering

---
 src/app.js                   |  8 +------
 src/views/order_list_view.js | 42 ++++++++++++++++++++++++++----------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/app.js b/src/app.js
index 30e8c5e..e29ffed 100644
--- a/src/app.js
+++ b/src/app.js
@@ -69,12 +69,6 @@ $(document).ready(function() {
   });
   const orders = new OrderList();
 
-  // Populate the form with options and prices
-  let selectBox = $('.order-entry-form form select[name="symbol"]');
-  for (name of names) {
-    selectBox.append(`<option value="${name}">${name}</option>`);
-  }
-
   // Render quote list view
   const quoteListView = new QuoteListView({
     el: $('#quotes-container'),
@@ -96,10 +90,10 @@ $(document).ready(function() {
     model: orders,
     template: orderTemplate,
     quoteList: quotes,
+    bus: bus,
   });
 
   quoteListView.render();
   orderListView.render();
   simulator.start();
-
 });
diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js
index 2cab00f..0383f83 100644
--- a/src/views/order_list_view.js
+++ b/src/views/order_list_view.js
@@ -6,8 +6,11 @@ const OrderListView = Backbone.View.extend({
   initialize(params) {
     this.template = params.template;
     this.bus = params.bus;
-    this.quoteList = params.quoteList;
+    this.quotes = params.quoteList;
+
     this.listenTo(this.model, 'update', this.render);
+
+    this.displayOrderForm();
   },
 
   render() {
@@ -21,8 +24,9 @@ const OrderListView = Backbone.View.extend({
           className: 'order',
           bus: this.bus,
         });
-        this.$('#orders').append(orderView.render().$el);
+      this.$('#orders').append(orderView.render().$el);
     });
+
     return this;
   },
 
@@ -31,6 +35,28 @@ const OrderListView = Backbone.View.extend({
     'click button.btn-sell': 'sellOrder',
   },
 
+  displayOrderForm() {
+    this.quotes.each((quote) => {
+      const symbol = quote.get('symbol');
+      this.$('.order-entry-form select').append(`<option value="${symbol}">${symbol}</option>`);
+    });
+  },
+
+  getFormData(action) {
+    const orderData = {};
+
+    orderData['symbol'] = this.$('.order-entry-form select[name="symbol"] option:selected').val();
+    orderData['quote'] = this.quotes.findWhere({symbol: orderData['symbol']});
+    orderData['targetPrice'] = Number(this.$('.order-entry-form input[name="price-target"]').val());
+    orderData['buy'] = action;
+
+    return orderData;
+  },
+
+  clearFormData() {
+    this.$('.order-entry-form input[name="price-target"]').val('');
+  },
+
   buyOrder: function(event){
     this.addOrder(event, 'buy');
   },
@@ -42,17 +68,11 @@ const OrderListView = Backbone.View.extend({
   addOrder: function(event, action){
     event.preventDefault();
 
-    const orderData = {};
-    orderData['symbol'] = this.$('select[name=symbol] option:selected').val();
-    orderData['buy'] = action;
-    const targetPrice = this.$('input[name=price-target]').val();
-    orderData['targetPrice'] = parseFloat(targetPrice);
-    const quoteMatch = this.quoteList.findWhere({symbol: orderData['symbol']});
-    orderData['quote'] = quoteMatch;
+    const formData = this.getFormData(action);
 
-    const newOrder = new Order(orderData);
-    console.log(newOrder);
+    const newOrder = new Order(formData);
     this.model.add(newOrder);
+    this.clearFormData();
   },
 });
 

From a8a5d9ddb9b6f536ac009351d93b8ce08d46c7ae Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 18 Dec 2017 07:11:09 -0800
Subject: [PATCH 11/13] Bought and sold orders appear in trade history

---
 src/models/order.js          |  2 +-
 src/models/quote.js          |  4 ----
 src/views/order_list_view.js | 35 ++++++++++++++++++++++++++++++++---
 src/views/order_view.js      |  3 ++-
 src/views/quote_list_view.js |  1 -
 src/views/quote_view.js      | 24 +++++++++++++++++++++---
 src/views/trade_view.js      |  3 ++-
 7 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/models/order.js b/src/models/order.js
index ac00259..dda02bd 100644
--- a/src/models/order.js
+++ b/src/models/order.js
@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 
 const Order = Backbone.Model.extend({
-
+  
 });
 
 export default Order;
diff --git a/src/models/quote.js b/src/models/quote.js
index c26e8eb..7042027 100644
--- a/src/models/quote.js
+++ b/src/models/quote.js
@@ -7,18 +7,14 @@ const Quote = Backbone.Model.extend({
   },
 
   buy() {
-    // Implement this function to increase the price by $1.00
     let current_price = this.get('price');
-    console.log(current_price);
     this.set('price', current_price += 1);
     let current_symbol = this.get('symbol');
     return { symbol: current_symbol, price: current_price, buy: 'bought' };
   },
 
   sell() {
-    // Implement this function to decrease the price by $1.00
     let current_price = this.get('price');
-    console.log(current_price);
     this.set('price', current_price -= 1);
     let current_symbol = this.get('symbol');
     return { symbol: current_symbol, price: current_price, buy: 'sold' };
diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js
index 0383f83..4e9cad4 100644
--- a/src/views/order_list_view.js
+++ b/src/views/order_list_view.js
@@ -9,6 +9,7 @@ const OrderListView = Backbone.View.extend({
     this.quotes = params.quoteList;
 
     this.listenTo(this.model, 'update', this.render);
+    this.listenTo(this.bus, 'quote_change', this.buyOrSellOrder);
 
     this.displayOrderForm();
   },
@@ -57,15 +58,15 @@ const OrderListView = Backbone.View.extend({
     this.$('.order-entry-form input[name="price-target"]').val('');
   },
 
-  buyOrder: function(event){
+  buyOrder(event) {
     this.addOrder(event, 'buy');
   },
 
-  sellOrder: function(event){
+  sellOrder(event) {
     this.addOrder(event, 'sell');
   },
 
-  addOrder: function(event, action){
+  addOrder(event, action) {
     event.preventDefault();
 
     const formData = this.getFormData(action);
@@ -74,6 +75,34 @@ const OrderListView = Backbone.View.extend({
     this.model.add(newOrder);
     this.clearFormData();
   },
+
+  buyOrSellOrder(quote) {
+    let currentOrders = this.model.where({symbol: quote.get('symbol')});
+    currentOrders.forEach((order) => {
+
+      if (order.get('buy') == 'buy' && order.get('targetPrice') >= quote.get('price'))  {
+        let tradeItem = {
+          price: order.get('targetPrice'),
+          symbol: order.get('symbol'),
+          buy: 'bought',
+        }
+        this.bus.trigger('boughtOrSold', tradeItem);
+        order.destroy();
+        quote.buy();
+      }
+
+      else if (order.get('buy') == 'sell' && order.get('targetPrice') <= quote.get('price')) {
+        let tradeItem = {
+          price: order.get('targetPrice'),
+          symbol: order.get('symbol'),
+          buy: 'sold',
+        }
+        this.bus.trigger('boughtOrSold', tradeItem)
+        order.destroy();
+        quote.sell();
+      }
+    });
+  }
 });
 
 export default OrderListView;
diff --git a/src/views/order_view.js b/src/views/order_view.js
index 2bfa3cc..2cc0568 100644
--- a/src/views/order_view.js
+++ b/src/views/order_view.js
@@ -19,7 +19,8 @@ const OrderView = Backbone.View.extend({
 
   cancel(event) {
     this.model.destroy();
-  }
+  },
+
 });
 
 export default OrderView;
diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js
index 7c10222..d68f188 100644
--- a/src/views/quote_list_view.js
+++ b/src/views/quote_list_view.js
@@ -20,7 +20,6 @@ const QuoteListView = Backbone.View.extend({
         bus: this.bus,
       });
       this.$('#quotes').append(quoteView.render().$el);
-      // console.log(quoteView);
     });
 
     return this;
diff --git a/src/views/quote_view.js b/src/views/quote_view.js
index 69ff392..7591513 100644
--- a/src/views/quote_view.js
+++ b/src/views/quote_view.js
@@ -18,6 +18,8 @@ const QuoteView = Backbone.View.extend({
     const compiledTemplate = this.template(this.model.toJSON());
     this.$el.html(compiledTemplate);
 
+    this.bus.trigger('quote_change', this.model);
+
     return this;
   },
 
@@ -28,15 +30,31 @@ const QuoteView = Backbone.View.extend({
 
   buy(event) {
     let tradeData = this.model.buy();
-    console.log(tradeData);
     this.bus.trigger('boughtOrSold', tradeData);
   },
 
   sell(event) {
     let tradeData = this.model.sell();
-    console.log(tradeData);
     this.bus.trigger('boughtOrSold', tradeData);
-  }
+  },
+
+  buyOrSellQuote(event) {
+    let tradeItem = {
+      price: this.model.get('price'),
+      symbol: this.model.get('symbol'),
+    }
+    console.log(tradeItem);
+
+    if (event.currentTarget.innerHTML == 'Buy') {
+      tradeItem['buy'] = 'buy';
+      this.bus.trigger('boughtOrSold', tradeItem);
+      this.model.buy();
+    } else {
+      tradeItem['buy'] = 'sell';
+      this.bus.trigger('boughtOrSold', tradeItem);
+      this.model.sell();
+    }
+  },
 });
 
 export default QuoteView;
diff --git a/src/views/trade_view.js b/src/views/trade_view.js
index 908299f..b604e50 100644
--- a/src/views/trade_view.js
+++ b/src/views/trade_view.js
@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-// import Trade from '../models/trade';
+import Quote from '../models/quote';
 
 const TradeView = Backbone.View.extend({
   initialize(params) {
@@ -7,6 +7,7 @@ const TradeView = Backbone.View.extend({
     this.template = params.template;
     this.listenTo(this.bus, 'boughtOrSold', this.render);
   },
+
   render(tradeData) {
     const compiledTemplate = this.template(tradeData);
     this.$('#trades').prepend(compiledTemplate);

From 8b187338f74dbadc51150aaabf9cf5dce80bc88d Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 18 Dec 2017 07:31:01 -0800
Subject: [PATCH 12/13] Added tests for order validations

---
 spec/models/order_spec.js | 71 +++++++++++++++++++++++++++++++++++++++
 src/models/order.js       | 25 +++++++++++++-
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 spec/models/order_spec.js

diff --git a/spec/models/order_spec.js b/spec/models/order_spec.js
new file mode 100644
index 0000000..235fe39
--- /dev/null
+++ b/spec/models/order_spec.js
@@ -0,0 +1,71 @@
+import Order from 'models/order';
+import Quote from 'models/quote';
+
+describe('Order spec', () => {
+  let order;
+  let quote;
+  beforeEach(() => {
+    quote = new Quote({
+      symbol: 'DOGS',
+      price: 66,
+    });
+  });
+
+  describe('Need a targetPrice', () => {
+    it('is invalid without a targetPrice', () => {
+      order = new Order({
+        symbol: 'DOGS',
+        buy: 'buy',
+        quote: quote,
+      })
+
+      expect(order.isValid()).toBeFalsy();
+    });
+    it('is valid with a targetPrice', () => {
+      order = new Order({
+        symbol: 'DOGS',
+        targetPrice: 55,
+        buy: 'buy',
+        quote: quote,
+      })
+
+      expect(order.isValid()).toBeTruthy();
+    });
+  });
+
+  describe('Need valid targetPrice', () => {
+    it('(BUY) must have targetPrice lower than trade price', () => {
+      order = new Order({
+        symbol: 'DOGS',
+        targetPrice: 999,
+        buy: "buy",
+        quote: quote,
+      })
+      expect(order.isValid()).toBeFalsy();
+
+      order.set('targetPrice', 66)
+      expect(order.isValid()).toBeFalsy();
+
+      order.set('targetPrice', 55)
+      expect(order.isValid()).toBeTruthy();
+    });
+
+    it('(SELL) must have a targetPrice higher than trade price', () => {
+      order = new Order({
+        symbol: 'DOGS',
+        targetPrice: 44,
+        buy: "sell",
+        quote: quote,
+      })
+      expect(order.isValid()).toBeFalsy();
+
+      order.set('targetPrice', 66)
+      expect(order.isValid()).toBeFalsy();
+
+      order.set('targetPrice', 77)
+      expect(order.isValid()).toBeTruthy();
+    });
+
+  });
+
+});
diff --git a/src/models/order.js b/src/models/order.js
index dda02bd..09adeaf 100644
--- a/src/models/order.js
+++ b/src/models/order.js
@@ -1,7 +1,30 @@
 import Backbone from 'backbone';
 
 const Order = Backbone.Model.extend({
-  
+  validate(attributes) {
+    const errors = {};
+
+    if (!attributes.targetPrice) {
+      errors['targetPrice'] = 'A target price is required.';
+    }
+
+    if(attributes.buy == "buy" &&
+       attributes.targetPrice >= attributes.quote.get('price')) {
+      errors['targetPrice'] = ['The target price must be lower than the trade price'];
+    }
+
+    if(attributes.buy === "sell" &&
+       attributes.targetPrice <= attributes.quote.get('price')){
+      errors['targetPrice'] = ['The target price must be higher than the trade price'];
+    }
+
+    if ( Object.keys(errors).length > 0 ) {
+      return errors;
+    } else {
+      return false;
+    }
+
+  },
 });
 
 export default Order;

From a81449962430ff7d60526b151508737b91188ae7 Mon Sep 17 00:00:00 2001
From: kee nam <nam.keeyeon@gmail.com>
Date: Mon, 18 Dec 2017 09:39:31 -0800
Subject: [PATCH 13/13] Got rid of a console.log

---
 src/views/quote_view.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/quote_view.js b/src/views/quote_view.js
index 7591513..8b8f084 100644
--- a/src/views/quote_view.js
+++ b/src/views/quote_view.js
@@ -43,7 +43,6 @@ const QuoteView = Backbone.View.extend({
       price: this.model.get('price'),
       symbol: this.model.get('symbol'),
     }
-    console.log(tradeItem);
 
     if (event.currentTarget.innerHTML == 'Buy') {
       tradeItem['buy'] = 'buy';