Skip to content

Instantly share code, notes, and snippets.

@mjquito
Created July 21, 2015 23:16
Show Gist options
  • Save mjquito/edf304f6a0b21cb3d0a6 to your computer and use it in GitHub Desktop.
Save mjquito/edf304f6a0b21cb3d0a6 to your computer and use it in GitHub Desktop.
HTML Module Example
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Default Corporation</h1>
<table class="table">
<thead>
<tr>
<th class="col-md-6" id="last_price">0.00</th>
<th class="col-md-6 text-right" id="change">0.34 (0.85%)</th>
</tr>
</thead>
<tbody >
<tr>
<td class="text-left">Range</td>
<td class="text-right" id="range">39.86 - 40.64</td>
</tr>
<tr>
<td>Open</td>
<td class="text-right" id="open">40.35</td>
</tr>
<tr>
<td>Volume</td>
<td class="text-right" id="volume">5.7M</td>
</tr>
<tr>
<td>Market Cap</td>
<td class="text-right" id="market_cap">336.1B</td>
</tr>
<tr>
<td></td>
<td class="text-right" id="as_of_today">AS of 12:00:00AM</td>
</tr>
<tr>
<td><input type="text" class="form-control" id="symbol_input" placeholder="Symbol (e.g. MSFT)" style="width: 100%"></td>
<td class="text-right"><button class="btn btn-primary" style="width: 100%" id="get_stock_quote">Get New Quote</button></td>
</tr>
</tbody>
</table> <!-- end of table -->
<div id="error"></div>
</div> <!-- end of col-md-4 -->
</div> <!-- end of row -->
</div> <!-- end of container -->
// main controller
$(document).ready(function() {
$("#get_stock_quote").click(function(e){
var symbol = $("#symbol_input").val();
get_Quote(symbol);
});
});
// receives a string symbole and append the responded data to the view
function get_Quote(symbol){
$.ajax({
dataType:'jsonp', // json vs jsonp (JSON with padding)
url:'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + symbol,
success:function(data) {
if(data.hasOwnProperty("Message")){
$("#error").html("Sorry, the symbol is incorrect. Try again (e.g. AAPL).");
}else{
$("#error").html("");
$('h1').html(data.Name);
$('#last_price').html(data.LastPrice);
$('#change').html(polishNumbers(data.Change) + "(" + polishNumbers(data.ChangePercent) + "%)");
$('#range').html(data.High + " - " + data.Low);
$('#open').html(data.Open);
$('#volume').html(polishNumbers(data.Volume));
$('#market_cap').html(polishNumbers(data.MarketCap));
$('#as_of_today').html("As of " + getCurrentTime());
}
},
});
}
// formats the number based on its largeness
function polishNumbers(number){
if (number < 1){
return Math.round(number * 100) / 100;
}else if(number <= 1000000){
return number;
}else if(number <= 1000000000){
return (Math.round((number / 1000000) * 100) / 100) + "M";
}else if(number <= 1000000000000){
return (Math.round((number / 1000000000) * 100) / 100) + "B";
}
}
// gets the current local time
function getCurrentTime(){
var tmp = new Date();
var hours = tmp.getHours()% 12 || 12;
var ampm = hours >= 12 ? 'PM' : 'AM';
return hours + ":" + tmp.getMinutes() + ":" + tmp.getSeconds() + " " + ampm;
}
// default call (when the page is loaded)
get_Quote("MSFT");
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
/* I'm also usinb boostrap 3 to make it more prettier */
/* common */
#change{
color: #18865A;
}
#range, #open, #volume, #market_cap{
font-weight: bold;
}
#as_of_today{
color: #737173;
}
#last_price{
font-size: 1.6em;
}
#error{
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment