Google Chrome Web Apps

7 views
Skip to first unread message

akopa

unread,
Dec 13, 2010, 4:40:54 PM12/13/10
to La Crosse Programming Users Group
So I'm not a web client programmer by trade, but I thought would poke
around the Google Web App Store a little. To get me started, I
implemented the simplest non-trivial web app I could think of: a
currency converter that looks up current exchange rates. Warning, my
javascript coding conventions may seem a little unorthodox, and I
really am a web novice. However, questions and feedback are (mostly)
welcome.

It is a packaged app (meant to by downloaded and installed rather than
hosted), I've post a zipfile of its source here:
http://groups.google.com/group/lcpug/web/currency-converter.zip It's
basically web page and a manifest file that outlines where things are,
and what they can do. It can be installed as an unpacked extension in
Chrom(e/ium).

Matt

akopa

unread,
Dec 13, 2010, 4:47:46 PM12/13/10
to La Crosse Programming Users Group
On Dec 13, 3:40 pm, akopa <swank.matt...@gmail.com> wrote:
I've post a zipfile of its source here:http://groups.google.com/group/
lcpug/web/currency-converter.zip

Well that didn't seem to go well.
It's under 150 lines, so I try it inline...

manifest.json:

{
"name": "My First App",
"version": "1.0",
"description": "My First App",
"app": {
"launch": {"local_path": "entry.html"}
},
"icons": {"16": "icon.png",
"48": "icon.png",
"128": "icon.png"},
"permissions": ["http://www.x-rates.com/"]
}

entry.html:

<html><head><title>"Currency Converter"</title></head>
<body onload="init()">
<div>
<label for="fc" >Source Currency</label>
<select name="from_currency" id="fc">
<option name="US Dollar">US Dollar</option>
</select>

<label for="tc" >Target Currency</label>
<select name="to_currency" id="tc">
<option name="US Dollar">US Dollar</option>
</select>
</div>
<div>
<label for="fa" >Convert From</label>
<input id="fa" name="from_amount" type="entry" value="0.00" />

<label for="fc" >To</label>
<input id="fc" name="to_amount" type="entry" value="0.00" />
<input name="convert" value="Convert!" type="button"
onclick="convert()"
disabled="true"/>
</div>
<script type="application/javascript">
var ctable;
function init(){
document.getElementsByName('from_currency')[0].value="Dollars";
get_rates(process_request);
}

function convert(){
var dollar_gbp = 1.4;
var gbp_dollar = 1/dollar_gbp;
var from_currency = document.getElementsByName("from_currency")
[0].value;
var to_currency = document.getElementsByName("to_currency")
[0].value;
var source = document.getElementsByName("from_amount")
[0].value;
source = parseFloat(source);

var target = (ctable[to_currency] * source) /
ctable[from_currency];
document.getElementsByName("to_amount")[0].value = target;
}

function get_rates(make_callback){
var req = new XMLHttpRequest();
req.open("GET","http://www.x-rates.com/d/USD/table.html",true);
req.onload = make_callback(req);
req.send(null);
}

function process_request(req){
return function(){
var div = document.createElement("div");
div.innerHTML = req.responseText;
div.className = "currency_rates";

var tbody = find_currcency_table(div), map;
map = make_exchange_rates(tbody);

var fc = document.getElementsByName("from_currency")
[0];
var tc = document.getElementsByName("to_currency")[0];
for(key in map){
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");

opt2.text = opt2.value = opt1.text = opt1.value = key;
fc.add(opt1,null);
tc.add(opt2,null);
}

map["US Dollar"] = 1.0;
ctable = map;
document.getElementsByName("convert")
[0].disabled=false;
};
}

function make_exchange_rates(tbody){
var i, kids = tbody.childNodes, map = {};
for(i = 0; i < kids.length; ++i){
var key, val;

if (/tr/i.test(kids[i].tagName)){
ds = kids[i].getElementsByTagName("td");
key = tag_path_ref(ds[0],
["font"]).childNodes[0].data.trim();
val = tag_path_ref(ds[1], ["a"]);

if (key !== undefined && val !== undefined)
map[key] = parseFloat(val.childNodes[0].data);
}
}
return map;
}

function find_currcency_table(div){
var label,i,tables;
for(i = 0, tables = div.getElementsByTagName("td");
i < tables.length;
++i){
label = tag_path_ref(tables[i], ["font"]);

if (label !== undefined) label = label.childNodes;
else continue;

if (label.length > 0) label = label[0];
else continue;

if (/argentine\s*peso/i.test(label.data))
return nearist_parent(/tbody/i,label);
}

return undefined;
}

function nearist_parent(tag_regex, node){
for(parent = node; parent !== null; parent =
parent.parentNode)
if(tag_regex.test(parent.tagName)) return parent;

return undefined;
}

function tag_path_ref(node, tags){
var child = node;

var children, i;
for(i = 0; i < tags.length; ++i){

if (child !== undefined) children =
child.getElementsByTagName(tags[i]);
else return child;

if (children.length > 0) child = children[0];
else return undefined;
}
return child;
}
</script>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages