vikingeducation · grcdeepak1 · Jan 9, 2017 · Jan 12, 2017 · Jan 13, 2017 · Jan 15, 2017
diff --git a/README.md b/README.md
@@ -2,3 +2,6 @@
 Buy low, sell high.
 
 [An AngularJS JavaScript single-page web application using services, directives, ui-router, and good modular code to create a stock portfolio simulator using Yahoo's finance trading data](http://www.vikingcodeschool.com)
+
+
+![stock_sim.gif](stock_sim.gif)
diff --git a/css/app.css b/css/app.css
@@ -0,0 +1,54 @@
+.panel {
+  border: 0.5px solid #333;
+}
+.sortorder:after {
+  content: '\25b2';   // BLACK UP-POINTING TRIANGLE
+}
+.sortorder.reverse:after {
+  content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
+}
+label {
+  display: inline-block;
+}
+input {
+  display: inline-block;
+}
+h4 {
+  color: #777;
+}
+
+.panel-heading {
+  color: #777;
+  margin: 10px;
+  margin-top: 0;
+  display: inline-block;
+  padding-top: 8px;
+  padding-bottom: 2px;
+}
+.filter-input {
+  margin: 10px;
+  margin-top: 0;
+  padding: 5px;
+}
+.table-header-sortable {
+  display: inline-block;
+}
+th {
+  background-color: #0DB9F0;
+  color: #fff;
+}
+.date-selector-container {
+  margin-bottom: 10px;
+}
+.form-label {
+  padding-top: 8px;
+}
+p.form-static-data {
+  padding-top: 8px;
+}
+hr {
+  color: #000;
+}
+.simulate-trade {
+  margin-top: 110px;
+}
diff --git a/css/rzslider.css b/css/rzslider.css
@@ -0,0 +1,261 @@
+/*! angularjs-slider - v5.5.1 -
+ (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
+ https://github.com/angular-slider/angularjs-slider -
+ 2016-09-22 */
+.rzslider {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 4px;
+  margin: 35px 0 15px 0;
+  vertical-align: middle;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.rzslider.with-legend {
+  margin-bottom: 40px;
+}
+
+.rzslider[disabled] {
+  cursor: not-allowed;
+}
+
+.rzslider[disabled] .rz-pointer {
+  cursor: not-allowed;
+  background-color: #d8e0f3;
+}
+
+.rzslider span {
+  position: absolute;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.rzslider .rz-base {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+.rzslider .rz-bar-wrapper {
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 32px;
+  padding-top: 16px;
+  margin-top: -16px;
+  box-sizing: border-box;
+}
+
+.rzslider .rz-bar-wrapper.rz-draggable {
+  cursor: move;
+}
+
+.rzslider .rz-bar {
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 4px;
+  background: #d8e0f3;
+  -webkit-border-radius: 2px;
+     -moz-border-radius: 2px;
+          border-radius: 2px;
+}
+
+.rzslider .rz-bar.rz-selection {
+  z-index: 2;
+  background: #0db9f0;
+  -webkit-border-radius: 2px;
+     -moz-border-radius: 2px;
+          border-radius: 2px;
+}
+
+.rzslider .rz-pointer {
+  top: -14px;
+  z-index: 3;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  background-color: #0db9f0;
+  -webkit-border-radius: 16px;
+     -moz-border-radius: 16px;
+          border-radius: 16px;
+}
+
+.rzslider .rz-pointer:after {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  content: '';
+}
+
+.rzslider .rz-pointer:hover:after {
+  background-color: #ffffff;
+}
+
+.rzslider .rz-pointer.rz-active {
+  z-index: 4;
+}
+
+.rzslider .rz-pointer.rz-active:after {
+  background-color: #451aff;
+}
+
+.rzslider .rz-bubble {
+  bottom: 16px;
+  padding: 1px 3px;
+  color: #55637d;
+  cursor: default;
+}
+
+.rzslider .rz-bubble.rz-selection {
+  top: 16px;
+}
+
+.rzslider .rz-bubble.rz-limit {
+  color: #55637d;
+}
+
+.rzslider .rz-ticks {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  z-index: 1;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 0;
+  padding: 0 11px;
+  margin: 0;
+  list-style: none;
+  box-sizing: border-box;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.rzslider .rz-ticks .rz-tick {
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  cursor: pointer;
+  background: #d8e0f3;
+  border-radius: 50%;
+}
+
+.rzslider .rz-ticks .rz-tick.rz-selected {
+  background: #0db9f0;
+}
+
+.rzslider .rz-ticks .rz-tick .rz-tick-value {
+  position: absolute;
+  top: -30px;
+  transform: translate(-50%, 0);
+}
+
+.rzslider .rz-ticks .rz-tick .rz-tick-legend {
+  position: absolute;
+  top: 24px;
+  max-width: 50px;
+  white-space: normal;
+  transform: translate(-50%, 0);
+}
+
+.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
+  top: initial;
+  bottom: -40px;
+}
+
+.rzslider.rz-vertical {
+  position: relative;
+  width: 4px;
+  height: 100%;
+  padding: 0;
+  margin: 0 20px;
+  vertical-align: baseline;
+}
+
+.rzslider.rz-vertical .rz-base {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+.rzslider.rz-vertical .rz-bar-wrapper {
+  top: auto;
+  left: 0;
+  width: 32px;
+  height: 100%;
+  padding: 0 0 0 16px;
+  margin: 0 0 0 -16px;
+}
+
+.rzslider.rz-vertical .rz-bar {
+  bottom: 0;
+  left: auto;
+  width: 4px;
+  height: 100%;
+}
+
+.rzslider.rz-vertical .rz-pointer {
+  top: auto;
+  bottom: 0;
+  left: -14px !important;
+}
+
+.rzslider.rz-vertical .rz-bubble {
+  bottom: 0;
+  left: 16px !important;
+  margin-left: 3px;
+}
+
+.rzslider.rz-vertical .rz-bubble.rz-selection {
+  top: auto;
+  left: 16px !important;
+}
+
+.rzslider.rz-vertical .rz-ticks {
+  top: 0;
+  left: -3px;
+  z-index: 1;
+  width: 0;
+  height: 100%;
+  padding: 11px 0;
+  -webkit-flex-direction: column-reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+
+.rzslider.rz-vertical .rz-ticks .rz-tick {
+  vertical-align: middle;
+}
+
+.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
+  top: initial;
+  left: 22px;
+  transform: translate(0, -28%);
+}
+
+.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend {
+  top: initial;
+  right: 24px;
+  max-width: none;
+  white-space: nowrap;
+  transform: translate(0, -28%);
+}
+
+.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
+  right: 12px;
+  bottom: initial;
+  left: initial;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<html>
+<head>
+  <title>Fideligard Stock Portfolio Simulator</title>
+  <script src="https://cdn.jsdelivr.net/lodash/4.16.2/lodash.min.js" charset="utf-8"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <!-- Optional theme -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <!-- Latest compiled and minified JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="css/app.css">
+  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
+  <!-- Latest compiled and minified JavaScript -->
+  <script src="js/javascript/angular.js"></script>
+  <script src="js/javascript/angular-animate.js"></script>
+  <script src="js/javascript/angular-ui-router.js"></script>
+  <script src="js/javascript/rzslider.js" charset="utf-8"></script>
+  <script src="js/javascript/date.js" charset="utf-8"></script>
+  <link rel="stylesheet" href="css/rzslider.css" media="screen" title="no title" charset="utf-8">
+  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
+</head>
+
+<body>
+<nav class="navbar navbar-default">
+  <div class="container">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#">Fideligard Stock Portfolio Simulator</a>
+    </div>
+  </div>
+</nav>
+
+<main ng-app="Fideligard" >
+  <div class="row">
+    <div class="col-md-5">
+      <div ui-view="stockPanel" class="well"></div>
+    </div>
+    <div class="col-md-7">
+      <div ui-view="dateSlider" class="date-selector-container"></div>
+      <div ui-view="portfolioPanel" class="well"></div>
+    </div>
+</main>
+
+</body>
+  <!-- angular app -->
+  <script src = "js/app.js"></script>
+  <!-- services -->
+  <script src = "js/services/date_service.js"></script>
+  <script src = "js/services/stock_service.js"></script>
+  <script src = "js/services/transaction_service.js"></script>
+  <!-- controllers -->
+  <script src = "js/controllers/date_ctrl.js"></script>
+  <script src = "js/controllers/stock_ctrl.js"></script>
+  <script src = "js/controllers/trade_ctrl.js"></script>
+  <script src = "js/controllers/transaction_ctrl.js"></script>
+  <script src = "js/controllers/portfolio_ctrl.js"></script>
+  <!-- directives -->
+  <script src = "js/directives/stock_row_directive.js"></script>
+  <!-- filters -->
+  <script src="js/javascript/toArrayFilter.js" charset="utf-8"></script>
+
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,6 @@
		Buy low, sell high.

		[An AngularJS JavaScript single-page web application using services, directives, ui-router, and good modular code to create a stock portfolio simulator using Yahoo's finance trading data](http://www.vikingcodeschool.com)


		![stock_sim.gif](stock_sim.gif)