Category Archives: jQuery

Simple Stock Lookup app

I wanted to have some fun with JSON and jQuery, so I decided to create this simple Stock Lookup app. It uses the Yahoo Query Language to retrive an JSON object.

Have a look at the stock app and let me know what you think.

The HTML used is:

<form action="aktieapp.html" method="post">
		<label>Stock</label><input type="text" id="stockcode" placeholder="Type your stock code"><input type="submit" value="Lookup stock info">
	</form>
	<div class="footer">
<p>All information is received from <a href="http://finance.yahoo.com/">finance.yahoo.com</a>, with a 15 minute delay. Non US stocks need to have an indentifier added like '.CO' for Copenhagen, as in 'VWS.CO' for Vestas Wind Systems.</p>
	<p>Developed by <a href="http://www.muhammadhussain.net">Muhammad Hussain</a></p>
	</div>

The code for the jQuery is:

$('form').submit(function(event){

var stock = $('#stockcode').val();
var link = "http://chart.finance.yahoo.com/z?s="+stock+"&z=l";

//Connect to JSON feed
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.
finance.quotes%20where%20symbol%20in%20%28%22'+stock+'%22%29&env=
store://datatables.org/alltableswithkeys&format=json', function(data){

var Value = data.query.results.quote;
var Ask = Value.AskRealtime;
var Name = Value.Name;
var PercentChange = Value.ChangeinPercent;
var Exchange = Value.StockExchange;

$('<p></p>', {
 html: '<b>'+Name+':</b> <a href='+link+' target="_blank">Chart</a> | <b>Price:</b>
 '+Ask+'('+PercentChange+')| <b>Stock Exchange:</b>'+Exchange,
 class: 'my class'
 }).appendTo('form');

})

$('#stockcode').val('');

 event.preventDefault();

});

Simple Random Image Script

Sometimes you just need to do simple stuff on the web. Here is a simple script written in JavaScript using jQuery, that looks at <img /> tags with a class of ‘random-image’.

<img class="random-img" src="1.jpg" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

var number = Math.floor(Math.random()*3+1);
var filename = number + ".jpg";

$('img.random-img').attr('src', filename);

})();

</script>

This script creates a random number between 1-3, this you can change depending on the amount of images you need to randomize. It then takes this number and adds the ‘jpg’ file extension to it. With the help of some jQuery, it’s easy to select the <img class=”random-image” /> and change the source attribute.

Hope you find this usefull.