El cuerpo de la aplicación

Vamos a realizar una aplicación sencilla utilizando diferentes tecnologías en ella, en este caso jquery, CSS3 y HTML5, para comprobar la funcionalidad de Apache Cordova.

Nuestra aplicación sirve para poder realizar el cambio de moneda, introduciendo el numero de slotis que son un euro y luego introduciendo el numero de una de las dos monedas que queremos cambiar y pulsando sobre el botón de convertir, se realiza una simple operación matemática y de este modo se realiza el cambio.

Nuestros códigos son los siguientes:

HTML

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cambio de divisas | Cordova Apache</title>

	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/content.css">
</head>
<body>
	<header>
		<h1>Cambio de divisas</h1>
		<p>Aplicación destinada para el cálculo del valor monetario entre el Euro y PLN.</p>
	</header>
	<hr>
	<div id="wrapper">
		<!-- aquí vendrá el contenido del ejercicio -->
		<div id="ejercicio">

			<div id='valor'>
				<h3>Valor PLN</h3>
				<div>
					<input id='c_cambio' type="number" placeholder='4,12' step='0.01' max='5.00' min='3.00'>
				</div>
			</div>

			<div>
				<div>
					<h3>EUR</h3>
					<div><input id='c_euro' type="number" step='0.01' min='0.00'></div>
				</div>
				<div id='b_convertir' class="boton">Convertir</div>
				<div>
					<h3>PLN</h3>
					<div><input id='c_pln' type="number" step='0.01' min='0.00'></div>
				</div>
			</div>

		</div>
	</div>
	<footer>
		<p>Desarrollado por: <span class="note">Jesús Chicano Ramírez | Miguel Ángel López Torralba | Alvaro Serrano García</span>. &copy; 2014.</p>
	</footer>

	<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="./js/funciones.js"></script>
</body>
</html>

CSS

Hemos introducido dos archivos CSS el primero de ellos es la plantilla que se va a utilizar para los proyectos y aplicaciones en general, mientras que el segundo es el CSS del ejercicio en cuestión. Debido a que este manual no es de esta tecnología esperamos que el usuario pueda entender el código.

CSS de la plantilla

*{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

/***********BODY*************/
body{
	background: #d3d3d3;
}

body hr{
	margin: 10px 10px 20px 10px;
	color: rgba(59, 116, 215, 0.26);
}
/********END BODY**********/

/**********HEADER***********/
header{
	background: #E8E9E4;
	width: 90%;
	border: 2px solid #7D8FCC;
	border-radius: 5px;
	margin: 30px auto;
	text-align: center;
}
header h1{
	color: #03496B;
	text-shadow: 3px 3px 5px #555;
	margin: 10px 0 10px 0;
}
header p{
	margin: 10px 10px 10px 10px;
	text-align: left;
}
/**********END HEADER**********/

/**********WRAPPER**********/
#wrapper{
	width: 90%;
	margin: 0 auto;
}

/*********END WRAPPER***********/

/********FOOTER*************/
footer{
	clear: both;
	margin: 30px 0 0 0;
	background: #2C333F;
	width: 100%;
	height: 50px;
	text-align: center;
}
footer p{
	color: white;
	font-size: 11px;
	position: relative;
	top: 18px;
}
footer p .note{
	color: #7D8FCC;
}

CSS del ejercicio

#wrapper{
	padding-top: 20px;
}

#ejercicio{
	width: 90%;
	margin: 0 auto;
	background: rgba(100, 100, 100, 0.5);
	text-align: center;
	padding: 10px 0 10px 0;
	border-radius: 3px;
}

h3{
	margin: 20px 0 5px 0;	
}
input{
	width: 60%;
	height: 30px;
	font-size: 24px;
	border-radius: 4px;
	padding: 3px;
}

#b_convertir{
	color: white;
	background: #7D8FCC;
	width: 60%;
	border-radius: 4px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 10px 0 10px 0;
	cursor: pointer;
}
#b_convertir:hover{
	background: blue;
}

JQuery del ejercicio

Naturalmente no vamos a introducir el código del framework completo de Jquery, pero sí el código que nosotros hemos utilizado para crear la aplicación y se pueda entender.

$(document).ready(function(){
	//variables
	var bConvertir = $("#b_convertir");
	var cCambio = $("#c_cambio");
	var cEuro = $("#c_euro");
	var cPln = $("#c_pln");

	//al pulsar el botón
	bConvertir.click(function(){
		if(cCambio.val()=="")
			window.alert("Introduzca un cambio para las divisas.");
		else if(cEuro.val()=="" && cPln.val()=="")
			window.alert("Introduzca un valor en un campo.");
		else if(cEuro.val()!="" && cPln.val()!="")
			window.alert("Solo puede escribir en un campo.");
		else if(cEuro.val()!=""){
			var result = cEuro.val()*cCambio.val();
			cPln.val(result);
		}
		else if (cPln.val()!=""){
			var result = cPln.val()/cCambio.val();
			cEuro.val(result);
		}
	});
});

« Anterior | Siguiente »