startup-systems · MarioRial22 · Sep 28, 2016 · Sep 28, 2016 · Sep 28, 2016 · Sep 28, 2016
diff --git a/README.md b/README.md
@@ -1,55 +1,5 @@
-# Mashup project
+# Mashup project: Company Researcher
 
-This project is open-ended!
 
-* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax)
-* [inspiration?](http://www.programmableweb.com/mashups)
-
-## Requirements
-
-* Build a site that uses data from at least one external API in an interesting, interactive way. (**80%**)
-* HTML validation (using the [Nu HTML Checker](https://validator.w3.org/nu/)) must pass. (**10%**)
-* JavaScript linting (using the configured [JSHint](http://jshint.com/about/)) must pass. (**10%**)
-* Replace this README with a description of the project.
-
-### Extra credit
-
-Too easy?
-
-* Build in an [object-oriented](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript) way (**10%**)
-* Add fancy interactivity/animations (**10%**)
-
-If you do either of these, please let Aidan know so he can take a look.
-
-## Tips
-
-* The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.)
-* No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one.
-* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder.
-* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you.
-
-## Finding an API
-
-A couple things to look for in an API (or at least the endpoints you're using) for this project:
-
-* Make sure it doesn't require authentication/authorization (e.g. [OAuth](http://oauth.net/)) - at least for the endpoints that you want to use - so that you don't need a server.
-* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/).
-
-Here is a [list of API suggestions](https://gist.github.com/afeld/4952991).
-
-## Running tests locally
-
-Within this repository directory in your [virtual machine](https://github.com/startup-systems/vm):
-
-1. [Install Node.js 6.x.](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)
-1. Install the project dependencies.
-
-    ```bash
-    npm install
-    ```
-
-1. Run the tests.
-
-    ```bash
-    npm test -s
-    ```
+This project, receives the Stock symbol as an input, and then show the stock information.
+It also provides links to get more financial information about the company, news and wikipedia articles.
diff --git a/index.html b/index.html
@@ -1,8 +1,100 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>Mashup</title>
-  </head>
-  <body>
-  </body>
+<!-- saved from url=(0059)http://v4-alpha.getbootstrap.com/examples/starter-template/ -->
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="http://v4-alpha.getbootstrap.com/favicon.ico">
+
+    <title>Company Researcher</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="vendor/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
+    <!-- Custom styles for this template -->
+    <link href="style.css" rel="stylesheet">
+<body>
+
+<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <a class="navbar-brand" href="#">Company Researcher</a>
+    <ul class="nav navbar-nav">
+        <li class="nav-item active">
+            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">About</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#">Contact</a>
+        </li>
+    </ul>
+</nav>
+
+<div class="container">
+
+    <div class="starter-template">
+        <h1>Type the stock symbol of a company</h1>
+        <p class="lead">
+        <div class="form-group">
+            <input type="text" class="form-control" id="companyinput"/>
+        </div>
+
+        <h2 style="color: red; visibility: hidden" id="error">Type stock symbol doesn't exist in the data base</h2>
+
+
+        <div id="progreso" style="visibility: hidden"></div>
+
+    </div>
+
+
+
+
+
+
+
+    <!-- Example row of columns -->
+    <div id='result' class="row" style="visibility: hidden">
+        <div class="col-md-4">
+            <h2>Stock Information</h2>
+            <p><b>Symbol:</b><span id="symbol"></span></p>
+            <p><b>Description:</b><span id="description"></span></p>
+            <p><b>Last:</b><span id="last"></span></p>
+            <p><a class="btn btn-secondary" href="#" role="button" id="stockdetails">View details &raquo;</a></p>
+        </div>
+        <div class="col-md-4">
+            <h2>News</h2>
+            <p>Take better investment decisions reviewing all the company related news</p>
+            <p><a class="btn btn-secondary" href="#" role="button" id="news">View news &raquo;</a></p>
+        </div>
+        <div class="col-md-4">
+            <h2>More info</h2>
+            <p>Get more information about the company in wikipedia</p>
+            <p><a class="btn btn-secondary" href="#" role="button" id="wikipedia">View article &raquo;</a></p>
+        </div>
+    </div>
+
+    <hr>
+
+    <footer>
+        <p>&copy; Company Researcher 2016</p>
+    </footer>
+
+</div><!-- /.container -->
+
+
+<script src="vendor/jquery.min.js"></script>
+<script src="vendor/tether.min.js"></script>
+<script src="vendor/bootstrap.min.js"></script>
+<script src="vendor/progressbar.js"></script>
+
+<script src="script.js"></script>
+
+</body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,115 @@
+
+/**
+ * Created by mario on 9/28/16.
+ */
+var bar = '';
+
+function showProgressCircle(show) {
+    if (show){
+        $('#progreso').css('visibility', 'visible');
+        bar.animate(1.0);
+    } else {
+        $('#progreso').css('visibility', 'hidden');
+
+    }
+}
+
+function stockFound(data) {
+    if (data.quotes.hasOwnProperty('unmatched_symbols')){
+        return false;
+    }
+    return true;
+
+}
+
+function displayStockInfo(data){
+    $('#error').css('visibility', 'hidden');
+    $('#symbol').html(data.quotes.quote.symbol);
+    $('#description').html(data.quotes.quote.description);
+    $('#last').html('$'+data.quotes.quote.last);
+    $('#result').css('visibility', 'visible');
+}
+
+function getCompanyInfo(companyName) {
+    showProgressCircle(true);
+
+    $.ajax({
+        dataType: 'json',
+        url: 'https://sandbox.tradier.com/v1/markets/quotes?symbols='+companyName,
+        beforeSend: function (xhr) {
+            xhr.setRequestHeader('Authorization', 'Bearer fVEdh0GYIEYgg9S4GEqwEOK65OEi');
+        },
+        success: function(data) {
+            //console.log('Success');
+            //console.log(data);
+
+            if (!stockFound(data)){
+                //console.log('Error, stock not found!');
+                $('#error').css('visibility', 'visible');
+                $('#result').css('visibility', 'hidden');
+
+                showProgressCircle(false);
+                return;
+            }
+
+
+
+            displayStockInfo(data);
+
+            $('#stockdetails').click(function () {
+                //console.log('Open: '+'http://finance.yahoo.com/quote/'+$('#symbol').html());
+                window.open('http://finance.yahoo.com/quote/'+$('#symbol').html(), $('#description').html()+' Information');
+            });
+
+            $('#news').click(function () {
+                //console.log('Open: '+'https://www.google.com/search?tbm=nws&q='+$('#description').html());
+                window.open('https://www.google.com/search?tbm=nws&q='+$('#description').html(), $('#description').html()+' Information');
+            });
+
+            $('#wikipedia').click(function () {
+                //console.log('Open: '+'https://en.wikipedia.org/w/index.php?search='+$('#description').html());
+                window.open('https://en.wikipedia.org/w/index.php?search='+$('#description').html(), $('#description').html()+' Information');
+            });
+
+
+
+            showProgressCircle(false);
+        },
+        error: function() {
+            console.log('Error');
+            showProgressCircle(false);
+        },
+    });
+
+}
+
+function main() {
+    console.log('DOCUMENT READY');
+    bar = new ProgressBar.SemiCircle(progreso, {
+        strokeWidth: 6,
+        easing: 'easeInOut',
+        duration: 500,
+        color: '#FFEA82',
+        trailColor: '#eee',
+        trailWidth: 1,
+        svgStyle: null
+    });
+
+    $('#companyinput').keypress(function(e){
+        if(e.keyCode===13) {
+            var companyname = $('#companyinput').val();
+            console.log('company name: '+companyname);
+            getCompanyInfo(companyname);
+        }
+    });
+}
+
+
+
+
+$(document).ready(function () {
+   main();
+
+
+      // Number from 0.0 to 1.0
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,13 @@
+body {
+    padding-top: 5rem;
+}
+.starter-template {
+    padding: 3rem 1.5rem;
+    text-align: center;
+}
+
+#progreso {
+    margin: 20px;
+    width: 200px;
+    height: 100px;
+}
diff --git a/vendor/bootstrap.min.css b/vendor/bootstrap.min.css
diff --git a/vendor/bootstrap.min.js b/vendor/bootstrap.min.js
diff --git a/vendor/ie10-viewport-bug-workaround.js b/vendor/ie10-viewport-bug-workaround.js
@@ -0,0 +1,24 @@
+/*!
+ * IE10 viewport hack for Surface/desktop Windows 8 bug
+ * Copyright 2014-2015 The Bootstrap Authors
+ * Copyright 2014-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// See the Getting Started docs for more information:
+// http://getbootstrap.com/getting-started/#support-ie10-width
+
+(function () {
+  'use strict';
+
+  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+    var msViewportStyle = document.createElement('style')
+    msViewportStyle.appendChild(
+      document.createTextNode(
+        '@-ms-viewport{width:auto!important}'
+      )
+    )
+    document.head.appendChild(msViewportStyle)
+  }
+
+})();
diff --git a/vendor/jquery.min.js b/vendor/jquery.min.js