El primer archivo el html llamado atm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cajero automatico</title>
</head>
<body>
<canvas width="300" height="300" id="imagen"></canvas>
<p>
<input type="number" id="dinero" />
<input type="button" value="Extraer" id="extraer" />
</p>
<p id="resultado"></p>
<script src="cajero.js"></script>
<script src="canvas.js"></script>
</body>
</html>
Luego cree 2 js el primero se llama cajero.js
class Billete
{
constructor(v, c)
{
this.valor = v;
this.cantidad = c;
this.imagen = new Image();
this.imagen.src = imagenes[numLetras(v)];
this.cargaOK = false;
}
}
function saldoCaja(caja){
saldo = 0;
for (var s of caja){
saldo += s.valor*s.cantidad;
}
return saldo;
}
function numLetras(v){
var valor = "";
switch(v){
case 5:
valor = "cinco"; break;
case 10:
valor = "diez"; break;
case 20:
valor = "veinte"; break;
case 50:
valor = "cincuenta"; break;
case 100:
valor = "cien";
}
return valor;
}
function entregarDinero()
{
var t = document.getElementById("dinero");
dinero = parseInt(t.value);
if ( dinero % 5 != 0 )
{
resultado.innerHTML = "Debe retirar multiplos de 5 pesos";
return false;
}
if (dinero > 600){
resultado.innerHTML = "El monto maximo de retiro es de 600 pesos";
return false;
}
resultado.innerHTML = "";
if (dinero <= saldo){
saldo -= dinero;
for(var bi of caja)
{
if(dinero > 0)
{
div = Math.floor(dinero / bi.valor);
if(div > bi.cantidad)
{
papeles = bi.cantidad;
}
else
{
papeles = div;
}
if (papeles > 0)
resultado.innerHTML += "Se entregaron " +papeles+" Billetes de: "+bi.valor+"<br>";
bi.cantidad-=papeles;
//entregado.push( new Billete(bi.valor, papeles));
dinero = dinero - (bi.valor * papeles);
}
}
}
else {
resultado.innerHTML = "El cajero posee fondos insuficientes solamente tiene: " + saldo + "<br>";
}
}
var caja = [];
var imagenes = [];
imagenes["cinco"] = "cinco.jpg";
imagenes["diez"] = "diez.jpg";
imagenes["veinte"] = "veinte.jpg";
imagenes["cincuenta"]="cincuenta.jpg";
imagenes["cien"]="cien.jpg";
caja.push( new Billete(100, 20) );
caja.push( new Billete(50, 15) );
caja.push( new Billete(20, 20) );
caja.push( new Billete(10, 20) );
caja.push( new Billete(5, 100) );
var saldo = saldoCaja(caja);
console.log(saldo);
var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);
var billete;
El segundo archivo lo llame canvas.js
var vp = document.getElementById("imagen");
var papel = vp.getContext("2d");
var fondo = {
url: "cajero.gif",
cargaOK: false
}
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);
function cargarFondo()
{
fondo.cargaOK = true;
console.log(fondo.imagen);
papel.drawImage(fondo.imagen, 0, 0);
for (var i = 0; i < caja.length;i++){
caja[i].cargaOK = true;
papel.drawImage(caja[i].imagen, 180, (25 * i)+80);
}
}
Le agradezco a Freddy por su valiosa explicación y me tome la molestia de realizar este reto. Cabe resaltar que para que funcione bien las imagenes deben tener el fondo que se llama cajero.gif. Las imagenes de los billetes se llaman cien, cincuenta, veinte, diez y cinco con extension jpg.
cajero.gif ancho: 325 alto: 256
y la de los billetes: ancho: 37 alto: 87 los billetes estan en forma vertical.
