JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div>
    Amount: <input id="convert-amt" />
    <input id="convert-from" value="USD"/> to <input id="convert-to" value="JPY"/>
    <input type="submit" id="calc-convert" value="convert" />
    <div id="cv-result"></div>
</div>

JavaScript

$(function(){
    $("#convert-to,#convert-amt").change(function(){
        if($.isNumeric($("#convert-amt").val()))
            $("#cv-result").calcConversion($("#convert-from").val(),$("#convert-to").val(),$("#convert-amt").val());
    });
    $("#calc-convert").click(function(){
        if($.isNumeric($("#convert-amt").val()))
            $("#cv-result").calcConversion($("#convert-from").val(),$("#convert-to").val(),$("#convert-amt").val());
        return false;
    });
});

(function($){
    $.fn.calcConversion = function(cf,ct,amt){
        $.getJSON("http://www.google.com/ig/calculator?hl=en&q="+amt+cf+"%3D%3F"+ct,function(json){
            if(json.error != ""){
                return this.html("Error");
            }else{
                return this.html(json.lhs+"<div style='text-align:center;'>=</div>"+json.rhs);
            }
        });
    }
})( jQuery );