HTML Module Example

HTML Module Example.markdown

HTML Module Example

Forked from modwebdev's Pen HTML Module Example.

A Pen by Martin Quito on CodePen.

License.

index.html

<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 -->

script.js

// 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");

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* 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;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />