Bueno, después de, literalmente, todo un día logré terminarlo, decidí añadirle un billete de cien, utilicé un poco de Photoshop para crear los ** FREDDÓLARES** y un diseño mas completo para el cajero. También le añadí algunos sonidos para que sea mas real y varias repuestas distintas al colocar un cero, números negativos, etc… Investigué un poco mas en los cursos de CSS para poder hacer la disposición de los elementos como se ven.
Les dejo el link por si quieren verlo funcionando y algunas imágenes
LINK: facu2201.github.io
.
También dejo el código:
<HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cajero Platzi</title>
<style>
body
{
background-color: #7e7e7e;
}
h1
{
color: #e0e0e0;
font-family: inherit;
}
.texto
{
margin-left: 43px;
background-color: black;
height: 50px;
width: 250px;
color: green;
font-size: 50px;
text-align: center;
}
.Contenidos
{
padding-left: 370px;
position: absolute;
top: 200px;
}
.boton
{
margin-left: 70px;
position: absolute;
width: 205px;
height: 45px;
font-family: monospace;
color: #67ed3e;
font-size: 18px;
font-weight: 900;
background-color: #363636;
}
.display
{
position: absolute;
padding-left: 400px;
text-align: center;
top: 491px;
font-family: monospace;
font-size: 20px;
color: white;
}
.display2
{
position: absolute;
padding-left: 10px;
font-family: monospace;
font-size: 20px;
color: white;
}
.fondo
{
position: relative;
margin: auto;
width: 1060px;
}
</style>
</head>
<body>
<audio src="sonido/tecla.mp3" id="tecla_id"></audio>
<audio src="sonido/alerta.mp3" id="alerta_id"></audio>
<audio src="sonido/entrega.mp3" id="entrega_id"></audio>
<div class="fondo">
<img class="fondoImg" src="imagen/142.png"></img>
<div class="Contenidos">
<p class= "datos">
<h1><strong>Ingrese el monto deseado</strong></h1>
<input class="texto" type="text" id="pantalla_texto" /><br />
<br /><input type="button" value="REALIZAR EXTRACCIÓN" class="boton" id="botonExtraccion" />
</p>
</div>
<div class="display">
<p id="resultado">
</p>
</div>
<div class="display2" >
<p id="carga_id">
</p>
</div>
</div>
<script type="text/javascript" src="Cajero.js"></script>
</body>
</html>
<JAVASCRIPT>
//DECLARACION DE VARIABLES
class Billete
{
constructor (valor, cantidad)
{
this.valor = valor;
this.cantidad = cantidad;
this.imagen = new Image();
this.imagen.src = imagenes[this.valor];
}
mostrar()
{
document.body.appendChild(this.imagen);
}
}
var sonidos =
{
tecla: document.getElementById("tecla_id"),
alerta: document.getElementById("alerta_id"),
entrega: document.getElementById("entrega_id"),
}
var imagenes = [];
imagenes[100] = "100.png";
imagenes[50] = "50.png";
imagenes[20] = "20.png";
imagenes[10] = "10.png";
var caja = [];
caja.push(new Billete(100, 5));
caja.push(new Billete(50, 4));
caja.push(new Billete(20, 4));
caja.push(new Billete(10, 3));
var resultado = document.getElementById("resultado");
var carga = document.getElementById("carga_id");
var pantalla = document.getElementById("pantalla_texto");
var boton_extraccion = document.getElementById("botonExtraccion");
var papeles;
var div;
var dinero;
var dinero_disponible = 0;
var entregado = [];
// OTROS EVENTOS Y FUNCIONES
contador();
boton_extraccion.addEventListener("click", insertarDinero);
document.addEventListener("keydown", sonido_tecla);
//DECLARACION DE FUNCIONES
function sonido_tecla()
{
sonidos.tecla.play();
}
function contador() //dinero total de la caja
{
for(v of caja)
{
dinero_disponible = dinero_disponible + (v.valor * v.cantidad);
}
}
function insertarDinero()
{
entregado.splice(0, entregado.length); //Reseteo el array entregado
dinero = parseInt(pantalla.value);
compatibilidad();
}
function compatibilidad() //solo tomará multiplos positivos de 10 y distintos de 0
{
if (dinero > dinero_disponible) // SI NO HAY SUFICIENTE DINERO
{
sonidos.alerta.play();
resultado.innerHTML = "No tenemos tantos Freddólares!";
} else
{
if (dinero % 10 == 0 && dinero > 0)
{
entregarDinero();
} else if (dinero == 0)
{
sonidos.alerta.play();
resultado.innerHTML = "Para que vienes al cajero?";
} else if (dinero % 10 !== 0 && dinero > 0)
{
sonidos.alerta.play();
resultado.innerHTML = "Inserte solo múltiplos de 10!";
} else if (dinero < 0)
{
sonidos.alerta.play();
resultado.innerHTML = "No se pueden insertar valores negativos";
}
}
}
function entregarDinero()
{
for(v of caja)
{
if (dinero > 0)
{
div = parseInt(dinero / v.valor) //NUMERO DE BILLETES NECESARIOS
if (div > v.cantidad) //CUANDO NO ALCANZAN LOS BILLETES MAS GRANDES
{
papeles = v.cantidad;
dinero_disponible = dinero_disponible - (v.valor * v.cantidad);
dinero = dinero - (v.valor * v.cantidad);
entregado.push(new Billete(v.valor, papeles));
v.cantidad = 0//SE AGOTAN LOS BILLETES AL TERMINAR
check();
} else //CUANDO SI ALCANZAN LOS BILLETES MAS GRANDES
{
papeles = div;
dinero_disponible = dinero_disponible - (v.valor * div);
dinero = dinero - (v.valor * div);
entregado.push(new Billete(v.valor, papeles));
v.cantidad = v.cantidad - div;
check();
}
}
}
}
function check() //VERIFICA SI LA SUMA ES VÁLIDA RESPECTO A LOS BILLETES DISPONIBLES
{
if (dinero == 0)//ENTREGA EL DINERO
{
sonidos.entrega.play();
carga.innerHTML += "<br /> Usted retiró: <br />";
for(e of entregado)
{
resultado.innerHTML = "Retire su dinero abajo ↓";
for (var i = 0; i < e.cantidad; i++)
{
carga.innerHTML += "<img src=" + e.imagen.src + " />";
}
}
} else
{
sonidos.alerta.play();
resultado.innerHTML = "No tenemos los billetes para esa suma";
}
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.