Monedapp

by Juan Muñoz

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<div id="loading">
    <div class="box">
		<div class="loader10"></div>
	</div>    
</div>
<br>
<div class="pure-g">
    <div class="pure-u-1-4">
        
    </div>
    <div class="pure-u-1-2">
        
        <div class="pure-form">
            <fieldset>
                <legend>Monedapp</legend>
                <input type="text" name="cant" id="cant" placeholder="Cantidad" />
                <select name="moneda1" id="moneda1">
                    <option value="us">Dolares</option>
                    <option value="eu">Euros</option>
                    <option value="ar">Argentinos</option>
                    <option value="br">Reales</option>
                    <option value="uy">Pesos</option>
                </select>    
            </fieldset>
            
            <button id="bt_convertir" class="pure-button pure-button-primary">Convertir a</button>
            <select name="moneda2" id="moneda2">
                <option value="uy">Pesos</option>
                <option value="us">Dolares</option>
                <option value="eu">Euros</option>
                <option value="ar">Argentinos</option>
                <option value="br">Reales</option>
            </select>
        </div>
        
        <h1 class="text-center" id="resultado"></h1>
        
    </div>
</div>

CSS

.text-center {
    text-align:center;
}

#cant {
    width:110px;
}

#loading {
    background:rgba(0,0,0,0.5);
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    display:none;
}

.box{
	display: inline-block;
	height: 200px;
	width: 200px;
	position: relative;
	/*margin:0 -4px -5px -2px;*/
	transition: all .2s ease;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

.loader10:before{
	content: "";
	position: absolute;
	top: 0px;
	left: -25px;
	height: 12px;
	width: 12px;
	border-radius: 12px;
	-webkit-animation: loader10g 3s ease-in-out infinite;
			animation: loader10g 3s ease-in-out infinite;
}

.loader10{
	position: relative;
	width: 12px;
	height: 12px;
	top: 46%;
	left: 46%;
	border-radius: 12px;
	-webkit-animation: loader10m 3s ease-in-out infinite;
			animation: loader10m 3s ease-in-out infinite;
}


.loader10:after{
	content: "";
	position: absolute;
	top: 0px;
	left: 25px;
	height: 10px;
	width: 10px;
	border-radius: 10px;
	-webkit-animation: loader10d 3s ease-in-out infinite;
			animation: loader10d 3s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, 1);}
	50%{background-color: rgba(255, 255, 255, .2);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10m{
	0%{background-color: rgba(255, 255, 255, .2);}
	25%{background-color: rgba(255, 255, 255, .2);}
	50%{background-color: rgba(255, 255, 255, 1);}
	75%{background-color: rgba(255, 255, 255, .2);}
	100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
	0%{background-color: rgba(255, 255, 255,...

JavaScript

var url = "";
var buy_us = 0;
var buy_euro = 0;
var buy_arg = 0;
var buy_real = 0;

var sell_us = 0;
var sell_euro = 0;
var sell_arg = 0;
var sell_real = 0;

function convertir(){
    
    var valor = 0;
    
    $("#loading").fadeIn(500);
    
    $.getJSON(url, function(json) {
        // Compra y venta Dolares
        buy_us = json.query.results.div.div[0].div[0].p;
        sell_us = json.query.results.div.div[0].div[1].p;
        // Compra y venta Euros
        buy_euro = json.query.results.div.div[1].div[0].p;
        sell_euro = json.query.results.div.div[1].div[1].p;
        // Compra y venta Pesos argentinos
        buy_arg = json.query.results.div.div[2].div[0].p;
        sell_arg = json.query.results.div.div[2].div[1].p;
        // Compra y venta Reales
        buy_real = json.query.results.div.div[3].div[0].p;
        sell_real = json.query.results.div.div[3].div[1].p;    
        
        var cantidad = $("#cant").val();
        var moneda1 = $("#moneda1").val();
        var moneda2 = $("#moneda2").val();
        
        console.log(cantidad);
        
        if(cantidad==null){
            alert("Ingresa la cantidad");
            return false;
        }
        
        if(moneda1!="uy"){
            switch (moneda1) {
                case "us": 
                    valor = buy_us;                    
                    break; 
                case "eu":
                    valor = buy_euro;                   
                    break; 
                case "ar":
                    valor = buy_arg;
                    break;
                case "br":
                    valor = buy_real;
                    break;
            }
            
            simbolo = "$";            
            var resultado = cantidad * valor;
            
        } else {
            switch (moneda2) {
                case "uy": 
                    valor = 1;
                    simbolo = "$";
                    break;
                case "us": 
             ...