Giter Club home page Giter Club logo

ada-trader's Introduction

Ada Trader

Backbone application for simulated trading with real-time stock quotes for Ada capstone projects.

Setup

Starting project

To get started with the Ada Trader project follow these steps:

  1. Fork and clone this repository
  2. cd into the directory for your cloned project
  3. npm install
  4. npm start

Project structure

You should use the following files when building your application:

File Purpose
src/app/views/application_view.js Overall "container" for the entire application, similar to TaskListView in the live code.
src/app/views/quote_view.js View for an individual quote.
src/app.js Main entry-point of the application.
build/index.html Static HTML & Underscore template script for the quote view.

Requirements

Wave 1 - First View

In this wave we will build our first Backbone view, which will display the name (known as a symbol) and price for a single stock. In order to achieve this your application should:

Primary Requirements

  1. Have a QuoteView class extended from Backbone.View (in src/app/views/quote_view.js).
  2. The QuoteView should:
  • Have an initialize function that should:
    • Receive and store a JavaScript object with quote data (symbol and price). See Example Stocks for inspiration.
    • 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.

Wave 2 - Second View

In this wave we will create a second Backbone view, ApplicationView, which is responsible for displaying our entire web application. It will manage a list of QuoteView instances and render each of them. In order to achieve this your application should:

Primary Requirements

  1. Have an ApplicationView class extended from Backbone.View (in src/app/views/application_view.js).
  2. The ApplicationView should:
  • Have an initialize function that should:
    • Receive and store a list of quote data objects.
    • 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.

Wave 3 - Events

In this wave we will extend our QuoteView class to support clicking on the Buy and Sell buttons for each quote. In order to achieve this your application should be updated so that:

Primary Requirements

  1. The QuoteView class should:
  • Have an events property that defines two handlers for the click event, one for each button in the quote template.
  • 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.
  • 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.

Optional Enhancements

The optional enhancement for this wave is to implement a simulation of the broader stock market. To make this simulation as true-to-life as possible, we'll be randomly moving the stock price up or down by a small amount, once per second. In order to achieve this your application should be updated so that:

  1. The QuoteView class should:
  • Setup an event listener for a custom event named change:price. This should be done in the initialize function.
  • Have a function that runs when the change:price event happens. This function should:
    • Expect that a change parameter will be passed into it.
    • Expect that the change parameter will be a number, positive OR negative.
    • Add the change parameter onto the current stock price.
    • Re-render the view so that the new price is displayed to the user.
  1. The application entry-point (src/app.js) should:
  • Implement the anonymous function passed to setInterval. It should:
    • Get the list of all QuoteView instances from the ApplicationView.
    • Call the simulate function on each of those QuoteView instances.

Extra Features

  1. Add buy/sell buttons to the ApplicationView which buy or sell all stocks at once. Yay diversification!
  2. Deal with the case of a stock price reaching zero or negative values.

Example Stocks

  • Symbol: HUMOR, Price: $88.50 - Cristal's HumorUs capstone
  • Symbol: CLOTH, Price: $81.70 - Sophia's Cloth Sim capstone
  • Symbol: HABIT, Price: $98.00 - Val's Habitmon capstone
  • Symbol: SUPER, Price: $83.10 - Rowan's Super Hero Draft capstone
  • Symbol: INGRD, Price: $79.40 - Nicole's Ingredient Inspector capstone
  • Symbol: MXTPE, Price: $109.20 - Jess's Digital Mixtape capstone
  • Symbol: CNTAR, Price: $90.70 - Leah's Centaur capstone
  • Symbol: EVCLR, Price: $101.90 - Lisa's Evolution In Color capstone
  • Symbol: FUZZY, Price: $88.60 - Jade's Fuzz Therapy capstone

ada-trader's People

Contributors

hamled avatar kellypt avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.