From 5446e1985d17e1ebf6af9b9d9d993a9d80b36d1b Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 15:07:44 -0800 Subject: [PATCH 01/12] Create quote_view.js in src/app/views. Created a QuoteView class with intializer and render. --- src/app/views/quote_view.js | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/app/views/quote_view.js diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js new file mode 100644 index 0000000..d1414e6 --- /dev/null +++ b/src/app/views/quote_view.js @@ -0,0 +1,25 @@ +import Backbone from 'backbone'; + +// 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(quote) { + this.symbol = quote.symbol; + this.price = quote.price; + this.about = quote.about; + this.template = quote.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). + }, + + render: function() { + var html = this.template({price: this.price}); + this.$el.html(html); + return this; + } +}); From a333179b02f8d62877256c0b1cb16f6f4d164b0e Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 15:16:10 -0800 Subject: [PATCH 02/12] Added comments to quote_view.js to capture my thought flow --- src/app/views/quote_view.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index d1414e6..5ba721f 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -10,15 +10,18 @@ import Backbone from 'backbone'; // 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(quote) { - this.symbol = quote.symbol; - this.price = quote.price; - this.about = quote.about; - this.template = quote.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). + initialize: function(options) { + // options = an element in a list of quotes + this.quote = options.quote; + // these will be properties of the quote object + // this.symbol = quote.symbol; + // this.price = quote.price; + // this.about = quote.about; + this.template = options.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). }, render: function() { - var html = this.template({price: this.price}); + var html = this.template({quote: this.quote}); this.$el.html(html); return this; } From 1dc2c97ffd2a02c3341cd20ba3d4b23774f3464a Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 15:18:53 -0800 Subject: [PATCH 03/12] added export statement at the end of the files, imported necessary libraries --- src/app/views/application_view.js | 4 ++++ src/app/views/quote_view.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 30b6d0f..04e17c0 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -1,4 +1,8 @@ +import $ from 'jquery'; import Backbone from 'backbone'; +import _ from 'underscore'; + +import QuoteView from 'app/views/quote_view'; const ApplicationView = Backbone.View.extend({ initialize: function() { diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index 5ba721f..1ef36a8 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -26,3 +26,5 @@ var QuoteView = Backbone.View.extend({ return this; } }); + +export default QuoteView; From ffba8383d375e262fbb84ed6e3751f2630c4d4cb Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 15:54:37 -0800 Subject: [PATCH 04/12] Modified Wave 1: Compile an an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). --- src/app/views/quote_view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index 1ef36a8..3879ee9 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -1,4 +1,5 @@ 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) @@ -17,7 +18,7 @@ var QuoteView = Backbone.View.extend({ // this.symbol = quote.symbol; // this.price = quote.price; // this.about = quote.about; - this.template = options.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). + this.template = _.template($('#tmpl-quote-view').html()); // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). }, render: function() { From 57fdb4059b5e9c65e4a4d1a66d0f666d7bba217f Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 15:55:24 -0800 Subject: [PATCH 05/12] Added quoteData in app.js, wrote the first function of initliazer in App_View --- src/app.js | 44 ++++++++++++++++++++++++++++++- src/app/views/application_view.js | 17 +++++++++++- 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index cb932d5..bd31cb5 100644 --- a/src/app.js +++ b/src/app.js @@ -17,9 +17,51 @@ const simulate = function(quote) { quote.trigger('change:price', change); }; +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(); diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index 04e17c0..edebd5d 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -5,9 +5,24 @@ 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. + + //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. + + //Store the HTML unordered list element from `index.html` that will contain the list of rendered `quotes`. }, + + // * Have a `render` function that should: + // * 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. render: function() { this.$el.html('

Hello World

'); From 17d43bb1f6ef7ba1e8a9071c10aec01cdf172619 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 16:16:42 -0800 Subject: [PATCH 06/12] added quote object in front of attributes to render correct HTML --- build/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/index.html b/build/index.html index 79b1a0f..32cd5b6 100644 --- a/build/index.html +++ b/build/index.html @@ -23,9 +23,9 @@

Ada Trader

  • -

    <%- symbol %>

    +

    <%- quote.symbol %>

    -

    $<%- price.toFixed(2) %>

    +

    $<%- quote.price.toFixed(2) %>

    From bdc4eda2e6b66dd965cddce522ee66ee598d0cb2 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 16:18:53 -0800 Subject: [PATCH 07/12] added var in front of quoteData to make it a valid JS variable --- src/app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index bd31cb5..2afed25 100644 --- a/src/app.js +++ b/src/app.js @@ -1,5 +1,7 @@ import $ from 'jquery'; -import _ from 'underscore'; +// import _ from 'underscore'; + +import QuoteView from 'app/views/quote_view'; import ApplicationView from 'app/views/application_view'; const simulate = function(quote) { @@ -17,7 +19,7 @@ const simulate = function(quote) { quote.trigger('change:price', change); }; -quoteData = [ +var quoteData = [ { symbol: "HUMOR", price: 88.50, From b9b8b81173c655681adcdfcbd4d13ac82157eb23 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 16:19:39 -0800 Subject: [PATCH 08/12] changed object.template to fit Wave 2 --- src/app/views/quote_view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index 3879ee9..f89a4c0 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -1,5 +1,5 @@ import Backbone from 'backbone'; -import _ from 'underscore'; +// 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) @@ -18,7 +18,7 @@ var QuoteView = Backbone.View.extend({ // this.symbol = quote.symbol; // this.price = quote.price; // this.about = quote.about; - this.template = _.template($('#tmpl-quote-view').html()); // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). + this.template = options.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). }, render: function() { From 8693baf9f7fca07f6c7a13aab7945452abd5f219 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 16:20:02 -0800 Subject: [PATCH 09/12] completed initialize() and render() for Wave 2. --- src/app/views/application_view.js | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/src/app/views/application_view.js b/src/app/views/application_view.js index edebd5d..cd7cb67 100644 --- a/src/app/views/application_view.js +++ b/src/app/views/application_view.js @@ -10,22 +10,38 @@ const ApplicationView = Backbone.View.extend({ 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 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. render: function() { - this.$el.html('

    Hello World

    '); - + // this.$el.html('

    Hello World

    '); + + // 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; } }); From 9ee82aae5d1881804d9aade70ead8fc5df59e067 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 16:36:30 -0800 Subject: [PATCH 10/12] Changed header h1 font family --- build/css/app.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/build/css/app.css b/build/css/app.css index f335374..5cb9f7f 100644 --- a/build/css/app.css +++ b/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 { From 57851f5d2b42e2f95700e870775191d0a4048185 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Mon, 28 Nov 2016 17:04:33 -0800 Subject: [PATCH 11/12] Completed Wave 3 --- build/index.html | 4 ++-- src/app/views/quote_view.js | 35 ++++++++++++++++++++++++++++------- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/build/index.html b/build/index.html index 32cd5b6..53cb910 100644 --- a/build/index.html +++ b/build/index.html @@ -26,8 +26,8 @@

    Ada Trader

    <%- quote.symbol %>

    $<%- quote.price.toFixed(2) %>

    - - + +
    diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index f89a4c0..40f986a 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -6,7 +6,6 @@ import Backbone from 'backbone'; // 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. @@ -14,18 +13,40 @@ var QuoteView = Backbone.View.extend({ initialize: function(options) { // options = an element in a list of quotes this.quote = options.quote; - // these will be properties of the quote object - // this.symbol = quote.symbol; - // this.price = quote.price; - // this.about = quote.about; - this.template = options.template; // Compile an Underscore template using the script named tmpl-quote-view (which is already defined in index.html). + this.template = options.template; }, 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; From 4efc8641f36ae4916e45e0b5648249dbfc20b594 Mon Sep 17 00:00:00 2001 From: KellyPT Date: Tue, 29 Nov 2016 16:29:25 -0800 Subject: [PATCH 12/12] completed Wave 3 Optional Requirements --- src/app.js | 9 +++++++-- src/app/views/quote_view.js | 5 +++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app.js b/src/app.js index 2afed25..0b3bbc0 100644 --- a/src/app.js +++ b/src/app.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -// import _ from 'underscore'; +import _ from 'underscore'; import QuoteView from 'app/views/quote_view'; import ApplicationView from 'app/views/application_view'; @@ -69,6 +69,11 @@ $(document).ready(function() { 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); }); diff --git a/src/app/views/quote_view.js b/src/app/views/quote_view.js index 40f986a..3b7721f 100644 --- a/src/app/views/quote_view.js +++ b/src/app/views/quote_view.js @@ -14,6 +14,11 @@ var QuoteView = Backbone.View.extend({ // 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() {