Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Iniciar sesión

Implementemos el algoritmo que creamos para un cajero automático.

Primero debemos crear nuestra estructura HTML, luego vamos a pasar nuestro algoritmo a código mira como hacerlo.

Recuerda:

Los programadores dividen problemas grandes en varios pequeños.

Prueba frecuentemente que el código escrito funciona

Desafíos:

Toma el código y ahora muestra los billetes entregados con imágenes.

Crear el código para ir guardando el estado de billetes del cajero y poder verlo visualmente

Intenta optimizar el código que hemos escrito

Diego Ibanez

Creo que para ser las 4.35 am el codigo funciona bien les dejo este link

http://platzi.estudiowkl.com/14_atm.html

para que lo vean funcionando y el codigo js es:

(mañana mas despierto intentare mejorarlo)

var imagenes = [];

imagenes["50"] = "billete50.png";

imagenes["20"] = "billete20.png";

imagenes["10"] = "billete10.png";

class Billete

	constructor(v, c)

		this.valor = v;

		this.cantidad = c;

		this.imagen = new Image();

		this.imagen.src = imagenes[this.valor];

var caja = [];

caja.push( new Billete(50, 3) );

caja.push( new Billete(20, 5) );

caja.push( new Billete(10, 5) );

contar();

var div = 0;

var papeles = 0;

var resultado = document.getElementById("resultado");

var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);

function entregarDinero()

	var dibujado = [];

	var t = document.getElementById("dinero");

	dinero = parseInt(t.value);

	if (total >= dinero)

		for(bi of caja)

			if (dinero > 0)

				div = Math.floor(dinero/bi.valor);

				if (div>bi.cantidad)

					papeles = bi.cantidad;

				else

					papeles = div;

					bi.cantidad = bi.cantidad-papeles;

				for (var i = 0; i < papeles; i++)

					dibujado.push ( new Billete(bi.valor, 1) );

				dinero -= (bi.valor * papeles);

		if (dinero == 0)

			resultado.innerHTML += "Se ha retirado: <br />";

			for(var e of dibujado)

				resultado.innerHTML += "<img src=" + e.imagen.src + " />";

			resultado.innerHTML += "<hr />";

		contar();

		else

			resultado.innerHTML += "No tengo los billetes para esa suma, intenta otro valor <hr />";

	else

		resultado.innerHTML += "Soy un cajero pobre y no tengo dinero :( <hr />";

function contar()

	total = 0

	for (var tot of caja)

		total = total + tot.valor * tot.cantidad;

	console.log(total);

brayanmamani

✨ innerHTML nos permite leer un dato o asignarlo al contenido a una etiqueta definida en HTML. Nos facilita la asignación de valores.

sara

Cuando Freddy dice que esto es optimizable, entro en pánico jajaja. Para mi tiene las líneas de código exactas.

Facundo Andrés Martinez Rossi

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>

//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";
  }
}

A496

Casi los mismo.

Screenshot_2020-02-17 Cajero atumatico.png

Diego Fabián Ramírez Borges

Imágenes de los billetes.

Hmmm…Esto es todo amigos.

Jean Sebastian Rodriguez

Cuando ya no queda dinero en el cajero.

if(dinero>0) {
	document.write("No tengo dinero ni nada que nadar!");
}

Isaac Israel Groisman Oberman

Le agregué algunas cosas más al proyecto:

-Un botón donde se puede consultar el saldo
-Otro botón para depositar billetes de : 100, 50, 20, 10 y 5, con la cantidad que el usuario quiera y así actualizar el saldo.
-Al extraer un monto, se visualizan los billetes y se actualiza el saldo
-Y un boton para borrar lo impreso por el cajero.

Html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero Auomatico</title>
  </head>
  <body>
       <p>
         <img src="cajero.gif" />
       </p>

       <p>
         <input type="number" id="dinero"/>
         <input type="button" value="Saldo" id="ver_saldo"/>
         <input type="button" value="Depositar" id="depositar"/>
         <input type="button" value="Extraer" id="extraer"/>
         <input type="button" value="Borrar" id="borrar"/>
       </p>

       <p id="resultado"> </p>

     <script src="cajero.js"></script>
  </body>
</html>

Javascript:

var imagenes = [];

imagenes["5"] = "billete5.jpg";
imagenes["10"] = "billete10.jpg";
imagenes["20"] = "billete20.jpg";
imagenes["50"] = "billete50.jpg";
imagenes["100"] = "billete100.jpg";

class Billete {
  constructor(v, c) {

    this.valor = v;
    this.cantidad = c;

    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var caja = [];
var entregado = [];
caja.push(new Billete(100, 1));
caja.push(new Billete(50, 1));
caja.push(new Billete(20, 1));
caja.push(new Billete(10, 1));
caja.push(new Billete(5, 1));


var dinero = 0;
var div = 0;
var papeles = 0;

var boton_saldo = document.getElementById("ver_saldo");
boton_saldo.addEventListener("click", saldo);

var total = 0;
function saldo() {
  var monto = 0;
  for (var v of caja) {
    monto = monto + v.valor * v.cantidad;
    total = monto;
    resultado.innerHTML = "Su saldo es: $"+ monto + "<hr />" ;
  }
}

function actualizar() {  //actualiza el saldo despues de depositar
  var saldo = 0 ;
  for (var v of caja) {
    saldo = saldo + v.valor * v.cantidad;
    total = saldo;
  }
}

var boton_depositar = document.getElementById("depositar");
boton_depositar.addEventListener("click", deposito);

function deposito() {
  var monto = prompt("Por favor indique el valor a depositar de $: 100, 50, 20, 10, o 5 ", "100");
if ( monto == 100 || monto == 50 || monto == 20 || monto == 10 || monto == 5) {

   if (monto == 100) {

     var cant_cien = prompt("Indíque la cantidad", 1);

     while (isNaN(cant_cien)) {
       cant_cien = prompt(cant_cien + " No es un valor correcto, Por favor indíque un valor");
     }

     caja[0].cantidad = caja[0].cantidad + parseInt(cant_cien);
     actualizar();
     resultado.innerHTML += "Se ha depositado " + cant_cien + " Billetes de: $" + monto + "<hr />";

    }

    if (monto == 50) {
      var cant_cincuenta = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_cincuenta)) {
        cant_cincuenta = prompt(cant_cincuenta + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[1].cantidad = caja[1].cantidad + parseInt(cant_cincuenta);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_cincuenta + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 20) {
      var cant_veinte = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_veinte)) {
        cant_veinte = prompt(cant_veinte + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[2].cantidad = caja[2].cantidad + parseInt(cant_veinte);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_veinte + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 10) {
      var cant_diez = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_diez)) {
        cant_diez = prompt(cant_diez + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[3].cantidad = caja[3].cantidad + parseInt(cant_diez);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_diez + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 5) {
      var cant_cinco = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_cinco)) {
        cant_cinco = prompt(cant_cinco + " No es un valor correcto, Por favor indíque un valor");
    }

    caja[4].cantidad = caja[4].cantidad + parseInt(cant_cinco);
    actualizar();
    resultado.innerHTML += "Se ha depositado " + cant_cinco + " Billetes de: $" + monto + "<hr />";

    }
  }
 else{
   resultado.innerHTML =("Valor no valido, por favor indicar los valores correspondientes para depositar" + "<hr />");
  }

}




var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

var resultado = document.getElementById("resultado");



document.getElementById('borrar').onclick = function borra() {
//Esta funciona hace que cuando apretas el boton "Borrar" se borra el resultado y billetes entregados
   resultado.innerHTML = "";
    entregado = [];
}

function contador()
{
	total = 0;
	for (var tot of caja)
	{
		total = total + tot.valor * tot.cantidad;

	}
}


function entregarDinero(){

 //resultado.innerHTML = "";
 //document.getElementById('resultado').innerHTML = "";

  var mostrado = [];

  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  if (dinero > total) {
      resultado.innerHTML += "No hay billetes para esa cantidad, intenta otro valor! <hr />";
  }else {



  for (var bi of caja) {
    //console.log(bi);
    if (dinero > 0) {
      div = Math.floor(dinero / bi.valor);
      //console.log(div);
      if (div > bi.cantidad) {
        papeles = bi.cantidad;
      }
      else {
        papeles = div;
      }
      bi.cantidad = bi.cantidad - papeles;
      //console.log(caja);

      entregado.push(new Billete(bi.valor, papeles));

      for (var i = 0; i < papeles; i++)
				{
					mostrado.push (new Billete(bi.valor, 1) );
				}
				dinero = dinero - (bi.valor * papeles);
			}

    }



    if (dinero == 0) {

      resultado.innerHTML += "Se ha retirado: <br />";

			for(var e of mostrado)
			{
				resultado.innerHTML = resultado.innerHTML + e.cantidad + " billetes de $" + e.valor + "<br/>" + "<img src=" + e.imagen.src + " />" + "<hr />";
			}

			resultado.innerHTML = resultado.innerHTML + "<hr />";
		  contador();

		}
    else  {
      resultado.innerHTML += "No hay billetes para esa cantidad, intenta otro valor! <hr />";

    }
 }
}







        //resultado.innerHTML = resultado.innerHTML + "Se ha retirado: " + "<br/>" + e.cantidad + " billetes de $" + e.valor + "<br/>" + "<img src=" + e.imagen.src + " />" + "<hr />";
        //document.write(e.cantidad + " billetes de $" + e.valor + "<br/>" );


     //contador();
    //console.log(entregado);

Daniel Felipe Celis Fernández

Mi aporte, agregue fecha y hora, además del último retiro.

class Billetes
{
  constructor(n, v, c)
  {
    this.nombre = n;
    this.valor = v;
    this.cantidad = c;
    this.image = new Image();
    this.image.src = images[this.nombre];
  }
}

var images = [];
images["100.000"] = "100.jpg";
images["50.000"] = "50.jpg";
images["20.000"] = "20.jpg";
images["10.000"] = "10.jpg";

var dinero_1 = document.getElementById('dinero');
var sold = document.getElementById('saldo');
var r = document.getElementById('resultado');
var r1 = document.getElementById('resultado1');
var div_i = document.getElementById('imagen');
var extraer_1 = document.getElementById('extraer');
extraer_1.addEventListener("click", transaccion);

var box = [];
box.push(new Billetes("100.000", 100000, 23));
box.push(new Billetes("50.000", 50000, 48));
box.push(new Billetes("20.000", 20000, 41));
box.push(new Billetes("10.000", 10000, 48));

var j = 0;
var p = 0;
for (var s of box)
{
  j += parseInt(s.cantidad * s.valor);
  p += parseInt(s.cantidad * s.valor);
  sold.innerHTML = "<font size=5> Saldo del Cajero: $" + j + "</font>" ;
}

var retirado = [];
var entregado = [];
var papeles = 0;

function transaccion()
{
  var money = parseInt(dinero_1.value);
  if (money > 500000)
  {
    r.innerHTML = "";
    r1.innerHTML = "<font size=4> Recuerde que la máxima cantidad de dinero que se puede retirar en una </font> </br>";
    r1.innerHTML += "<font size=4> sola transaccion es de: $500.000. </font>"
  }
  else
  {
    for (var b of box)
    {
      if( money > 0)
      {
        var div = Math.floor(money / b.valor);

        if(div > b.cantidad)
        {
          papeles = b.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push( new Billetes(b.nombre, b.valor, papeles) );
        money -= (b.valor * papeles);
        var t = j - dinero_1.value;
      }
    }
    if (money > 0)
    {
      r.innerHTML = "";
      r1.innerHTML = "<font size=4> Lo siento, la cantidad que desea retirar no es compatible con el valor de los billetes. </font> <br/>";
      r1.innerHTML += "</br> <font size=4> Recuerde que el valor del billete de menor denominación es de: $10.000. </font>";
    }
    else if (money <= t)
    {
      var m = parseInt(dinero_1.value);
      retirado.push(m);
      for (var e of entregado)
      {
        if(e.cantidad > 0)
        {
          if (t + m == p)
          {
            r1.innerHTML = "";
          }
          else
          {
            r1.innerHTML = "El Ultimo retiro fue de: $" + retirado[0];
          }
          r.innerHTML += e.cantidad + " billetes de $" + e.valor + "<br/> <br/>";
          for (var i = 0; i < e.cantidad; i++)
          {
            r.appendChild(e.image);
            if (e.valor == e.valor)
            {
              r.innerHTML += " ";
            }
            else
            {
              r.innerHTML += "<br/>";
            }
          }
          r.innerHTML += "<br/><br/>";
        }
      }
      todayDate(r);
      sold.innerHTML = "<font size=5> Saldo del Cajero: $" + t + "</font>";
    }
    else if (money > t)
    {
      sold.innerHTML = "<font size=5> Saldo del Cajero: $" + j + "</font>";
      r.innerHTML = "";
      r1.innerHTML = "<font size=4> Lo sentimos, la cantidad que desea retirar excede la disponibilidad de dinero en el cajero. </font> <br/>";
      r1.innerHTML += "</br> <font size=4> O el cajero no dispone de más dinero. </font>";
      t = j;
    }
    j = t;
  }
}

function clean()
{
  lastTransaction();
  entregado.splice(0,entregado.length);
  document.getElementById('formulario').reset();
  r.innerHTML = "";
  r1.innerHTML = "";
  return true;
}

function resetAll()
{
  clean()
  retirado.splice(0,retirado.length);
  var h = 0;
  for (var l of box)
  {
    h += parseInt(l.cantidad * l.valor);
    sold.innerHTML = "<font size=5> Saldo del Cajero: $" + h + "</font>";
    j = h;
  }
}

function todayDate(v)
{
  var today = new Date();
  var dia = today.getDate();
  var month = today.getMonth() + 1;
  var months = (month < 10) ? "0" + month : month;
  var year = today.getFullYear();
  var hour = today.getHours();
  var minute = today.getMinutes();
  var minutes = (minute < 10) ? "0" + minute : minute;
  var second = today.getSeconds();
  var seconds = (second < 10) ? "0" + second : second;
  v.innerHTML += "<strong> Fecha: </strong>" + dia +  "/" + months + "/" + year + "<strong> Hora: </strong>" + hour + ":" + minutes + ":" + seconds;
}

function lastTransaction()
{
  var h = parseInt(dinero_1.value);
  if (h > 500000)
  {
    retirado.splice(0,0);
  }
  else if (h <= j)
  {
    retirado.splice(0,retirado.length, h);
  }
  else if (h > j)
  {
    retirado.splice(0,retirado.length, retirado[retirado.length - 1]);
    retirado.splice(0,0,retirado[0]);
  }
}

Santiago Cujaban

Sé que el video se lanzó hace dos años, y los desafíos ya fueron resueltos por los estudiantes! Pero igual, aquí abajo dejo mi código 😄. Este fue el proyecto que más me gusto hacer, pude probar mis habilidades y apoyarme de la comunidad en Platzi, Gracias #teamplatzi 😃.

Si quieren verlo en acción sólo díganme y les paso el link!

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
  </head>
  <body>
    <h1>Bienvenido a tu Bank E! :D</h1>
    <p>Aquí podrás retirar tu dinero de <strong>tu cuenta bancaria :)</strong></p>
    <p>
      <img src="cajerobanke.jpg" />
    </p>
    <h2>Por favor, ingresa la cantidad de dinero que quieres retirar en pesos colombianos:</h2>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
      <p>
        <br />
        <input type="button" value="Consultar Saldo" id="cantidad" />
        <input type="button" value="Refrescar Cajero" onclick="javascript:window.location.reload();"/>
      </p>
    </p>
    <p id="resultado"></p>
    <script src="cajero.js"></script>
  </body>
</html>

JavaScript

class Billete
{
  constructor(v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var imagenes = [];
imagenes["100000"] = "100mil.jpg";
imagenes["50000"] = "50mil.jpg";
imagenes["20000"] = "20mil.jpg";
imagenes["10000"] = "10mil.jpg";
imagenes["5000"] = "5mil.jpg";
imagenes["2000"] = "2mil.jpg";
imagenes["1000"] = "1mil.jpg";

var caja = [];
caja.push( new Billete(100000, 5) );
caja.push( new Billete(50000, 5) );
caja.push( new Billete(20000, 5) );
caja.push( new Billete(10000, 10) );
caja.push( new Billete(5000, 15) );
caja.push( new Billete(2000, 15) );
caja.push( new Billete(1000, 10) );

var entregado = [];

var dinero;
var div;
var papeles;

var cantidad = document.getElementById("cantidad");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);
cantidad.addEventListener("click", existencia);

function entregarDinero()
{
  resultado.innerHTML = "";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  for(var b of caja)
  {
    if(dinero > 0)
    {
      div = Math.floor(dinero / b.valor);

      if(div > b.cantidad)
      {
        papeles = b.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(b.valor, papeles) );
      dinero -= (b.valor * papeles);

      b.cantidad -= papeles;
    }
  }

  if(dinero > 0)
  {
    resultado.innerHTML = "Soy un cajero <strong>malo</strong>, he sido <strong>malo</strong> y no puedo darte esa cantidad :( <br /><hr />";
  }
  else
  {
    resultado.innerHTML += "<p>Retiraste:<br /></p>";

    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
        for(var bi = 1; bi <= e.cantidad ;bi++)
        {
          resultado.innerHTML += "<img src=" + e.imagen.src + " />" + "<br /><hr />";
        }
      }
    }
  }
}

function existencia()
{
  var total = 0;

  for(var bi of caja)
  {
    total += bi.valor * bi.cantidad;
  }
  alert("La cantidad actual de dinero es de " + total + "$COP");
}

Diego Ibanez

Actualice un poco el cajero y ahora funciona con la teclera de la pantalla, espero lo puedan ver.. revisen desde la misma pagina el codigo porque es muy largo, me falta mucho para optimizarlo, pero es algo

http://platzi.estudiowkl.com/nuevo/atmDiegoWKL.html

Jesús David Emiliano Reynoso Sarmiento

Después de días, me quedó así.
Me quedó medio feo pero es mío, y lo aprendido nadie me lo quita 😄

evi dukaba martinez

Cuando te enteras de que document.write es una mala práctica.
he vivido engañado toda mi vida =o

soydarius

Diseñé en Adobe Photoshop estos dibujos de billetes de Euros para el proyecto. Así que si alguien desea utilizarlos, siéntase libre de hacerlo:
https://imgur.com/aeplAc7
https://imgur.com/aL2M8tm
https://imgur.com/Qq8ZUfJ
https://imgur.com/XZ8wojE
https://imgur.com/WC47xkv

Carlos Gomez

Muy buenos los cursos, los tome por hobby y a las dos semanas desarrolle un programa en html para mi trabajo que busca las facturas que se van emitiendo, anterior a esto había que buscarlas en una carpeta de windows y era horrible por que ya hay mas de 1000, los compartí a mis compañeros de trabajo y les encanto y les sorprendió, gracias platzi la pase bien viendo este curso y nos facilito el trabajo en mi oficina xD

Diana_Sanchez

Después de varios días intentando resolver el reto, por fin lo tengo casi resuelto (aún me falta resolver unos detalles :’) gracias a todos los compañeros por sus aportes, me ayudaron mucho.
Les comparto a continuación un adelanto del proyecto, al inicio muestra la cantidad total de dinero disponible en el cajero, cuando se ingresa una cantidad a extraer, el dinero disponible se va reduciendo, hasta quedar en 0, hay un botón de Limpiar, sirve para realizar un nuevo retiro.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
    <style type="text/css">
    body
    {
      background-color: #9ad7df;
      font-size: 20px;
      font-family: "Times New Roman";
    }
    h1
    {
      font-size: 35px;
    }
    </style>
  </head>
  <body>
  <center>
    <h1>Cajero automático</h1>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer"/>
      <input type="button" value="Limpiar" id="limpiar"/>
    </p>
    <p id="disponible"></p>
    <p id="resultado"></p>
    <script type="text/javascript" src="cajero.js"></script>
    <script type="text/javascript" src="clase_billete.js"></script>
</center>
  </body>
</html>```

JS

var imagenes = [];
imagenes[“500”] = “500.jpg”;
imagenes[“100”] = “100.jpg”;
imagenes[“50”] = “50.jpg”;
imagenes[“20”] = “20.jpg”;
imagenes[“10”] = “10.jpg”;
imagenes[“5”] = “5.jpg”;
imagenes[“2”] = “2.jpg”;
imagenes[“1”] = “1.jpg”;

class Billete
{
constructor(valor, cantidad)
{
this.valor = valor;
this.cantidad = cantidad;
this.imagen = new Image();

this.imagen.src = imagenes[this.valor];
this.saldo = this.valor * this.cantidad;

}
}

var resultado = document.getElementById(“resultado”);
var extraer = document.getElementById(“extraer”);
extraer.addEventListener(“click”, entregarDinero);
var disponible = document.getElementById(“disponible”);
var sacar = document.getElementById(“limpiar”);
sacar.addEventListener(“click”, limpiarPagina);

var caja = [];
var entregado = [];
caja.push(new Billete(500, 10));
caja.push(new Billete(100, 15));
caja.push(new Billete(50, 20));
caja.push(new Billete(20, 30));
caja.push(new Billete(10, 25));
caja.push(new Billete(5, 20));
caja.push(new Billete(2, 15));
caja.push(new Billete(1, 10));

var dinero = 0;
var div = 0;
var papeles = 0;

var dineroDisponible;
function dineroTotal()
{
suma = 0;

for ( var j of caja)
{
suma = suma + j.saldo;
}
disponible.innerHTML = (“Dinero total disponible en el cajero: " + suma + " lps”);
dineroDisponible = suma;
}

function dineroActual()
{
if(dinero == 0)
{
for (var s of caja)
{
if (s.cantidad > 0)
{
dinero += (s.cantidad * s.valor);
}
}
}
disponible.innerHTML = (“Dinero disponible en el cajero: " + dinero + " lps”);
}

function limpiarPagina()//funcion para vaciar o limpiar la pagina con el boton limpiar
{
resultado.innerHTML = “”;
entregado.length = 0;
}

dineroTotal(); //Muestra la cantidad total de dinero disponible

function entregarDinero()//Al presionar el boton extraer se activa esta funcion
{
var caja_texto = document.getElementById(“dinero”);
dinero = parseInt(caja_texto.value);

dineroActual();//Muestra la cantidad disponible en el cajero cuando se retira dinero

if(dinero > dineroDisponible)
{
resultado.innerHTML = “Saldo en el cajero insuficiente para esta transacción”;
return;
}

for (var bi of caja)
{
if (dinero > 0 && dineroDisponible > 0)
{
div = Math.floor(dinero/bi.valor);
//console.log(div);
if(div > bi.cantidad)
{
papeles = bi.cantidad;
}
else
{
papeles = div;
}
entregado.push(new Billete(bi.valor,papeles));
dinero = dinero - (bi.valor * papeles);
bi.cantidad = bi.cantidad - papeles;
}
}

if (dinero > 0)
{
  resultado.innerHTML = "No hay suficiente dinero en el cajero";
}
else
{ //dibuja los billettes
  resultado.innerHTML = "Retiró: <br />";
  for (var e of entregado)
  {
      if(e.cantidad > 0)
      {
        resultado.innerHTML += e.cantidad + " billetes de " + e.valor + " lps <br />";
        resultado.appendChild(e.imagen);
        resultado.innerHTML += "<br />";
      }
  }
}
dineroActual()//Muestra la cantidad disponible en el cajero

}```

Miguel Alcarra

Hey everyone! Hice unos billetes al estilo pixelart bien divertidos.

Espero que les sea util. Saludos!

marcoaureliooviedovillena

Kerepakupai

Buenas. Les comparto mi código, incluí la librearía SweetAlert para mostrar algunos mensajes mas estéticos. En este cajero se puede retirar dinero y consultar el saldo, al extraer dinero se debe retirar del cajero para poder realizar otra transacción. Se puede retirar dinero mientras el cajero tenga dinero disponible. Se realizan una serie de validaciones (las cuales me gustaría mejorar en el código).

Luego mejorare el código, escucho propuestas de mejoras para aplicarlas. Pueden ver el codigo en funcionamiento en el siguiente link: https://jsfiddle.net/kerepakupai/hwLrasaz/

![](

Gustavo Daniel Franco Gonzalez

Apuntes en clase:

Caja de texto en HTML => Input type “text” : Alfanumérico
Input type “number” : Numérico solamente.

Siempre es importante ir probando el código a medida que se va escribiendo código, hacerse ese hábito con el fin de detectar con más facilidad los errores que se puedan presentar
Todas las cajas de texto tienen valores de texto, por mas que se ingresen números, por ello es necesario parsear el resultado si se desea trabajar con números.
ParseInt => Función nativa de JS que convierte el valor String a Int
Cast(Casteo) => Proceso de transformar una variable con un tipo de datos a otro.
Document.Write reescribe el código ya cargado anteriormente en el navegador a través de JS.
OnLoad=> Evento que ocurre cuando el navegador ha cargado la página por completo, luego de este evento se ejecuta otro llamado Close.
Open => Ocurre posterior al cierre del documento, en este evento solo se da prioridad al Document,write, es por este motivo que en el ejemplo anterior todo el contenido desaparece, dejando solamente en pantalla lo que está dentro del Document.write.
InnerHTML => La manera en que podemos controlar el contenido en HTML.
Operador += => Se utilizan en operaciones matemáticas, y se puede interpretar como que el valor de una variable es igual a su propio valor, mas el resto de la operación.
Operador -= => Se aplica el mismo concepto que el operador “+=”, solo que en este caso el valor es restado.

alvarohrv

– -- – -- – -- – -- – -- – --

Puedes testear mi cajero acá XD
cajeroautomaticoplatzi.alvarohrv.repl.co

Tiene mi propio motor para dispensar dinero
(aunque el de Freddy es mucho mas efectivo)
PeRo HeY! Lo HiCe SoLo! XD
nota: abuse del document.write pero no conocía el innerHTML.
(son cosas a mejora)

– -- – -- – -- – -- – -- – --

Koe

Veré este vídeo unas 3 veces más.

NaruJN

Youssef Abarca

Lo hice de tal manera que puedas usar la imagen para manipular el cajero, todo lo que esta en azul dentro de la forma azul se puede usar como botones.

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero Automático</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" usemap="#workmap" />
      <map name="workmap">
        <area shape="rect" coords="60,178,77,189" id="Uno">
        <area shape="rect" coords="82,178,97,189" id="Dos">
        <area shape="rect" coords="102,178,120,189" id="Tres">
        <area shape="rect" coords="58,192,75,204" id="Cuatro">
        <area shape="rect" coords="80,192,98,204" id="Cinco">
        <area shape="rect" coords="102,192,121,204" id="Seis">
        <area shape="rect" coords="55,208,73,222" id="Siete">
        <area shape="rect" coords="79,208,99,222" id="Ocho">
        <area shape="rect" coords="102,208,122,222" id="Nueve">
        <area shape="rect" coords="77,226,98,241" id="Cero">
        <area shape="rect" coords="127,178,146,189" id="Borrar">
        <area shape="rect" coords="128,192,149,204" id="Cancelar">
        <area shape="rect" coords="130,208,151,222" id="Enter">
      </map>
    </p>
    <p id="saldo"></p>
    <p id="cantidad">"Cuando dinero desea retirar"</p>
    <p id="resultado"></p>
    <p id="fotos"></p>
    <script type="text/javascript" src="cajero.js"></script>
  </body>
</html>

class Billete
{
  constructor(valor, cantidad, nombre)
  {
    this.imagen = new Image();
    this.valor = valor;
    this.cantidad = cantidad;
    this.nombre = nombre;
    this.imagen.src = imagenes[this.nombre]
  }
}

var imagenes = [];
imagenes["cincuenta"]="cincuenta.jpg";
imagenes["veinte"]="veinte.jpg";
imagenes["diez"]="diez.jpg";
imagenes["cinco"]="cinco.jpg";

var caja = [];

caja.push(new Billete(50, 10, "cincuenta"));
caja.push(new Billete(20, 20, "veinte"));
caja.push(new Billete(10, 30, "diez"));
caja.push(new Billete(5, 50, "cinco"));

var totalDinero = 0;
var digitos = "";

var resultado = document.getElementById("resultado");
var cantidad = document.getElementById("cantidad");
var saldo = document.getElementById("saldo");
var foto = document.getElementById("fotos");

dineroDisponible();

//BOTONES DEL TECLADO
var bUno = document.getElementById("Uno");
bUno.addEventListener("click", escribirUno);
function escribirUno(){digitos += "1"; cantidad.innerHTML = digitos;}

var bDos = document.getElementById("Dos");
bDos.addEventListener("click", escribirDos);
function escribirDos(){digitos += "2"; cantidad.innerHTML = digitos;}

var bTres = document.getElementById("Tres");
bTres.addEventListener("click", escribirTres);
function escribirTres(){digitos += "3"; cantidad.innerHTML = digitos;}

var bCuatro = document.getElementById("Cuatro");
bCuatro.addEventListener("click", escribirCuatro);
function escribirCuatro(){digitos += "4"; cantidad.innerHTML = digitos;}

var bCinco = document.getElementById("Cinco");
bCinco.addEventListener("click", escribirCinco);
function escribirCinco(){digitos += "5"; cantidad.innerHTML = digitos;}

var bSeis = document.getElementById("Seis");
bSeis.addEventListener("click", escribirSeis);
function escribirSeis(){digitos += "6"; cantidad.innerHTML = digitos;}

var bSiete = document.getElementById("Siete");
bSiete.addEventListener("click", escribirSiete);
function escribirSiete(){digitos += "7"; cantidad.innerHTML = digitos;}

var bOcho = document.getElementById("Ocho");
bOcho.addEventListener("click", escribirOcho);
function escribirOcho(){digitos += "8"; cantidad.innerHTML = digitos;}

var bNueve = document.getElementById("Nueve");
bNueve.addEventListener("click", escribirNueve);
function escribirNueve(){digitos += "9"; cantidad.innerHTML = digitos;}

var bCero = document.getElementById("Cero");
bCero.addEventListener("click", escribirCero);
function escribirCero()
{
  if(digitos != "")
  {
    digitos += "0"
    cantidad.innerHTML = digitos;
  }
}

var bBorrar = document.getElementById("Borrar");
bBorrar.addEventListener("click", borrarDigito);
function borrarDigito()
{
  if(digitos != "")
  {
    digitos = digitos.slice(0,-1);  //elimina elementos de un string
    cantidad.innerHTML = digitos;
  }
  else
  {
    limpiar();
  }
}

var bCancelar = document.getElementById("Cancelar");
bCancelar.addEventListener("click", limpiar);
function limpiar()
{
  digitos = "";
  cantidad.innerHTML = digitos;
  cantidad.innerHTML = "\"Cuando dinero desea retirar\"";
  resultado.innerHTML = "";
  foto.innerHTML = "";
}

var bEnter = document.getElementById("Enter");
bEnter.addEventListener("click", entregarDinero);
//FIN BOTONES

function entregarDinero()
{
  var div;
  var papeles;
  var entregado = [];

  if(digitos != "")
  {
    var dinero = parseInt(digitos);
    entregado = [];

    for(var billete of caja)
    {
      if (dinero > 0)
      {
        div = Math.floor(dinero / billete.valor);
        if(div > billete.cantidad)
        {
          papeles = billete.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push(new Billete(billete.valor, papeles, billete.nombre));
        dinero = dinero - (billete.valor * papeles);
      }
    }

    limpiar();

    if (totalDinero == 0)
    {
      resultado.innerHTML = "No hay saldo disponible";
    }
    else if(dinero > totalDinero)
    {
      resultado.innerHTML = "No te puedo entregar esa cantidad!";
    }
    else if(dinero == 0)
    {
      for (var e in entregado)
      {
        if(entregado[e].cantidad > 0)
        {
          resultado.innerHTML += entregado[e].cantidad + " Billetes de $ " + entregado[e].valor + "<br />"
          resultado.appendChild(entregado[e].imagen)
          resultado.innerHTML += "<br />"
          caja[e].cantidad = caja[e].cantidad - entregado[e].cantidad;
        }
      }
      dineroDisponible();
    }
    else
    {
      resultado.innerHTML = "Imposible procesar tu transacción!";
    }
  }
}

function dineroDisponible()
{
  totalDinero = 0;
  for(var billete of caja)
  {
    totalDinero += billete.valor * billete.cantidad;
  }
  saldo.innerHTML = "El cajero dispone de: " + totalDinero;
}

Carlos Arturo Abril Triviño

Ivorales

Wow! después de tantos días por fin se logró el objetivo, el código emite tres alarmas.

cuando un número no es múltiplo de 10.
cuando se ingresa un monto mayor al saldo disponible en caja
cuando el cajero se queda sin dinero.

Cualquier sugerencia para perfeccionarlo o mejorarlo será bien recibida…

Isaac Hernandez Resendiz

Fue un poco complicado pero lo logre.
A quí dejo mi aporte.
A todos a quellos que les este costando, les digo que esa frustración que sientan esa sensación de no saber por que no funciona. No desesperen, el camino es un poco complicado, pero crean que la satisfacción de a ver lo logrado es muy grande.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
  </head>
  <body>
    <p>
      <img src = "cajero.gif" />
      </p>
      <h1 id = "sobrante"></h1>
      <p>
        <input type = "number" id = "dinero" />
        <input type = "button" value = "EXTRAER" id =  "extraer" />
        </p>
        <p id="resultado"></p>
        <script src ="cajero.js" ></script>

  </body>
</html>

`class Billete
{
  constructor( n, v, c)
  {
    this.nombre = n;
    this.valor = v;
    this.cantidad = c;

  }

}

var efectivo = 0;
var caja = [];
var entregado = [];

caja.push(new Billete ("100",100,20) );
caja.push( new Billete ("50",50,20) );
caja.push( new Billete ("20",20,40) );
caja.push( new Billete ("10",10,100) );

var imagenes = [];
imagenes["100"] = "billete100.png";
imagenes["50"] = "billete50.png";
imagenes["20"] = "billete20.png";
imagenes["10"] = "billete10.png";



var dinero;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer") ;
b.addEventListener("click",entregarDinero);
document.addEventListener("keydown",clean);
var resto = document.getElementById("sobrante");
var extraer = 0;

for(var i of caja){
  efectivo += i.valor * i.cantidad;
}

resto.innerHTML = "Efectivo disponible : " + efectivo;

function entregarDinero()
{

  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

 for(var bi of caja)
 {

   if(dinero > 0)
   {
     div = Math.floor(dinero / bi.valor)
     if( div > bi.cantidad)
     {
       papeles = bi.cantidad;
     }

     else
       {
         papeles = div;
       }

        entregado.push(new Billete(bi.valor, papeles) );
        dinero = dinero - (bi.valor * papeles);
        extraer += bi.valor * papeles;
     }

   }

   if(dinero > 0 || efectivo < extraer )
   {
    resultado.innerHTML = "Soy un cajero malo y no puedo darte esa cantidad";
    console.log(dinero, " ", efectivo, " ", extraer);
    extraer = 0;
   }

   else
   {
      efectivo -= extraer;
     for(var e of entregado)
     {

         for(var i = e.valor; i > 0; i--)
         {
           resultado.innerHTML += "<img src = "+ imagenes[e.nombre]+ " />"+ "  ";
         }
         resultado.innerHTML += "<br />";
         resto.innerHTML = "Efectivo disponible : "+ efectivo;
         console.log(dinero, " ", efectivo, " ", extraer);
     }
     extraer = 0;

   }

   entregado = [];

 }

function clean()
 {
      resultado.innerHTML = " ";
}

Frank Cedeño

http://blesska.me/atm Por aqui mi aporte del Curso

Edwin Andres Roman Henao

https://imgur.com/deLUXCb Captura de pantalla 2020-04-12 17.46.53.png

Diego Romero

Envés de billetes son dogecoins.
Captura de pantalla (317).png

Intenten actualizar el código para que aparezca el saldo debajo de la imagen del banco sin los dogecoins y no con un alert. Se los agradecería mucho !!

<code> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body
      {
        background-color: "black";
        color: "white";
        font-family: Helvetica;
      }
    </style>
    <title>Cajero Automatico</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number"  id="dinero" />
      <input type="button" value="extraer" id="extraer"/>
      <input type="button" value="Saldo" id="saldo" />
    </p>
    <p id="resultado"> </p>
    <script type="text/javascript" src="cajero.js" id="entregado" > </script>
  </body>
</html>

<code> 
class Billete
{
  constructor(v, c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  for(var bi of caja)
  {

    if(dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);

      if(div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }

      entregado.push( new Billete(bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad -=  papeles
    }

  }

  if(dinero > 0)
  {
    resultado.innerHTML = "Soy un cajero malo, he sido malo y no puedo darte esa cantidad :(";
  }
  else
  {
    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
          resultado.innerHTML = resultado.innerHTML + "<strong>" + e.cantidad + " dogecoin de $ " + e.valor + "</strong>" + "<br />"; //innerHTML nos permite leer un dato o asignarlo al contenido a una etiqueta definida en HTML. Nos facilita la asignación de valores.
          for(var d=1; d<=e.cantidad; d++)
          {
            resultado.innerHTML += "<img src=" + e.imagen.src + " />" + "<br />";
          }
      }
    }
  }
}

function cosultarSaldo()
{
  let total = 0;

  for(var bi of caja)
  {
    total = total + bi.valor * bi.cantidad;
  }
  alert("Tu saldo es de : " + total + " dogecoins");
}
var caja = [];
var imagenes = [];
var entregado = [];
imagenes[100] = "dogeCoin.png";
imagenes[50] = "dogeCoin.png";
imagenes[20] = "dogeCoin.png";
imagenes[10] = "dogeCoin.png";
imagenes[5] = "dogeCoin.png";

caja.push( new Billete(100, 5) );
caja.push( new Billete(50, 5) );
caja.push( new Billete(20, 5) );
caja.push( new Billete(10, 5) );
caja.push( new Billete(5, 20) );

var dinero = 0;
var div = 0;
var papeles = 0;
var saldo = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
saldo.addEventListener("click", cosultarSaldo);
b.addEventListener("click", entregarDinero);

Francisco Zárate

Espero les ayude Para agregar las imagenes de su elección solo introduzcan el link como tercer parametro de entrada en:
caja.push(new Billete(50, 20, “cincuenta-pesos.jpg”));
Éxito

class Billete {
    constructor(v, c, l) {
        this.valor = v;
        this.cantidad = c;
        this.link = l;
    }
}

function entregarDinero() {
    var x = 0;
    var t = document.getElementById("dinero");
    dinero = parseInt(t.value);

    //reinicia el array "entregado", borrando todos los elementos
    entregado.splice(0, entregado.length);

    for (var bi of caja) {
        if (dinero > 0) {
            div = Math.floor(dinero / bi.valor);
            if (div > bi.cantidad) {
                papeles = bi.cantidad;
            }
            else {
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles, bi.link));
            dinero = dinero - (bi.valor * papeles);
            // Aqui se actualiza el valor de la caja
            caja[x] = new Billete(bi.valor, (bi.cantidad - papeles), bi.link);
            x++;
            //Aqui se llama la funcion que dibuja los billetes, parametros: ¿Qué billete? y ¿Cuántos dibujo?
            dibujarBillete(bi, papeles);
        }
    }
    if (dinero > 0) {
        resultado.innerHTML = "Soy un cajero malo, he sido malo y no puedo darte esa cantidad :(";
    }
    else {

        for (var e of entregado) {
            resultado.innerHTML += e.cantidad + " billetes de $ " + e.valor + "<br>";
        }
    }

    console.log("Este es el total: " + calcularTotal());
}

var caja = [];
var entregado = [];
caja.push(new Billete(50, 20, "cincuenta-pesos.jpg"));
caja.push(new Billete(20, 25, "veinte-pesos.jpg"));
caja.push(new Billete(10, 10, "diez-pesos.jpg"));

function dibujarBillete(elBillete, numBilletes) {

    for (x = 0; x < numBilletes; x++) {
        imagen = new Image();
        imagen.src = elBillete.link;
        document.body.appendChild(imagen);
    }
}

function calcularTotal() {
    var res = 0;
    for (ele of caja) {
        res += (ele.valor * ele.cantidad);
    }
    return (res);
}

var dinero;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);```

Hector Francisco Medina Garnica

Javier Eduardo Morón Mendoza

Me tardé pero me siento orgulloso jajaja

Henry Corredor

a mi ese cubo rubik desarmado me da anciedad >_<

juankipedia

HOLA, espero que se encuentren bien, el algoritmo tiene dos errores los cuales si bien no son graves son semánticos y deben ser corregidos si se quiere tener una mejor implementación de un cajero. El primero es que la cantidad de billetes entregados no está siendo restado le la cantidad de billetes disponibles de la caja del cajero, es decir si el cajero posee 50 billetes de 100$ y se le retiran 30 la caja debería contener ahora 20 billetes de 100$ en el algoritmo actual no toma dicha consideración.
el segundo error es consecuencia del segundo y es que no se está viendo el algoritmo para ser utilizado más de una vez en el refresco de página si no que se está viendo de modo que cada vez que se quiera utilizar el cajero se debe refrescar la página lo cual considero es una mala implementación, es por esto que cuando se le piden al cajero montos incorrectos de dinero ya sea que sobre pasen el límite de dinero disponible o sea una cantidad que no pueda ser dispensada, el algoritmo entrega la cantidad de dinero hasta donde puede es decir, si actualmente el cajero contiene 200$ y se le piden 300$ el algoritmo advierte del error pero entrega los 200$ que están en existencia, lo cual semánticamente es incorrecto ya que en la vida real si se ingresa un monto invalido el cajero simplemente no dispensa nada, esos son los errores que encontré, pido disculpas si me extendí un poco jejej.
saludos.

javierbravorey

Finalmente después de algún tiempo, me tomo más de lo que esperaba, y creo que yo mismo me fui alargando el proyecto. Les explico lo que hice adicional:

Validar antes de realizar la entrega de billetes, es decir que el array entregado este vacío:
a. Validar si la cantidad a retirar es mayor que lo disponible.
b. Validar si la cantidad es mayor de cero
c. Verificar si se tienes billetes divisibles para la cantidad a retirar, encontrando un MCD. Y aplicando la función “es divisible”
Ingresar las cantidades en caja, por medio del usuario.
Llenar el arreglo de entregado, solo cuando la cantidad de billetes es mayor a cero.
Colocar en plural o singular la palabra billete según corresponda a la cantidad.

<
var imagenes = [];
imagenes["bill100"] = "bi100.png";
imagenes["bill50"] = "bi50.png";/// esto es un array asociativo
imagenes["bill20"] = "bi20.png";
imagenes["bill10"] = "bi10.png";

class Billete
{
  constructor (n, v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.nombre = n;
    this.imagen = new Image ();
    this.imagen.src = imagenes[this.nombre];
  }
}

var mensajeInicio = alert("BIENVENIDO AL CAJERO BANCO JJBR" + "\n" + "Configure los valores iniciales disponible en el cajero" + "\n" + "Ingrese desde 0 en adelante");
var x100 = prompt("Ingrese la cantidad de billetes de $100: ");
var x50 = prompt("Ingrese la cantidad de billetes de $50: ");
var x20 = prompt("Ingrese la cantidad de billetes de $20: ");
var x10 = prompt("Ingrese la cantidad de billetes de $10: ");

var entregado = [];
var caja = [];
caja.push(new Billete("bill100",100,x100));
caja.push(new Billete("bill50",50,x50));
caja.push(new Billete("bill20",20,x20));
caja.push(new Billete("bill10",10,x10));

var repetir = true;
var dineroPorEntregar = 0;
var div = 0;
var papeles = 0;
var total = 0;
var consulta = true;
var consultaEntregado = false;
var saldoActual;

var disponible = document.getElementById("disponible");
//var billetera = document.getElementById("billetera");
var resultado = document.getElementById("resultado");
var b = document.getElementById("retirar");
var c = document.getElementById("dineroEnCajero");
b.addEventListener("click", saldoEnCaja);
c.addEventListener("click", saldoDisponible);

function saldoDisponible()
{
  var saldoInicial;
  var totalEntregado = 0;

  if (consulta)
  {
    total = 0;
    for (var h of caja)
    {
      total = total + (h.valor * h.cantidad);
    }

    if (consultaEntregado)
    {
      for (var z of entregado)
      {
        totalEntregado = totalEntregado + (z.valor * z.cantidad);
      }
    }
    else
    {
      totalEntregado = 0;
    }

    saldoInicial = total - totalEntregado;
    saldoActual = saldoInicial;
  }

  disponible.innerHTML = "Disponible: $" + saldoInicial;
  //consulta = false;
}

function saldoEnCaja()
{
  var t = document.getElementById("dinero");
  dineroPorEntregar = parseInt(t.value);
  console.log("Saldo Actual : " + saldoActual);

  if (saldoActual == 0)
  {
    resultado.innerHTML = "Lo sentimos, al momento no hay dinero disponible " + "</br>";

  }
  else
  {
    if (saldoActual < dineroPorEntregar)
      {
        resultado.innerHTML = "No disponemos de la cantidad solicitada, ingrese con una cantidad inferior a $: " + saldoActual + "</br>";
      }
    else
      {
        if(esDivisible(dineroPorEntregar,5) && esDivisible(dineroPorEntregar,2))
          {
            entregarDinero();
          }
        else
          {
            resultado.innerHTML = "No hay billetes en esa denominación" + "</br>";
          }
      }
  }

}//FIN FUNCION

function esDivisible(num, divisor)
{
  if ( num % divisor == 0)
  {
    return true; // retorna el valor de la funcion
  }
  else
  {
    return false; // una funcion muere en el return
  }
}

function entregarDinero()
{
  var dineroEntregado = dineroPorEntregar;

  for (var bi of caja)
  {
    div = Math.floor(dineroEntregado / bi.valor);

      if(div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }

      if (div != 0)
      {
        entregado.push(new Billete(bi.nombre, bi.valor, papeles));
      }

      dineroEntregado = dineroEntregado - (bi.valor * papeles);
  }

    for ( var e of entregado)
    {
      if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " Billete de $" + " : " + "<img src=" + e.imagen.src + "></img>" + "<br />";
      }
      else
      {
        resultado.innerHTML += e.cantidad + " Billetes de $" + " : " + "<img src=" + e.imagen.src + "></img>" + "<br />";

        /*for (var i = 1; i <= e.cantidad; i++)
        {
          resultado.innerHTML +="<img src=" + e.imagen.src + "></img>" + "   ";
        }
        resultado.innerHTML += "<br />";*/
        resultado.innerHTML += "</ hr>";
      }

    }
      consultaEntregado = true;
      saldoDisponible();
}//FIN DE FUNCION
>

javi pinilla

Por fin, he conseguido sacarlo… lo dejo por aqui.

class Billete
{
  constructor(v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var imagenes = [];
imagenes[200] = "Billete200.gif";
imagenes[100] = "Billete100.gif";
imagenes[50] = "Billete50.gif";
imagenes[20] = "Billete20.gif";
imagenes[10] = "Billete10.gif";
imagenes[5] = "Billete5.gif";

function entregarDinero()
{
  var entregado = [];
  var t = document.getElementById("operacion");
  dinero = parseInt(t.value);
  if (dinero > efectivoT)
  {
    resultado.innerHTML += "No hay tanto efectivo. <br/>";
  }
  else if ( dinero % caja[caja.length -1].valor != 0)
  {
    resultado.innerHTML += "Escribe una cantidad multiplo de " + caja[caja.length -1].valor + " <br/>";
  }
  else
  {
    efectivoT = efectivoT - dinero;
    mostrarEfectivo.innerHTML = "Maximo en efectivo: " + efectivoT + "€" + "<br/>" ;

    for(var b of caja)
    {
      if (dinero > 0)
      {
        div = Math.floor(dinero / b.valor);
        if (div > b.cantidad)
        {
          papeles = b.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push(new Billete(b.valor, papeles));
        dinero = dinero - (b.valor * papeles);
        b.cantidad = b.cantidad - papeles;
      }
    }

    for(var e of entregado)
    {
      if(e.cantidad>0)
      {
        resultado.innerHTML += e.cantidad + " billetes de " + e.valor + "€" + "<br/>";
        resultado.appendChild(e.imagen);
        resultado.innerHTML += "</br>";
      }
    }
  }

  resultado.innerHTML += "<hr/>";
}

var caja = [];
caja.push(new Billete(200, 5));
caja.push(new Billete(100, 10));
caja.push(new Billete(50, 20));
caja.push(new Billete(20, 50));
caja.push(new Billete(10, 100));
caja.push(new Billete(5, 200));

var dinero = 0;
var div = 0;
var papeles = 0;
var efectivoT =0;

for(var b of caja)
{
  var efectivo = b.valor * b.cantidad;
  efectivoT = efectivoT + efectivo;
}

var resultado = document.getElementById("resultado");
var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

mostrarEfectivo.innerHTML = "Maximo en efectivo: " + efectivoT + "€" + "<br/>" ;

Luis Alberto Luisjuan Guerrero

¿Han probado poner ordenar los billetes de manera diferente? Parece que el ciclo se repite en el orden que nosotros ponemos los billetes y si no lo ponemos en orden de mayor a menor las cosas se rompen.

caja.push( new Billete(20, 10));
caja.push( new Billete(50, 30));
caja.push( new Billete(100, 20));

Roy Roger Martinez Cano

voy dejando las imagenes de las denominaciones que ocupe

Por aqui dejo el html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cajero automatico</title>
    <link rel="stylesheet" href="static/style/style.css">
</head>
<body>
    <h2>Cantidad de billetes disponibles en el ATM</h2>
    <p id="billetesCaja"></p>
    <p>
        <img src="static/img/cajero.gif"/>
    </p>
    <p>
        <input type="number" id="txtEfectivo"/>
        <input type="button" id="btnCajero" value="Retirar del cajero"/>
    </p>
    <br/>
    <p id="resultado"></p>
    <script src="static/script/script.js"></script>
</body>
</html>

aqui esta el CSS:

h1{
    color:red;
}
h2{
    color: red;
}

y finalmente aqui esta mi Javascript:

imagenes=[]
imagenes["1000"]="static/img/billetes/Mil.png";
imagenes["500"]="static/img/billetes/Quinientos.png";
imagenes["200"]="static/img/billetes/Doscientos.png";
imagenes["100"]="static/img/billetes/Cien.png";
imagenes["50"]="static/img/billetes/Cincuenta.png";
imagenes["20"]="static/img/billetes/Veinte.png";
imagenes["10"]="static/img/billetes/Diez.png";

//clase billete que guarda la denominacion(valor) y la cantidad(cantidad)
class Billete{
    //constructor de la clase
    constructor(valor,cantidad){
        this.img = new Image();
        this.valor= valor;
        this.cantidad= cantidad;
        this.img.src = imagenes[this.valor];
    }
    //para mostrar los billetes entregados del cajero
    mostrar(){
        resultado.innerHTML = resultado.innerHTML+"<p>";
        resultado.innerHTML = resultado.innerHTML+"<strong>Cantidad : "+ this.cantidad +"</strong><br />";
        resultado.innerHTML = resultado.innerHTML+"Valor   : "+ this.valor +"<hr />";
        resultado.innerHTML = resultado.innerHTML+"</p>";
        resultado.innerHTML = resultado.innerHTML+"<img src='"+this.img.src+"' />";
    }
    //para mostrar los billetes que contiene el cajero
    mostrarCaja(){
        billetesCaja.innerHTML = billetesCaja.innerHTML+"<p>";
        billetesCaja.innerHTML = billetesCaja.innerHTML+"<strong>Billete : "+ this.valor +"</strong><br />";
        billetesCaja.innerHTML = billetesCaja.innerHTML+"Cantidad   : "+ this.cantidad;
        billetesCaja.innerHTML = billetesCaja.innerHTML+"</p>";
    }
}
//arreglo de "cajero automatico"(caja) y Retiro(retiro) que es la cantidad de billetes que lanzara el cajero
var unidadesBillete = 3;
var denominaciones=[1000,500,200,100,50,20,10];
var caja = [];
var retiro = [];

//Obteniendo los datos de input y del buttom
var txtCantidad = document.getElementById("txtEfectivo");
var btnEfectivo = document.getElementById("btnCajero");
var billetesCaja = document.getElementById("billetesCaja");
var resultado = document.getElementById("resultado");

//Añadiendo los billetes a nuestro "cajero automatico"(caja)
for (billete of denominaciones){
    caja.push(new Billete(billete,unidadesBillete));
}

//funcion para sumar lo que hay en caja
function disponibleCaja(){
    var sumatoria =0;
    for(billete of caja){
        sumatoria += billete.valor*billete.cantidad;
    }
    return sumatoria;
}


//para mostrar los billetes disponibles en caja luefo de eso la invocamos para la pantalla incial
function mostrarBilletesCaja(){
    var totalCaja = disponibleCaja();
    billetesCaja.innerHTML += "Total en ATM: "+totalCaja;
    for (billete of caja){
        billete.mostrarCaja();
    }
}
mostrarBilletesCaja();

//para mostrar los billetes retirados del cajero
function mostrarBilletesRetiro(){
    for(billete of retiro)
        billete.mostrar();
}
//Añadir escuchador del boton
btnEfectivo.addEventListener("click",mostrarEfectivo);

//para limpiar los resultado de los billetes
function limpiarResultado(){
    resultado.innerHTML = "";
    billetesCaja.innerHTML = "";
}

//funcion del evento click del boton
function mostrarEfectivo(event){
    var dinero = parseInt(txtCantidad.value);
    retiro = calculoBillete(dinero);
    limpiarResultado();
    if (retiro.length == 0){
        resultado.innerHTML= "Lo siento no puedo retirar esa cantidad";
    }
    mostrarBilletesRetiro();
    mostrarBilletesCaja();
}

//funcion que devuelve la minima cantidad de billete
function calculoBillete(dinero){
    var vuelto =[];
    var totalCaja = disponibleCaja();
    if (totalCaja>=dinero){//si el total del cajero tiene mas que el dinero solicitado
        for(billete of caja){
            if(dinero>0){
                var dineroBillete = Math.floor(dinero/billete.valor)//sacar la cantidad de billetes correspondiente
                if(dineroBillete < billete.cantidad){
                    papeles = dineroBillete;
                }
                else{
                    papeles = billete.cantidad;
                }
                if(papeles>0)
                  vuelto.push(new Billete(billete.valor,papeles));//poner en el arreglo de objetos el billete y su cantidad para el vuelto
                dinero = dinero-(billete.valor*papeles);//para ir restando la cantidad de billete entregado
                billete.cantidad = billete.cantidad-papeles;
            }
        }
    }
    if (dinero>0){//si al final quedo el dinero en el cajero quiere decir que el cajero no completo la operacion
        return [];
    }
    else{//en caso contrario retornamos los billetes
        return vuelto;
    }
}

IsraelBarreras

Mi resultado:

class Billete {
  constructor(v, c, url)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = url;
  }
};

function extraerDinero()
{
 var entregado = [];
 var c = document.getElementById("dinero");
 cantidad = parseInt(c.value);

 for(var denominacion of caja)
 {
   var papel = 0;
   while(cantidad >= denominacion.valor && denominacion.cantidad > papel)
   {
     cantidad -= denominacion.valor;
     papel++;
   }
   entregado.push(new Billete(denominacion.valor, papel, denominacion.imagen.src));
 }

 if(cantidad > 0)
 {
   resultado.innerHTML += "No se puede entregar esta cantidad con los billetes existentes <br/>"
 }
 else
 {
  var x = 0;
  resultado.innerHTML += ("No olvide tomar su dinero: <br/>");
  for (var b of entregado)
  {
   caja[x++].cantidad -= b.cantidad;
   if(b.cantidad > 0)
   {
     for(var i = 0; i < b.cantidad; i++)
     {
       resultado.innerHTML += "<img src=" + b.imagen.src + "></img>";
     }
     resultado.innerHTML += ("</br>");
   }
  }
 }
  resultado.innerHTML += ("<hr/>");
  restante.innerHTML = "<strong>Dinero disponible: " + calcularRestante() + "</strong>";
}

var caja = [];
caja[0] = (new Billete(50,10,"cincuenta.png"));
caja[1] = (new Billete(20,10,"veinte.png"));
caja[2] = (new Billete(10,10,"diez.png"));

var papel = 0;

var resultado = document.getElementById("resultado");

var restante = document.getElementById("restante");
restante.innerHTML = "<strong>Dinero disponible: " + calcularRestante() + "</strong>";

var b = document.getElementById("extraer");
b.addEventListener("click", extraerDinero);

function calcularRestante()
{
  var total = 0;
  for(var b of caja)
  {
    total += b.valor * b.cantidad;
  }
  return total;
}

Alejandro Tangarife Rivas

Hola, un pro tip pequeño para ustedes 😄.

En HTML la forma más recomendada para dibujar imagenes en una página es con la etiquete <figure>

<body>

	<figure>
		<img src="direcciónImagen" alt="textoAlternativo">
	</figure>

</body>

Gabriel De Jesus Gomez Barrios

Comparto mi resultado, la verdad fue un muy buen desafío.
Dejo mis platzi coins por si alguien los quiere usar.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
  </head>
  <body>
    <p>
      <<img src="cajero.gif" "\n" />
    </p>
    <p id="saldo"></p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
    </p>
    <p id="resultado"></p>
    <script src="cajero.js" type="text/javascript"></script>
  </body>
</html>

var imagenes = [];
imagenes["100"] = "platziCoins100.png";
imagenes["50"] = "platziCoins50.png";
imagenes["20"] = "platziCoins20.png";
imagenes["10"] = "platziCoins10.png";//carga de imagenes por array

class Billete
{
  constructor( v, c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero()
{
  var dinero = 0;
  var div = 0;
  var papeles = 0;
  var total = 0;
  var divAux = 0;
  resultado.innerHTML = null;
  saldo.innerHTML ="";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  divAux = dinero % 10;

  for (var t of caja) //cuento la cantidad total de dinero en el cajero
  {
      total +=  t.cantidad*t.valor;
    }

  if (divAux == 0) //valido las cantidades que puede operar el cajero
  {
    for (var bi of caja)
    {
      if (dinero > 0 & dinero <= total) //valido que el dinero sea menor que el total para evitar repeticiones
      {
        div = Math.floor(dinero / bi.valor);
        if ( div > bi.cantidad)
        {
          papeles = bi.cantidad;
          bi.cantidad = 0;
          total = total - (papeles * bi.valor);
        }
        else
        {
          papeles = div;
          bi.cantidad = bi.cantidad - div;
          total = total - papeles * bi.valor;
        }//siempre actualizo el total y la cantidad de billetes(directamente en caja)

        entregado.push ( new Billete( bi.valor, papeles));
        dinero -= (bi.valor * papeles);
      }
      saldo.innerHTML += "quedan " + bi.cantidad + " billetes de " + bi.valor + "<br>"; //imprimo con el mismo for la cantidad restante
    }
  }

  if (dinero > 0)// acá entera tambien cuando es un numero invalido
  {
      saldo.innerHTML ="";//es importante para limpiar la pagina y no se repita informacion
      for (var bi of caja)
      {
        saldo.innerHTML += "quedan " + bi.cantidad + " billetes de " + bi.valor + "<br>";
      }
      resultado.innerHTML ="Saldo imposible de extraer";
      saldo.innerHTML += "</br>"+"Saldo disponible: " + total + "</br>";
  }

  else
  {
    for (var e of entregado)// acá se imprimen los billetes correctos
    {
      if (e.cantidad > 0)
      {
        resultado.innerHTML += e.cantidad + " <img src=" + e.imagen.src + " />";
      }
    }
    saldo.innerHTML +="</br>"+ "Saldo disponible: " + total + "</br>";// se actuliza el saldo
  }
  console.log(resultado.innerHTML);
}

var caja = [];
var entregado = [];
caja.push( new Billete(100, 10));//carga de billetes
caja.push( new Billete( 50, 20));
caja.push( new Billete( 20, 30));
caja.push( new Billete( 10, 40));

var saldo = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);//definicion de campos y accion de lanzamiento```

Angelo Paul Yenque Tume

Imprimir billetes en imágenes ✓
Extraer dinero y cuanto dinero queda ✓

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cajero de Billetes y Monedas</title>
</head>
<body>
    <p id="saldoId"> </p>
    <p><img src="cajero_auto.jpg" width="350" height="350"></p>
    
    <p>
        <input type="number" id="dinero">
        <input type="button" value="Extraer" id="extraer">
    </p>
    <p>---------- Historico de retiros ------------- </p>
    
    <p id="resultadoId">  </p>
    <p id="horarioId"> </p>
    <script src="cajeroreto.js"></script>
</body>
</html>

Js:


var imagenes =[];

imagenes["valor200"] ="billete200.png";
imagenes["valor100"] ="billete100.png";
imagenes["valor50"] ="billete50.png";
imagenes["valor20"] ="billete20.png";
imagenes["valor10"] ="billete10.png";
imagenes["valor5"] ="moneda5.png";
imagenes["valor2"] ="moneda2.png";
imagenes["valor1"] ="moneda1.png";


class Billete
{
    constructor(valor,cantidad)
    {   
        this.valor = valor;
        this.cantidad = cantidad;
        this.imagen = new Image();
        this.imagen.src = imagenes["valor" + this.valor];
    }

    mostrar()
    { 
        document.body.appendChild(this.imagen); // se agrega la etiquta img .. a la etiqueta body
    }
    
    devolvertipo()
    {
        if(this.valor >= 10)
        {
            return "Billete";
        }
        else
        {
            return "Moneda";
        }
    }
    
}




var caja =[];
var entregado = [];
var dinero;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("resultadoId");
var saldo = document.getElementById("saldoId");
var horario = document.getElementById("horarioId");

var b = document.getElementById("extraer");
b.addEventListener("click",entregarDinero);
b.addEventListener("click",reiniciarBoton);


t = document.getElementById("dinero")

caja.push(new Billete(200,15));
caja.push(new Billete(100,15));
caja.push(new Billete(50,15));
caja.push(new Billete(20,20));
caja.push(new Billete(10,20));
caja.push(new Billete(5,20));
caja.push(new Billete(2,20));
caja.push(new Billete(1,20));

var saldoCaja = sumaCaja(caja);
saldo.innerHTML = ("<strong> Saldo actual del cajero: " + saldoCaja + "<hr>");
console.log(caja);


function reiniciarBoton()
{
    t.value = null;

}


function entregarDinero() 
{
    dinero = parseInt(t.value);
    var dineroTemp = dinero;
    var hora = devolverHora();
   for (var bi of caja)
    {
        if (dinero > 0)
        {
            div = Math.floor(dinero / bi.valor);

            if(div > bi.cantidad)
            {
                papeles = bi.cantidad;
            }
            else
            {
                papeles = div;
            }

            entregado.push(new Billete(bi.valor,papeles));
            dinero = dinero - (bi.valor*papeles);
        }

    }

    if(dinero > 0)
    {
        resultado.innerHTML +="<h1> Saldo insuficiente </h1>"; //agrega un valor a una etiqueta del HTML, atributo del objeto resultado
        console.log(caja);
        console.log(entregado);
        console.log(dinero);
    }
    else
    {
       for(var e of entregado)
       {
           if(e.cantidad > 0)
           {
            resultado.innerHTML += ("<li><strong>" + e.cantidad + " </strong>" + e.devolvertipo() + "s de S/. <strong>" + e.valor + "</strong>" + "</ul></li><img src=" + e.imagen.src + "> <hr>");

            for(var c of caja)
            {
                 if(c.valor == e.valor)
                 {
                     c.cantidad = c.cantidad - e.cantidad;
                 }
            }

           }
       }
       horario.innerHTML += ("Retiro de  S/."+ dineroTemp +  " | Hora : "  + hora + "<br>");
       console.log(caja);
       console.log(entregado);
       saldoCaja = saldoCaja - sumaCaja(entregado);
       saldo.innerHTML = ("<strong> Saldo actual del cajero: " + saldoCaja + "<hr>");
       
    }
    entregado = [];
}

function sumaCaja(arreglo)
{
    
    var suma = 0;
    for(var i of arreglo)
    {
        suma += i.cantidad*i.valor;
    }

    return suma;

}

function devolverHora()
{
    var tiempo = new Date();
    var hora = tiempo.getHours();
    var minuto = tiempo.getMinutes();
    var segundo = tiempo.getSeconds();
    var horaTexto = hora + " : " + minuto + " : " + segundo;
    return horaTexto;
}

Falta diseño, pero a seguir aprendiendo ! 😃

Katerin Calderón

Para crear las imágenes las busque y las edite para crear el cajero y los billetes

El código primero valida los valores de los billetes y si con los billetes que tiene NO puede entregar el monto solicitado muestra un mensaje , y un mensaje diferente cuando se queda sin billetes, adicional cuando le das click al botón limpia la caja para permitir ingresar un nuevo valor y borra las imágenes para mostrar la nueva cantidad.
Utilice en lugar de un <P>, un campo <div> que crea un espacio sobre el cual se puede escribir o dibujar, esto permite que sea mas sencillo borrar los billetes de solo este espacio, sin tener que intervenir el body.

JAVASCRIPT:

class Billete
{
    constructor(n, v, c)
    {
        this.nombre = n;        
        this.valor = v;
        this.cantidad = c;
    }
    mostrar()
    {
        this.imagen = new Image();
        this.imagen.src = imagenes[this.nombre];
        document.getElementById("divBilletes").appendChild(this.imagen);
    }
}

var imagenes = [];
imagenes["500"] = "500.png";
imagenes["200"] = "200.png";
imagenes["100"] = "100.png";
imagenes["20"] = "20.png";
    
var caja = [];
caja.push(new Billete("500", 500, 5));
caja.push(new Billete("200", 200 , 3));
caja.push(new Billete("100", 100, 7));
caja.push(new Billete("20", 20, 10));

var valorBilletes = caja.map(a => a.valor);
var valorMinimo = Math.min.apply(null, valorBilletes);

var entrega = [];
var monto;
var div = 0;
var papeles = 0;

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

function entregarDinero()
{
    var m = document.getElementById("monto");
    monto = parseInt(m.value);

    limpiar();

    if(monto % valorMinimo != 0)
    {
        document.getElementById("divBilletes").innerHTML = "No puedo entregarte esa cantidad de dinero";
        monto = 0; 
    }

    for(var bi of caja)
    {
        if(monto > 0)
        {
            div = Math.floor( monto / bi.valor);
            if(div > bi.cantidad)
            {
                papeles = bi.cantidad;
            }
            else
            {
                papeles = div;
            }
            bi.cantidad = bi.cantidad - papeles;
            entrega.push(new Billete (bi.nombre, bi.valor, papeles));
            monto = monto - (bi.valor * papeles);        
        }       
    }
    if(monto > 0)
    {
        document.getElementById("divBilletes").innerHTML = "Soy un cajero pobre, ya no tengo mas billetes :(";
    }
    else
    {
        for(entregar of entrega)
        {
            for(i=1; i<= entregar.cantidad; i++)
            {
                entregar.mostrar();
            }
            
        }
    }
}

function limpiar()
{
    var inputMonto = document.getElementById("monto");
    inputMonto.value = "";
    entrega = [];
    document.getElementById("divBilletes").innerHTML = "";

}

Betty Rossana Jimenez Cedeño

La verdad necesité ayuda, pero entendí.

<code>
var imagenes = [];
imagenes["50"] = "billete50.png"
imagenes["20"] = "billete20.png"
imagenes["10"] = "billete10.png"

class billete
{
  constructor(v, c)
  {
    this.imagen = new Image;
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

var caja = [];
var entregado = [];
caja.push(new billete (50, 5));
caja.push(new billete (20, 3));
caja.push(new billete (10, 2));
cuenta(); // en esta linea se ejecuta el conteo de toda la cantidad
var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", cash);


function cash()
{
  var dibujando = []; // para traer la imagen al ciclo
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  if (total >= dinero)
{
  for (b of caja)
  {
    if ( dinero > 0)
    {
      div = Math.floor( dinero / b.valor );

      if (div > b.cantidad)
      {
        papeles =  b.cantidad;
      }
      else
      {
        papeles = div;
      }
      b.cantidad = b.cantidad - papeles;
      for ( var i = 0; i < papeles; i++) // que dibuje el billete y cuente y descuente.
      {
        dibujando.push( new billete (b.valor, papeles) );
      }
        dinero = dinero - (b.valor * papeles);
    }
  }

    if (dinero == 0)
    {
      resultado.innerHTML = "Has obtenido <br />"

      for ( var e of dibujando)
      {
        resultado.innerHTML += "<img src=" +  e.imagen.src  + " />"; // que muestre el billete
      }
        resultado.innerHTML += " <hr/>"

        cuenta(); // para que cuente cuanto fue retirado
    }

    else
    {
      resultado.innerHTML = "soy un cajero muy pobre <br />" ;
    }
  }
}
  function cuenta()
   {
    total = 0;
    for ( var to of caja)
    {
      total += to.valor * to.cantidad;
    }
    console.log(total);
   }
</code>

Kevin Parra Lopez

(

Erwing Armando Coss Batista

mi cara cuando freddy dijo que document.write era una mala practica
:0

luigijosegutierrez

24 clases despues, Freddy nos dice que el document.write no es profesional :V

cristian-camilo-bulla

Aquí pueden ver mi Cajero
COLOMBIA

Cesar Augusto Moreno Chavez

Ha sido un reto enorme, si no fuera por los demas compañeros de clase mas diestros en el tema seria muy dificil para quienes no dominamos estos conceptos.

Aun asi por todo su aporte mil gracias.
Ejercicio 1.jpg

Luis Daniel Altamirano Soto

Este es mi resultado, con cada click en el botón extraer borra pantalla y se muestran los billetes únicamente para esa extracción y en la consola se puede ver como se van restando los billetes disponibles en el cajero.

Emanuel Sabariego

Al ver la clase anterior, sinceramente me imaginé que implementar el cajero automático iba a ser sumamente complejo. De verdad, estoy asombrado lo llevadero que lo haces. Me siento todo un programador.

William Ricardo Arenas Vera

Les comparto mi solución; en el html cree un <div id=“billetes”></div> para mostrar los billetes.

class Billete {
  constructor(valor,cant) {
    this.valor=valor;
    this.cant=cant;
    this.imagenUrl = "b"+valor+".png";
  }
}

function validaTotal(){
  var totalCaja = 0;
  var menor = 0;
  for (var c of caja){
    totalCaja = totalCaja + (c.valor*c.cant);
  }
  return totalCaja;
}

function validaMenorDenomina(){
  var menor = 0;
  for (var c of caja){
    if (menor == 0 || menor > c.valor)
    {
      menor = c.valor;
    }
  }
  return menor;
}

function entregaDinero()
{
  entregado=[];
  resultado.innerHTML = "";
  billetes.innerHTML = "";

  var t = document.getElementById("txtDinero");
  dinero = parseInt(t.value);
  var totalC = validaTotal();
  var menorD = validaMenorDenomina();

  if (dinero > totalC) {
    resultado.innerHTML = "Soy un cajero pobre, no me alcanza el dinero :(";
    return false;
  }

  if (dinero % menorD != 0 ) {
    resultado.innerHTML = "Soy un cajero inteligente, solo entrego multiplos de "+menorD;
    return false;
  }

  for(bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero/bi.valor);
      if (div > bi.cant)
      {
        papeles = bi.cant;
      }
      else
      {
        papeles = div;
      }
      entregado.push(new Billete(bi.valor,papeles));
      dinero = dinero - (bi.valor * papeles);
    }
  }

  for (var e of entregado) {
    if (e.cant > 0) {
          //resultado.innerHTML = resultado.innerHTML + e.cant+" billetes de $" + e.valor + "<br />";
          for (var i = 0; i < e.cant; i++) {
            billetes.innerHTML += "<img src=" + e.imagenUrl + " />";
          }
          billetes.innerHTML += "<br />";
        }
      }
  }

var caja = [];
var entregado = [];
caja.push(new Billete(5000,2));
caja.push(new Billete(2000,3));
caja.push(new Billete(1000,5));
caja.push(new Billete(500,1));
caja.push(new Billete(200,5));
caja.push(new Billete(100,5));
caja.push(new Billete(50,2));

var dinero = 0;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("result");
var billetes = document.getElementById("billetes");
var boton = document.getElementById("btnExtraer");
boton.addEventListener("click", entregaDinero);

Ramón Ruiz

Les dejo estas imágenes que hice de billetes.

Daniela Camacho

Me encantó el reto. Lo que hice fue buscar en Google Imagenes billetes por cada valor, volver cada billete del mismo tamaño y luego introducirlo al código. Acepto cualquier aporte o opinión, gracias.

Vander Idme

var r = document.getElementById("resultado");
var b = document.getElementById("extraer");
var s = document.getElementById("estatus");

b.addEventListener("click", entregarDinero);

var imagenes = [];

imagenes[50] = "vaca.png";
imagenes[20] = "pollo.png";
imagenes[10] = "cerdo.png";

var dinero;
var papeles = 0;
var div = 0;

var caja = [];
var entregado = [];

class Billete {
    constructor(v, c) {

        this.imagen = new Image();
        this.valor = v;
        this.cantidad = c;
        this.imagen.src = imagenes[this.valor];
    }  
}

function entregarDinero() {

    var t = document.getElementById("dinero");
    dinero = parseInt(t.value);

    for (var bi of caja) {

        if (dinero > 0) {
            div = Math.floor(dinero / bi.valor);

            if (div > bi.cantidad) {
                papeles = bi.cantidad;
            }
            else {
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles));
            bi.cantidad = bi.cantidad - papeles;
            dinero = dinero - (bi.valor * papeles);
        }
        //console.log("billetes de $: " + bi.valor + "quedan: " + bi.cantidad);
    }
    if (dinero > 0) {

        r.innerHTML = "soy un cajero pobre";

    } else {
        //trucazo para limpiar la pantalla 
        r.innerHTML = " ";

        for (var e of entregado) {
            if(e.cantidad > 0){
                r.innerHTML += e.cantidad + " Billetes de $" + e.valor + "<br>";
                for(var i=0; i<e.cantidad;i++){
                    r.innerHTML += "<img src=" + e.imagen.src + ">";                  
                }
                r.innerHTML += "<br>"
            }
        }
        
        r.innerHTML = r.innerHTML + "<hr>";  
    }
    //hubo problemas para mostrar de nuevo la cantidad de billetes que se estaba entregando, porque al mostrar
    //los billetes entregados que se guardaban entregados, se hacia un push de la nueva cantidad dada, pero este
    //array aun continuaba teniendo los push anteriores, lo que se hizo fue vaciar entregado con entregado = []
    entregado = [];
    estatus();
}

caja.push(new Billete(50, 10));
caja.push(new Billete(20, 5));
caja.push(new Billete(10, 5));

function estatus(){

    var dinero_total = 0;
    for(c of caja){
        dinero_total = dinero_total + (c.valor * c.cantidad);
    }

    s.innerHTML = "Estado del cajero: <br>";
    s.innerHTML += "Dinero total: " + dinero_total + "<br>";
    
    for(c of caja){
        s.innerHTML += "Billetes de $" + c.valor + " quedan: " + c.cantidad + "<br>";

    }
}
estatus();

Ana Beatriz Martinez

Mi aporte 😄

Al cargar sin realizar ningún retiro:

Primer retiro:

Segundo retiro:

Yuder David Hernandez Melo

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href= "imagenes/icono_cajero.ico">
  <title>ATM</title>
</head>
<body>
  
    <p id="Imagen_cajero"></p>
    <p>
      <input type="text" id="valorIngresado">
      <input type="button" value="Retirar" id="BotonRetiro">
    </p>
    <p id="resultado"></p>
    <canvas width="700" height="70" id="canvas" ></canvas>
    <p id="resumen"></p>
    <script src="javascript/clase_billete.js"></script>
    <script src="javascript/calculo_retiro.js"></script>
    <script src="javascript/dibujar.js"></script>

</body>
</html>

CALCULO RETIRO

var d = document.getElementById("BotonRetiro");
var e1 = document.getElementById("valorIngresado");
var res = document.getElementById("resultado");
var imagen_cajero = document.getElementById("Imagen_cajero");
var Resumen = document.getElementById("resumen");
imagen_cajero.innerHTML="<img src=imagenes/cajero.gif>";
var Imagen_billete = document.getElementById("imagen_billete");
d.addEventListener("click", eventoClick);

var billete =[];
billete.push(new money(50, 5, 0, "<img src=imagenes/fifty.gif>"));
billete.push(new money(20, 4, 0, "<img src=imagenes/twenty.gif>"));
billete.push(new money(10, 3, 0, "<img src=imagenes/ten.gif>"));
billete.push(new money(5, 5, 0, "<img src=imagenes/five.gif>"));
Resumen.innerHTML="Saldo en cajero" + "<br />" ;
for(var i of billete){
     Resumen.innerHTML= Resumen.innerHTML + i.valor + " = " + i.cantidad + "<br />" ;
     
 }

function eventoClick(){
    memoria_posicion = 0;
    borrar(); 
    var Entregado = parseInt(e1.value);
    if(Entregado>0){
        for(var b of billete){
            while (Entregado>=b.valor && b.cantidad != b.transferido) {
                
                b.transferido ++;
                Entregado = Entregado - b.valor;
            }
          
        }
        if(Entregado==0){
           res.innerHTML="la suma entregada" + "<br />" ;
           Resumen.innerHTML="Saldo en cajero" + "<br />" ;
           imagen_cajero.innerHTML="<img src=imagenes/cajero_retiro.gif>";
           for(var i of billete){
               if(i.cantidad > 0){
                i.cantidad = Math.abs(i.cantidad - i.transferido);
                    if (i.transferido>0) {
                    res.innerHTML= res.innerHTML + i.valor + "= " + i.transferido + "<br />" ;
                    }
               }
                Resumen.innerHTML= Resumen.innerHTML + i.valor + " = " + i.cantidad + "<br />" ;
                dibujar(i.valor, i.transferido, 40);
                i.transferido = 0 ;
                
            }
            memoria_posicion = 0;
            
        }
        else{
            res.innerHTML="Sin fondos";
            imagen_cajero.innerHTML="<img src=imagenes/cajero_sin_fondos.gif>";
            for(var i of billete){
                i.transferido = 0 ;
            }
        }
    }
    else{
        res.innerHTML="Ingrese cantidad valida";
        imagen_cajero.innerHTML="<img src=imagenes/cajero_invalido.gif>";
    }
 
}

DIBUJAR

var ctx = document.getElementById('canvas').getContext('2d');
var picture50 = new Image();
picture50.src="imagenes/fifty.gif";

var picture20 = new Image();
picture20.src="imagenes/twenty.gif";

var picture10 = new Image();
picture10.src="imagenes/ten.gif";

var picture5 = new Image();
picture5.src="imagenes/five.gif";

var memoria_posicion = 0;

function dibujar(valor, cantidad, distancia) {
    
    if(valor==50){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture50,memoria_posicion,0);
                memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==20){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture20,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==10){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture10,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==5){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture5,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
}  

function borrar()
{
    ctx.fillStyle ="#FFFFFF";
    ctx.fillRect(0,0,700,70);
}

CLASE_BILLETE

class money
{
    constructor(valor, cantidad, tranfer, image)
    {
        this.valor =valor;
        this.cantidad = cantidad;
        this.transferido = tranfer;
        this.imagen = image;
        
    }
    mostrar()
    {
        console.log("por aqui paso " + this.valor);
    }

}

Gonzalo Neyra Bermudez

Anotación 2020-04-10 183416.png
let caja = [];
let entregado = [];

caja.push(new Billete(50, 3));
caja.push(new Billete(20, 2));
caja.push(new Billete(10, 2));

let dinero = 0;
let div;
let papeles;

let totalCaja = document.getElementById(“total”);
let totalSoles = 0;

maxRetiro();

function maxRetiro(){
let contadorSoles = 0;
for(let i = 0; i < caja.length; i++){
contadorSoles += caja[i].valor*caja[i].cantidad;
}
totalSoles = contadorSoles;
contadorSoles = 0;
totalCaja.innerHTML = "Maximo de retiro S/. " + totalSoles + “.00”;
}

let biCant = [];
let entrCant = [];

function entregarDinero(){
let t = document.getElementById(“dinero”);
dinero = parseInt(t.value);

if(dinero > totalSoles){
    // console.log("No hay suficiente dinero en el banco");
    resultado.innerHTML = "No hay dinero suficiente :(";
} else {
    for(bi of caja){
        if(dinero > 0){
            div = Math.floor(dinero / bi.valor);
            if(div > bi.cantidad){
                papeles = bi.cantidad;
            } else{
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles));
            dinero -= (bi.valor *papeles);
            dineroEntregado = bi.cantidad;
        }
        biCant.push(bi.cantidad);
    }
            
    for(entr of entregado){
        entrCant.push(entr.cantidad);
    }

    for(let i = 0; i < entregado.length; i++){
        caja[i].cantidad = biCant[i]-entrCant[i];
    }

    for(var e of entregado){

        if(e.valor == 10){
            cargarDiez(e.cantidad); 
        }

        if(e.valor == 20){
            cargarVeinte(e.cantidad); 
        }

        if(e.valor == 50){
            cargarCincuenta(e.cantidad); 
        }

        if(e.cantidad > 0){

            resultado.innerHTML += e.cantidad + " billetes de " + e.valor + "<br>";
        }
    }
}
maxRetiro();
entregado = [];
biCant = []
entrCant = []

}

let diez = {
url: “…/img/diez.png”,
cargarOk: false
}

diez.img = new Image();
diez.img.src = diez.url;
diez.img.addEventListener(“load”, cargarDiez);

function cargarDiez(cant){
diez.cargarOk = true;
cargarImgBillete(cant, diez.url);
}

let veinte = {
url: “…/img/veinte.png”,
cargarOk: false
}

veinte.img = new Image();
veinte.img.src = veinte.url;
veinte.img.addEventListener(“load”, cargarVeinte);

function cargarVeinte(cant){
veinte.cargarOk = true;
cargarImgBillete(cant, veinte.url);
}

let cincuenta = {
url: “…/img/cincuenta.jpg”,
cargarOk: false
}

cincuenta.img = new Image();
cincuenta.img.src = cincuenta.url;
cincuenta.img.addEventListener(“load”, cargarCincuenta);

function cargarCincuenta(cant){
cincuenta.cargarOk = true;
cargarImgBillete(cant, cincuenta.url);
}

function cargarImgBillete(c, src){
let imgD;
let bP = document.getElementById(“billetes”);

for(let i = 0; i < c; i++){
    imgD = bP.appendChild(document.createElement("img"));
    imgD.setAttribute("src",src);
}

}

let resultado = document.getElementById(“resultado”);

let b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

Luis Javier Jaramillo García

class Billete {
  constructor(name, value, quantity) {
    this.imagen = new Image();
    this.nombre = name;
    this.imagen.src = imagenes[this.nombre];
    this.valor = value;
    this.cantidad = quantity;
  }
}

function entregarDinero() {
  var salto = document.createElement("BR");
  var veces = document.createTextNode(" x ");
  dinero = parseInt(t.value);
  for(billetes of caja) {
    if(dinero > 0) {
      div = Math.floor(dinero / billetes.valor);
      if(div > billetes.cantidad) {
        papeles = billetes.cantidad;
        totalDinero = totalDinero - (papeles * billetes.valor);
      }
      else {
        papeles = div;
        totalDinero = totalDinero - (papeles * billetes.valor);
      }
      entregado.push(new Billete(billetes.nombre, billetes.valor, papeles));
      dinero = dinero - (billetes.valor * papeles);
    }
  }
  if(dinero > 0) {
    resultado.innerHTML = "No puedo entregar esa cantidad D:";
  }
  else {
    for(entrega of entregado) {
      if(entrega.cantidad > 0 && totalDinero >= 0) {
              resultado.innerHTML += entrega.cantidad;
              resultado.appendChild(veces);
              resultado.appendChild(entrega.imagen);
              resultado.appendChild(salto);
      }
      else {
        resultado.innerHTML = "Se acabaron los billetes.";
      }
    }
  }
  if(totalDinero > 0) {
    disponible.innerHTML = "En este momento tenemos disponibles $ " + totalDinero;
  }
  else {
    disponible.innerHTML = "Ya no tengo dinero :(";
  }
}

function totalCaja() {
  for(total of caja) {
    totalDinero += (total.valor * total.cantidad);
  }
  disponible.innerHTML = "En este momento tenemos disponibles $ " + totalDinero;
}

var imagenes = [];
imagenes["cincuenta"] = "50s.png";
imagenes["veinte"] = "20s.png";
imagenes["diez"] = "10s.png";

var caja = [];
var entregado = [];
caja.push(new Billete("cincuenta", 50, 10));
caja.push(new Billete("veinte", 20, 5));
caja.push(new Billete("diez", 10, 10));

var div = 0;
var papeles = 0;
var dinero = 0;
var totalDinero = 0;

var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);
var t = document.getElementById("dinero");
var resultado = document.getElementById("resultado");
var disponible = document.getElementById("disponible");
window.addEventListener("load", totalCaja);

Luis Alberto Luisjuan Guerrero

Dejo la pagina con la que cambie de tamaño las imagenes de los billetes:
https://www.iloveimg.com/

Kevin Flórez

HTML

<
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
    <style media="screen">
    body{
      background-color: grey;
      color: white;
    }
      #saldo{
        background-color: white;
        color: green;
      }
      #retirado{
        background-color: white;
        color: red;
      }
      #resultado{
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p>
    <img src="cajero.gif" />
    </p>
      <p id="saldo"> </p>
    <h3>Ingrese la cantidad a retirar</h3>
    <p>
      <input type="number" id="dinero">
      <input type="button" value="Extraer" id="extraer">
      <input type="button" value="Disponible" id="disponible">
      <input type="button" value="Historial" id="histori">
    </p>

    <p id="retirado"></p>
    <p id="resultado"></p>
    <script src="cajero.js"></script>
      <script src="cajeroClass.js"></script>
  </body>
</html>

>

javaScript cajero.js

<

function entregarDinero(){

  resultado.innerHTML = "";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

    if(dinero > saldoCaja()){
      resultado.innerHTML = "<strong>No es posible sacar esa cantidad $" + dinero + " , supera el saldo disponible</strong><br><hr> ";
    }
    else {
      var val = 0;
      var cant = 0;
      var i = 0;

      retirado.splice(0);
    for(var bi of caja){
      if (dinero > 0){
        div = Math.floor(dinero/bi.valor);

        if (div > bi.cantidad) {
            papeles = bi.cantidad;
        }
        else {
        papeles = div;
        }

        retirado.push(new Billete(bi.valor, papeles));//para solo mostrar retiro reciente

          for (var en of entregado){
            if (bi.valor == en.valor){
              entregado.splice(i,1,new Billete(bi.valor,en.cantidad + papeles));
            }
          }
      dinero = dinero - (bi.valor * papeles);
      val = bi.valor;
      cant = bi.cantidad - papeles;
      caja.splice(i,1,new Billete(val, cant));
      i += 1;
      }
    }
      for (var r of retirado){
        if(r.cantidad > 0){
          //document.body.appendChild(r.imagen);
        resultado.innerHTML += "<br>" + r.cantidad + " billete de $" + r.valor + "<br>";
            for (var l=1; l<=r.cantidad;l++){
              resultado.appendChild(r.imagen);//de esta forma traidod e platzi
              resultado.innerHTML+= " ";
                  }
        }
      }
      resultado.innerHTML += "<br>...Fin transacción... <br><hr>";
      saldito.innerHTML = "<strong>Saldo disponible para retiro : $" + saldoCaja() + "</strong><hr>";

    }
    t.value = ""; //traido de la ayuda platzi
}

function saldoEntregado(){
  saldo = 0;
  for (var e of entregado){
    aux1 = e.valor * e.cantidad;
    saldo = saldo + aux1;
  }
  return saldo;
}

function saldoCaja(){
  saldo = 0;
  for (var c of caja){
    aux1 = c.valor * c.cantidad;
    saldo = saldo + aux1;
  }
  return saldo;
}

function mostrarSaldo(){
    saldito.innerHTML = "<strong>Saldo disponible para retiro : $" + saldoCaja() + "</strong> <hr>";
}

function historico(){
    resultado.innerHTML="";
    retiros.innerHTML = "<strong>Cantidad retirada : $" + saldoEntregado() + "</strong><hr>";
  for (var ri of entregado){
    if(ri.cantidad > 0){
      //document.body.appendChild(r.imagen);
    resultado.innerHTML += "<br>" + ri.cantidad + " billete de $" + ri.valor + "<br>";
    for (var l=1; l<=ri.cantidad;l++){
      resultado.appendChild(ri.imagen);//de esta forma traidod e platzi
      resultado.innerHTML+= " ";
          }

    }
  }
}

>

javaScript cajeroClass.js

<
class Billete{
  constructor(v, c){
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

var aux1 = 0;
var saldo = 0;

var imagenes = [];
imagenes[100000] = "100mil.png";
imagenes[50000] = "50mil.png";
imagenes[20000] = "20mil.png";
imagenes[10000] = "10mil.png";
imagenes[5000] = "5mil.png";
imagenes[2000] = "2mil.png";
imagenes[1000] = "1mil.png";

var caja = [];
caja.push(new Billete(100000, 10));
caja.push(new Billete(50000, 10));
caja.push(new Billete(20000, 10));
caja.push(new Billete(10000, 10));
caja.push(new Billete(5000, 10));
caja.push(new Billete(2000, 10));
caja.push(new Billete(1000, 10));

var entregado = [];
entregado.push(new Billete(100000, 0));
entregado.push(new Billete(50000, 0));
entregado.push(new Billete(20000, 0));
entregado.push(new Billete(10000, 0));
entregado.push(new Billete(5000, 0));
entregado.push(new Billete(2000, 0));
entregado.push(new Billete(1000, 0));

var retirado = [];
var dinero = 0;
var div = 0;
var papeles = 0;

var saldito = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var retiros = document.getElementById("retirado");

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

var dis = document.getElementById("disponible");
dis.addEventListener("click", mostrarSaldo);

var his = document.getElementById("histori");
his.addEventListener("click", historico);

>

Debora Garrido

CSS

.caja { 
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    color: #3917b6; 
    font-size: 18px; 
    font-weight: 400; 
    text-align: center; 
    background: #050e41; 
    margin: 0 0 25px; 
    overflow: hidden; 
    padding: 20px; 
    border-radius: 35px 0px 35px 0px; 
    -moz-border-radius: 35px 0px 35px 0px; 
    -webkit-border-radius: 35px 0px 35px 0px; 
    border: 2px solid #4639b8;}```


<code>

HTML

<code>

<!DOCTYPE html>
<html>

<head>
	<title>Cajero Automatico</title>
	<link rel="stylesheet" href="cajero.css">
	<style>
		body {
			background-color: #009393;
			color: whitesmoke;
			font-family: Arial, Helvetica, sans-serif;
		}
	</style>
</head>

<div class="caja"><strong>Banco Mundial Akira</strong></div>

<p>
	<img src="cajero.gif">
</p>
<p style="text-shadow: 0.1em 0.1em 0.15em black">Este cajero tiene disponible para entregar: </p>
<p id="saldo" ></p>
<p style="text-shadow: 0.1em 0.1em 0.15em black">Ingrese el valor a retirar:</p>

<p>
	<input type="number" id="dinero" />
	<input type="button" value="Retirar" id="extraer" />
	<input type="button" value="Limpiar" id="clean" />
</p>
<p id="espacio"></p>
<p id="resultado"> </p>
<script src="cajero_automatico.js">
</script>
</body>

</html>

JS
<code>


class Billete {
	constructor(v, c) {
		this.imagen = new Image();
		this.valor = v;
		this.cantidad = c;
		this.imagen.src = imagenes[this.valor];
	}
	mostrar(){
		resultado.appendChild(this.imagen);
		
		
	}
}

var imagenes = {};
imagenes["20000"] = "20000.png";
imagenes["10000"] = "10000.png";
imagenes["5000"] = "5000.png";
imagenes["2000"] = "2000.png";
imagenes["1000"] = "1000.png";

var caja = [];

caja.push(new Billete(20000, 100));
caja.push(new Billete(10000, 100));
caja.push(new Billete(5000, 100));
caja.push(new Billete(2000, 100));
caja.push(new Billete(1000, 100));


function calcularTotal(){
	var a0 = parseInt(caja[0].valor * caja[0].cantidad);
	var a1 = parseInt(caja[1].valor * caja[1].cantidad);
	var a2 = parseInt(caja[2].valor * caja[2].cantidad);
	var a3 = parseInt(caja[3].valor * caja[3].cantidad);
	var a4 = parseInt(caja[4].valor * caja[4].cantidad);
	
	return (a0 + a1 + a2 + a3 + a4);
	
}


var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");


var billetines = document.getElementById("extraer");
billetines.addEventListener("click", entregarDinero);

var nuevoretiroefectivo = document.getElementById("clean");
nuevoretiroefectivo.addEventListener("click", nuevoRetiro);



function entregarDinero() {
	let entregado = [];

	var t = document.getElementById("dinero");
	dinero = parseInt(t.value);

	for (var billetines of caja) {
		if (dinero > 0) {
			div = Math.floor(dinero / billetines.valor);

			if (div > billetines.cantidad) {
				papeles = billetines.cantidad;
			}
			else {
				papeles = div;
			}
			billetines.cantidad = billetines.cantidad - papeles;
			entregado.push(new Billete(billetines.valor, papeles));
			dinero = dinero - (billetines.valor * papeles);
		}
	}
	if (dinero > 0) {
		resultado.innerHTML = "Saldo insuficiente para realizar transacci&oacuten";
	}
	else {
		for (var billete_entregado of entregado) {
			if (billete_entregado.cantidad > 0) {

				var result = billete_entregado.cantidad * billete_entregado.valor;
				
				resultado.innerHTML += "<br>" + billete_entregado.cantidad + " billetes de $" + billete_entregado.valor + "<br>";
				billete_entregado.mostrar();
			}
		}
		let af = calcularTotal()
		var disponible = document.getElementById("saldo");
		disponible.innerHTML = af + "<hr>"

	}
}

function nuevoRetiro(){
	resultado.innerHTML = ""
	var t = document.getElementById("dinero");
	t.value = ""
}

David Alexander Benz Zambrano

Este proyecto si me volara la cabeza

Ivorales

class Billete {
  constructor(v, c) {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }

  mostrar() {
    // resultado.appendChild(this.imagen);
    var p = document.createElement("p");
    resultado.appendChild(p);
    p.innerHTML +=
      "<strong>" +
      this.cantidad +
      "</strong>" +
      "<strong> Billete(s) de </strong> " +
      "</br>";
    p.appendChild(this.imagen); // Se necesita crear una etiqueta <p> para que cada billete del array entregado que se está imprimiendo no quede en el aire.
  }
}

//Variables
var disponible = document.getElementById("Disponible");

var caja_texto = document.getElementById("cajaTexto");

var resultado = document.getElementById("Resultado");

var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

// Arreglos
var imagenes = [];
imagenes["50"] = "50.png";
imagenes["20"] = "20.png";
imagenes["10"] = "10.png";

var entregado = [];

var caja = [new Billete(50, 20), new Billete(20, 20), new Billete(10, 20)];

disponible.innerHTML = "Saldo disponible: $" + saldoDisponible();

function entregarDinero() {
  var monto = caja_texto.value;
  var cantidadPapeles = 0;
  var papeles = 0;

  if (monto % 10 != 0) {
    parrafo(
      "<strong>POR FAVOR INTRODUZCA UN NÚMERO QUE SEA MÚLTIPLO DE 10 EJEMPLO(10,20,30,40)</strong>" +
        "<hr>"
    );
  } else if (monto > saldoDisponible() && saldoDisponible() != 0) {
    parrafo(
      "<strong>SU CANTIDAD SUPERA EL SALDO DISPONIBLE POR FAVOR INGRESE UN MONTO IGUAL O INFERIOR A: </strong>" +
        saldoDisponible() +
        "<hr>"
    );
  } else {
    for (var b of caja) {
      if (monto > 0) {
        cantidadPapeles = Math.floor(monto / b.valor);

        if (cantidadPapeles > b.cantidad) {
          papeles = b.cantidad;
          b.cantidad -= papeles; // Restándole los billetes del array entregado[] a los billetes de mi array caja[]
        } else {
          papeles = cantidadPapeles;
          b.cantidad -= papeles;
        }

        entregado.push(new Billete(b.valor, papeles));

        monto -= b.valor * papeles;
      }
    }
    if (saldoDisponible() === 0 && monto != 0) {
      resultado.innerHTML =
        "<strong>ESTE CAJERO ACTUALMENTE NO CUENTA CON SALDO DISPONIBLE PARA SU RETIRO.</strong>";
      // Alarma que se dispara en el momento que el cajero automático queda sin dinero
    } else {
      for (var e of entregado) {
        if (e.cantidad > 0) {
          // Condición para que no se impriman todas las denominaciones...

          e.mostrar();
        }

        disponible.innerHTML = "Saldo disponible: $" + saldoDisponible();

        entregado = []; // hay que vaciar la variable, y así, evitamos que se acumulen las cifras retiradas anteriormente.
      }
      parrafo(
        "Usted ha retirado la cantidad de: $" + caja_texto.value + "<hr>"
      );
    }
  }
}

function saldoDisponible() {
  var total = 0;

  for (var c of caja) {
    total += c.valor * c.cantidad;
  }
  return total;
}

function parrafo(texto) {
  var p = document.createElement("p");
  resultado.appendChild(p);
  p.innerHTML = texto;
}

Jose Ramon Moreno Sanchez

Para el primer desafio:

//clave, valor para las imagenes 
var imgBillete = {
    1: "dineroMonopoly/one-dollar.PNG",
    5: "dineroMonopoly/five-dollar.PNG",
    10: "dineroMonopoly/ten-dollar.PNG",
    20: "dineroMonopoly/twenty-dollar.PNG",
    50: "dineroMonopoly/fifty-dollar.PNG",
    100: "dineroMonopoly/one-hundred-dollar.PNG",
    500: "dineroMonopoly/five-hundred-dollar.PNG"
};

caja.push( new Billete(500, 10) );
caja.push( new Billete(100, 10) );
caja.push( new Billete(50, 10) );
caja.push( new Billete(20, 10) );
caja.push( new Billete(10, 10) );
caja.push( new Billete(5, 30) );
caja.push( new Billete(1, 10) );

Se manda a llamar el metodo

if( dinero > 0 ){
    resultado.innerHTML = "Saldo insuficiente en cajero";
  }
  else{
    for( var e of entregado ){
      if( e.cantidad > 0 ){
        e.mostrarEfectivo();
        console.log(e.valor + " , " + imgBillete[e.valor]);
      }
    }
  }

Se muestran los billetes

class Billete {
  constructor(v, c) {
    this.valor = v;
    this.cantidad= c;
    //ruta que se usara en la propiedad src de la etiqueta img
    this.urlImagen = imgBillete[this.valor];
  }

  mostrarEfectivo(){
    resultado.innerHTML += "<br/>" + this.cantidad + " billetes de $ " + this.valor + "<img width='200px' height='100px' src=" + "'"+this.urlImagen+"'" +"/>" + "<br/>";
  }
//se usa "'" para poder concatenar la url de imagen y se pueda mostrar, esto me dio problemas
}

Ejemplo:

Eira Yanai García Mata

Hola a todos, les quiero compartir lo que he avanzado:

Muestra el monto actual en cajero.
Muestra lista de operaciones realizadas incluyendo las no exitosas.
Muestra tantas imágenes como billetes entregados, no sé si lo hice bien pero fue como funcionó.
A cada operación va restando dinero del caja hasta quedarse en 0.

Con lo que no estoy muy feliz es con las líneas de código, espero seguir aprendiendo.

![](

class Billete
{
  constructor(valor,cantidad)
  {
    this.valor = valor;
    this.cantidad = cantidad;
  }

  mostrarImagen(){
    var replicaImagen = new Image();
    replicaImagen.src = imagenes[this.valor];
    return replicaImagen;
  }

  mostrarValor(){
    return this.cantidad + " billetes de $" + this.valor
  }
}

var imagenes = [];
imagenes["100"] =  "b100.jpg";
imagenes["50"] = "b50.jpg";
imagenes["20"] = "b20.jpg";
imagenes["10"] = "b10.jpg";
imagenes["5"] = "b5.jpg";

var caja = [];
caja.push( new Billete(100,5) );
caja.push( new Billete(50,30) );
caja.push( new Billete(20,20) );
caja.push( new Billete(10,20) );
caja.push( new Billete(5,5) );

document.getElementById("extraer").addEventListener("click",solicitarDinero);
var montoCaja = document.getElementById("montoCaja");
mostrarMontoCaja();
var resultado = document.getElementById("resultado");
var operacionesRealizadas = document.getElementById("operaciones");
var operaciones = [];


function solicitarDinero()
{
  var dineroSolicitado = parseInt(document.getElementById("dinero").value);
  operaciones.push(calcularBilletes(dineroSolicitado));
  mostrarBilletes(operaciones[operaciones.length - 1]);
  actualizarMontoCaja(operaciones[operaciones.length - 1]);
  mostrarOperaciones();
}

function calcularBilletes(dinero)
{
  var entregado = [];
  var papeles = 0;

  for (b of caja)
  {
    if(dinero > 0)
    {
      papeles = Math.min( Math.floor(dinero/b.valor), b.cantidad);
      if(papeles > 0)
      {
        entregado.push(new Billete(b.valor,papeles));
        dinero -= b.valor * papeles;
      }
    }
  }

  if ( dinero <= 0 )
  {
    return entregado;
  }
  else
  {
      return 0;
  }
}

function mostrarBilletes(entregado)
{
  resultado.innerHTML = "";
  if(!Array.isArray(entregado))
  {
    resultado.innerHTML = "<h3> Lo sentimos no es posible entregarte la cantidad solicitada. </h3>";
  }
  else
  {
    resultado.innerHTML += "<strong> Tu dinero: </strong><br/>";
    for(e of entregado)
    {
      resultado.innerHTML += "<br />" + e.mostrarValor() + "<br />";
      for(var i=0; i < e.cantidad; i++)
      {
        resultado.appendChild( e.mostrarImagen() );
      }
    }
  }
}

function calcularMonto(billetes)
{
  var monto = 0;
  for(i of billetes)
  {
    monto += i.valor * i.cantidad
  }
  return monto;
}

function mostrarOperaciones()
{
  operacionesRealizadas.innerHTML = "<hr/>";
  for(var i = 0; i < operaciones.length; i++)
  {
    operacionesRealizadas.innerHTML += "<br /> <li> <strong> Operación " + (i + 1) + ": <strong> </li>";
    if(Array.isArray(operaciones[i]))
    {
      operacionesRealizadas.innerHTML += "<strong> Monto: $" + calcularMonto(operaciones[i]) + "</strong> <br/>";
      for(b of operaciones[i])
      {
        operacionesRealizadas.innerHTML += b.mostrarValor() + "<br />";
      }
    }
    else
    {
        operacionesRealizadas.innerHTML += "Operación no exitosa <br />";
    }
  }
}

function actualizarMontoCaja(entregado) {
  if(Array.isArray(entregado))
  {
    for(b of entregado)
    {
      var c = caja.find(element => element.valor == b.valor);
      c.cantidad -= b.cantidad
    }
    montoCaja.innerHTML = "<h2> Actualmente el cajero tiene: " + calcularMonto(caja) + "</h2>";
  }
}

Luis Fernando Cruz

Ayuda cuando ejecuto el html en el navegador en el Console me lanza un error que dice
Uncaught TypeError: Cannot read property ‘addEventListener’ of null
at cajero.js:28
(anonymous) @ cajero.js:28
ya revise como 100 veces la linea de codigo 28 la cual es
b.addEventListener(“click”, entregarDinero);
busque y busque el error pero no encontré nada.
por favor ocupo una solución ya o sino no podre continuar el curso

Ferd Condas

Aquí les dejo mi cajero
https://fer80.github.io/Cajero/
Captura de Pantalla 2021-01-10 a la(s) 8.08.47 a. m..png

Brian Ángel Gabriel García Cesín

Me encantó este curso, quise darle un diseño un poco más bonito a mi cajero. Amé el curso en serio, casi lloré de emoción cuando mi servidor corrió
Imagen 1.png
Imagen 2.png
Imagen 3.png

Cristian Andres Ladino Peña

Pues bueno despues de 2 días de muchos intentos lo logré jeje. Logré cumplir los retos pero la parte de optimizar código agradeceria que me comenten en todo lo que vean que se puede reducir para lograr lo mismo. 😃

Código de .js

// clase billete, actor principal del código.
class Billete
{
  constructor (img, v, c)
  {
    this.imagen = new Image ();
    this.imgBillete = img;
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = rutaimg[this.imgBillete];
  }
}

// img src
var rutaimg = [];
rutaimg["cienmil"] = "billetes/cienmil.png";
rutaimg["cincuentamil"] = "billetes/cincuentamil.jpg";
rutaimg["veintemil"] = "billetes/veintemil.jpg";
rutaimg["diezmil"] = "billetes/diezmil.jpg";
rutaimg["cincomil"] = "billetes/cincomil.jpg";
rutaimg["dosmil"] = "billetes/dosmil.png";
rutaimg["mil"] = "billetes/mil.jpg";


// billetes de caja y entregados
var caja = [];
var entregado = [];
caja.push( new Billete("cienmil", 100000, 10) );
caja.push( new Billete("cincuentamil", 50000, 15) );
caja.push( new Billete("veintemil", 20000, 20) );
caja.push( new Billete("diezmil", 10000, 15) );
caja.push( new Billete("cincomil", 5000, 5) );
caja.push( new Billete("dosmil", 2000, 5) );
caja.push( new Billete("mil", 1000, 5) );


//variables
var saldoBilletes = document.getElementById("saldoBilletes");
var saldoPesos = document.getElementById("saldoPesos");
var saldoDisponible = document.getElementById("saldoBilletes");
var reiniciar = document.getElementById("reiniciar");
var resultado = document.getElementById("resultado");
var finalizado = document.getElementById("finalizado");
var enter = document.addEventListener("keydown", entregarBilletes2);
var t = document.getElementById("dinero");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarBilletes);
var dinero;
var div = 0;
var papeles = 0;

// Extraer billetes con la tecla Enter
function entregarBilletes2(evento)
{
  if (evento.keyCode == 13)
  {
    entregarBilletes();
  }
}

// Saldo de billetes
mostrarSaldoBilletes();  //Muestra el saldo inicial de billetes

function mostrarSaldoBilletes()
{
  saldoBilletes.innerHTML = "";  //Elimina el saldo anterior y deja el espacio vacio para la función
  for (var bill of caja)
  {
    if(bill.cantidad > 1)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else if (bill.cantidad == 0)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else
    {
      saldoBilletes.innerHTML += bill.cantidad + " billete de " + bill.valor + "<br />";
    }
  }
}

// Función con algoritmo del cajero
function entregarBilletes()
{
  entregado = [];  //Limpia los datos de entregado para que la funcion calcular billetes y saldo funcione
  dinero = parseInt(t.value);
  finalizado.innerHTML = "Usted ha recibido:";
  for (var bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);
      if (div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(bi.imgBillete, bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad = bi.cantidad - papeles;
    }

  }
  if (dinero > 0)
    {
      resultado.innerHTML = "";
      finalizado.innerHTML = "";
      document.getElementById("sinDinero");
      sinDinero.innerHTML = "No tengo los billetes para darte el dinero que necesitas..";
    }
  else
  {
    for (var e of entregado)
    {
      sinDinero.innerHTML = "";
      if (e.cantidad >  1 )
      {
        resultado.innerHTML += e.cantidad + " billetes de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }
      else if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " billete de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }  // &nbsp; para añadir espacios adicionales ya que html detecta solo el primer espacio
    }
  }
        mostrarSaldoBilletes();
        var totalPesosFinal = calcularSaldoPesos();
        saldoPesos.innerHTML = "Saldo total COP: " + totalPesosFinal;
}


// Función para refrescar el document con el boton "otra vez"
reiniciar.addEventListener("click", reiniciarCajero);

function reiniciarCajero()
{
  document.location.reload();
}

//  Calculo inicial del saldo en pantalla
var totalPesos = calcularSaldoPesos();
saldoPesos.innerHTML = "Saldo total COP: " + totalPesos;

// Función para calcular saldo en pantalla
function calcularSaldoPesos()
{
  var y = 0;
  for (var bill of caja)
  {
    y = (bill.cantidad * bill.valor) + y;
  }
  return y;
}```


html

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>Bienvenido al cajero MrCrisjan</title>
<style>
body
{
background-color: #d3cfb3;
text-align: center;
font-family: serif;
}
.column
{
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after
{
content: “”;
display: table;
clear: both;
}
</style>
</head>
<body>
<div class=“row”>
<div class=“column” name=“left”>
<br /><br /><hr color="#47646b" />
<h2><font color="#e21b1b">¿Como usar el cajero?</font></h2>
<p>> Pon la cantidad de dinero que <br />quieres sacar en billetes (COP).</p>
<p>> Haz click en el boton “extraer”!</p>
<p>> Recuerda que hay dinero limitado, <br />puedes ver la cantidad de billetes
<br />al lado derecho.</p>
<p>*Haz click en el boton “<strong>Otra vez</strong>” para
<br />reiniciar el saldo.</p><br /><hr color="#47646b"/>
</div>
<div class=“column” name=“center”>
<p><input type=“button” value=“Otra vez” id=“reiniciar”/><p>
<p>
<img src=“cajero.gif” />
</p>
<p>
<input type=“number” id=“dinero” />
<input type=“button” value=“Extraer” id=“extraer” />
</p>
<p id=“finalizado”></p>
<p id=“sinDinero”></p>
<p id=“resultado”></p>
</div>
<div class=“column” name=“right”>
<br /><br /><hr color="#47646b" />
<h2><font color="#e21b1b">Saldo en la maquina:</font></h2>
<p>En el cajero hay una cantidad limitada de<br />
billetes. Abajo puedes ver el balance actual.</p>
<p id=“saldoBilletes” style=“background-color: #e8e8e8 ;color: red”></p>
<p id=“saldoPesos” style=“background-color: #e8e8e8 ;color: blue”></p> <hr color="#47646b"/>
<p style=“text-align: right; font-family: cursive ; font-size: 8pt ; color: black”>Made by CrisjanLp</p>
</div>
</div>
<script type=“text/javascript” src=“cajero.js”></script>
</body>
</html>```

Pablo Gabriel Mederos Caballero

Qué les parece mi código? Cada vez que solicitan dinero el resultado se recarga. También aparecen las imágenes con un tamaño quizá adecuado, te dice cuánto dinero queda y si has solicitado más de lo que hay en caja.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
    </p>
    <p id="resultado"></p>
    <script  charset="utf-8">
    class Billete{
      constructor(v,c, recurso){
        this.valor = v;
        this.cantidad = c;
        this.imgBillete = new Image();
        this.imgBillete.src = recurso;
        this.imgBillete.width = 100;
        this.imgBillete.height = 60;
      }
    }

    function entregarDinero(){
      posicion=0;
        entregado.length=0;
      resultado.innerHTML = "";
      var t = document.getElementById("dinero");
      dinero=parseInt(t.value);

      for (var bi of caja) {
        if(dinero>0){
          div=Math.floor(dinero / bi.valor);
          if (div>bi.cantidad) {
            papeles=bi.cantidad;
          } else {
            papeles = div;
          }

          entregado.push(new Billete(bi.valor,papeles));
          devolucionACaja[posicion]=new Billete (bi.valor,bi.cantidad);
          dinero = dinero - (papeles*bi.valor);
          bi.cantidad -= entregado[posicion].cantidad;
          posicion ++;
        }
      }
      if (dinero>0) {
        if (caja[2].cantidad == 0) {
          resultado.innerHTML = "Quizá no quede dinero en este cajero.<br />  Intenta con una suma menor!";
          caja[0].cantidad = devolucionACaja[0].cantidad;
          caja[1].cantidad = devolucionACaja[1].cantidad;
          caja[2].cantidad = devolucionACaja[2].cantidad;
        }else {
          console.log(dinero);
          resultado.innerHTML = "Solo puedo darte múltiplos de $10";
          posicion=0;
        }
      } else {
      for ( var e of entregado){
        posicion = 0;
        if (e.cantidad>0) {

        resultado.innerHTML = resultado.innerHTML + "Has retirado " + +e.cantidad + " Billetes de $" + e.valor + " ";
        resultado.appendChild(caja[posicion].imgBillete);
        resultado.innerHTML += "<br />";
        posicion ++;
            }
      }
      resultado.innerHTML += "<hr />";
      posicion = 0;
    for (var i of caja) {
      if (i.cantidad > 0) {
          resultado.innerHTML += "Quedan " + i.cantidad + " billetes de " + i.valor + " ";
          resultado.appendChild(caja[posicion].imgBillete);
          resultado.innerHTML += "<br />";
          posicion ++;
      }
      if (caja[2].cantidad == 0) {
        resultado.innerHTML += "<br />Ya no queda dinero!!!"
      }
    }
      }

    }

    var caja = [];
    var devolucionACaja = [];
    var entregado = [];
    var posicion = 0;

    caja.push(new Billete(50,10,"http://cloud10.todocoleccion.online/billetes-extranjeros/tc/2012/05/27/31924929.jpg"));
    caja.push(new Billete(20,30,"http://s03.s3c.es/imag/_v0/600x253/e/2/9/dolares-20.jpg"));
    caja.push(new Billete(10,10, "https://http2.mlstatic.com/antiguo-billete-sello-verde-de-10-dolares-usa-1934-D_NQ_NP_21499-MLA20210481234_122014-F.jpg"));

    var dinero;
    var div = 0;
    var papeles = 0;

    var resultado = document.getElementById("resultado");
    var b = document.getElementById("extraer");
    b.addEventListener("click", entregarDinero);
</script>
  </body>
</html>

clauguzman

var cajatexto=document.getElementById(“valor”);
var boton=document.getElementById(“retirar”);
var mensaje= document.getElementById(“resultado”);
boton.addEventListener(“click”,calcular);

//código para crear la clase de los billetes y luego crearlos.
class billete
{
constructor (n,v,c)
{
this.nombre=n;
this.valor=v;
this.cantidad=c;
}
}

function calcular()
{
var valor= cajatexto.value;
var bolsa_banco=0;
var billetes_entregados= [];

// codigo para crear los billetes
var caja= [];
caja.push(new billete(“Cincuenta”,50000,1));
caja.push(new billete(“Veinte”, 20000,4));
caja.push(new billete(“Diez”, 10000,2));

// codigo para calcular cuanto hay en el banco.
for (i in caja)
{
bolsa_banco= bolsa_banco + (caja[i].valor * caja[i].cantidad);
}
console.log(bolsa_banco);

// Código para validar que el banco tenga la plata y que el valor ingresado sea válido, es decir que sea mayor que cero y en múltiplos de 10
if (valor <= bolsa_banco && valor % 10000 == 0)
{
for (j in caja)
{
cantidad_billetes= Math.floor(valor/caja[j].valor)
if (cantidad_billetes <= caja[j].cantidad )
{
billetes_entregados[j]=cantidad_billetes;
valor = valor - billetes_entregados[j] * caja[j].valor;

}
else
{
billetes_entregados[j]= caja[j].cantidad;
valor = valor - (billetes_entregados[j]* caja[j].valor);
}
mensaje.innerHTML = mensaje.innerHTML+ "Billetes de <strong>" + caja[j].nombre + " Mil entregados: " + billetes_entregados[j] + "</strong></br>";
}

mensaje.innerHTML= mensaje.innerHTML+ "Monto total etregado:  <strong>" + cajatexto.value + "</strong></br>";

}
else
{
mensaje.innerHTML=mensaje.innerHTML+“el monto NO es válido”;
}

}

Pablo Juarez Castillo

var imagenes = [];
imagenes[“100”] = “billete100.jpg”;
imagenes[“50”] = “billete50.jpg”;
imagenes[“20”] = “billete20.jpg”;
imagenes[“10”] = “billete10.jpg”;

class Billete
{
constructor(v, c)
{
this.valor = v;
this.cantidad = c;
this.imagen = new Image();
this.imagen.src = imagenes[this.valor];
}
}

var caja = [];
caja.push( new Billete(100, 20) );
caja.push( new Billete(50, 30) );
caja.push( new Billete(20, 20) );
caja.push( new Billete(10, 20) );

contar();

var div = 0;
var papeles = 0;

var resultado = document.getElementById(“resultado”);
var b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

}
else
{
	resultado.innerHTML += "Lo siento no contamos con ese saldo <hr />";
}

}

function contar()
{
total = 0
for (var tot of caja)
{
total = total + tot.valor * tot.cantidad;
}
console.log(total);
}

EmpiricalCoder

Hice mi tarea y me tomé la libertad de implementarle algunas modificaciones y de añadirle algunas cosas que detallo a continuación:

1. Separé la clase billetes en un archivo aparte llamado billetes.js.

2. Creé la función recargarAtm para darle la oportunidad al usuario de cargar el ATM con el tipo y cantidad de billetes que ellos deseen.

3. Quite el input tipo text y cree en su lugar dos botones con las opciones de Extraer Dinero y Recargar ATM, los montos se piden a través de un Prompt

Dejo a continuación una imagen de como se ve y el código de los respectivos archivos:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Cajero Automatico</title>
</head>

<body>
    <p>
        <img src="cajero.gif" alt="atm">
    </p>
    <h3>¿Que tipo de operacion deseas hacer?</h3>
    <p>
        <input type="button" value="Extraer Dinero" id="extraer">
        <input type="button" value="Recargar ATM" id="recargar">
    </p>
    <p id="resultado"></p>
    <script src="billetes.js"></script>
    <script src="cajero.js"></script>
</body>
</html>```

**BILLETES.js**

class billetes
{
constructor(valor, cantidad)
{
this.valor = valor;
this.cantidad = cantidad;
}
}

**CAJERO.js**

//Declaracion de Variables
var caja = [];
var entregado = [];
var dinero;
var div;
var papeles;
var mostrar = document.getElementById(“resultado”);
var extraer = document.getElementById(“extraer”);
var recargar = document.getElementById(“recargar”);

//Declaracion de Funciones

function entregarDinero()
{
mostrar.innerHTML = “”;
dinero = parseInt(prompt(“Cuanto dinero deseas retirar”));

for(var bi of caja)
{
   if (dinero > 0)
   {
       div = Math.floor(dinero / bi.valor);
       if (div > bi.cantidad)
        {
            papeles = bi.cantidad;
        }
       else
        {
            papeles = div;
        }
       
       entregado.push( new billetes(bi.valor, papeles) );
       dinero = dinero - (bi.valor * papeles);
   }
}

if (dinero > 0)
{
    mostrar.innerHTML = "El monto solicitado no puede ser despachado :(";
}
else
{
    for (var e of entregado)
    {
        if(e.cantidad != 0)
        {
            mostrar.innerHTML += "Entregado: " + e.cantidad + " billete(s) de $" + e.valor + "<br>";
        }
    }
}

}

function recargarAtm()
{
mostrar.innerHTML = “”;
var valor = parseInt(prompt(“Ingrese el valor del billete”));
var cantidad = parseInt(prompt(“Ingrese la cantidad de billetes”));
caja.push( new billetes(valor, cantidad) );
mostrar.innerHTML = “Se han cargado " + cantidad + " billete(s) de $” + valor;
}

//Inicio del programa
extraer.addEventListener(“click”, entregarDinero);
recargar.addEventListener(“click”, recargarAtm);

Los invito a que lo prueben y se diviertan!

jonathan sanchez

q aprendimos:

como llevar un diagrama de flujo a codigo de programacion.
lo ideal es usar innerHTML y no document.write().
hemos aprendido un nuevo operador += indica que la variable es igual a su valor mas lo que hay despues del operador.

Pablo André Vásquez Romualdo

Aqui dejo mi aporte
HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ATM PLATZI</title>
    <style media="screen">
      .bill{
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="ATM">
      <img src="cajero.png" alt="" /><br>
      <input type="number" id="Salida" placeholder="0.00" value="55"><br>

      <input type="button" id="request" value="Confirmar"><br>
    </div>
    <div id="Entrega">
      <img src="B1.png" alt="" /><br
    </div>

  </body>
  <script type="text/javascript" src="ATM.js">

  </script>
</html>

// DECLARACION DE VARIABLES NORMALES
var dineroMaximo = 0;
var boton = document.getElementById('request');
boton.addEventListener('click',comenzar);

// CREACION DE OBJETO BILLETE
function Billete (valor = 0,cantidad = 1, path){
    // valor que actua como valor y como ID
    this.valor = valor;
    // cantidad para contabilizar
    this.cantidad = cantidad;
    // nombre de la img vinculada al billete
    this.img = path;
}
// DECLARACION DE CAJA
var Caja = [];
Caja.push(new Billete(100,5,"B100.png"));
Caja.push(new Billete(50,10,"B50.png"));
Caja.push(new Billete(20,20,"B20.png"));
Caja.push(new Billete(10,30,"B10.png"));
Caja.push(new Billete(5,50,"B5.png"));
Caja.push(new Billete(1,100,"B1.png"));
// CONTABILIZAR DINERO EN CAJA
for(billete of Caja){
  console.log(billete);
  dineroMaximo+= billete.cantidad * billete.valor;
}
function actualizarCaja(retiro) {
  // ciclo por cada billete distinto en retiro
  for (bill of retiro){
    // resta la cantidad de billetes que tengo que retirar del cajero
    Caja.find(x => x.valor === bill.valor).cantidad -= bill.cantidad;
    console.log(Caja.find(x => x.valor === bill.valor));
  }
  for(billete of Caja){
    // suma el valor de los billetes por la cantidad para guardar cuando dinero hay
    dineroMaximo+= billete.cantidad * billete.valor;
  }
}
console.log(dineroMaximo);
// FUNCION DE ACCION
function comenzar() {
  // DECLARACION DE IFORMACION DEL USUARIO
  var error ="";
  var dineroAccion = document.getElementById('Salida').value;
  var Retiro = [];
  var billete_temp = new Billete(1,0,"B1.png");
  var dinero_acumulado = dineroAccion;
  dineroAccion = parseInt(dineroAccion);
  // SI TENEMOS SUFICIENTE DINERO
  if(dineroAccion <= dineroMaximo){
      // Incia el ciclo de comprobación
      for(billete_caja of Caja){
        // Igualo un billete temporar al de la caja
        billete_temp.valor = billete_caja.valor;
        billete_temp.img = billete_caja.img;
        console.log(billete_temp.img);
        // si ya tengo el dinero salgo del ciclo
        if(dinero_acumulado ==0){
          break;
        }
        // si el dinero de la accion - el dinero acumulado es mayor o igual al del billete
        if(dinero_acumulado >= billete_temp.valor){
          // iguala la cantidad a un numero entero y define cuantos hay que dar
          billete_temp.cantidad = Math.floor(dinero_acumulado / billete_caja.valor);
          // si la cantidad es mayor a la que tiene el cajero lo pone al maximo
          if(billete_temp.cantidad > billete_caja.cantidad){
            billete_temp.cantidad = billete_caja.cantidad;
          }
          // resta la cantidad de los billetes que ya estan subidos para entregar
          dinero_acumulado -= billete_temp.cantidad * billete_temp.valor;
          // guarda el objeto del billete con el valor y la cantidad, Si la cantidad es mayor a 0
          if(billete_temp.cantidad> 0)
          Retiro.push(new Billete(billete_temp.valor, billete_temp.cantidad,billete_temp.img));
        }

      }
      if(dinero_acumulado >0){
        error += "No fue posible retirar la cantidad requerida <br>";
      }else {
        // Actualiza la cantidad que el cajero tiene.
        actualizarCaja(Retiro);
        // se muestra un resultado fanci de la cantidad de dinero entregada.
        say = "<strong>Se te ha Entregado: </strong><br/>";
        for(bill of Retiro){
          // acumula la cantidad de billetes que se han dado.
          say += "<img src='"+ bill.img + "' class='bill'/>" + "x" + bill.cantidad +"<br/>";

      }

      }
      document.getElementById('Entrega').innerHTML = say;
  }else{
    // en caso de no tener suficiente dinero en el cajero
    error +="El Cajero no dispone de suficiente dinero<br>";
  }
  if(error != "")
  document.getElementById('Entrega').innerHTML = error;
}

Sergio Angel Noriega Cantillo

ingeniero hack voy a ahcer el curso desde el principio esta fuerte esos codigos

laura

Que dificil ! 😦

robertocorreareyes

Anexo codigo…

/* RCR Febrero 2019*/

var imagenes = [];
imagenes["1"] = "uno.jpg";
imagenes["2"] = "dos.jpg";
imagenes["5"] = "cinco.jpg";
imagenes["10"] = "diez.jpg";
imagenes["20"] = "veinte.jpg";
imagenes["50"] = "cincuenta.jpg";
imagenes["100"] = "cien.jpg";

/* Definir el valor de los billetes y la cantidad
   de billetes */
class Billete {
  constructor(valor, cantidad) {
    this.valor = valor;
    this.cantidad = cantidad;
    this.imagen = new Image();

    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero() {

  var di = document.getElementById('txtDinero');
  dinero = parseInt(di.value);

  // Se inicializa el arreglo para
  // para mostrar solo lo procesado la última vez
  entregado = [];

  for (var bi of caja )
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero/bi.valor);
      if (div > bi.cantidad)
        papeles = bi.cantidad;
      else
        papeles = div;

      entregado.push( new Billete(bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
    }
      //console.log(div);
  }

  if (dinero > 0 )
    lblres.innerHTML = 'Soy un cajero pobre y no tengo dinero suficiente para tu solicitud';
    //console.log('Soy un cajero pobre y no tengo dinero suficiente para tu solicitud');
  else {
        lblres.innerHTML = '';
        for(var e of entregado)
        {
          if(e.cantidad > 0)
          {
            //lblres.innerHTML += e.cantidad + " billetes de $" + e.valor + " &nbsp; = " + (e.cantidad * e.valor) + "&nbsp;<img src=" + e.imagen.src + " />" + "<hr />";
            lblres.innerHTML += e.cantidad + " billetes de " + "&nbsp;<img src=" + e.imagen.src + " />" + " &nbsp; = " + (e.cantidad * e.valor) + "<hr />";
          }
        }
  }

  console.log(entregado);
  console.log(dinero);
  //console.log(bi);
}

/* Cuantos billetes y de que denominación */
var caja = [];
/* Cuantos billetes y de que denominación
   se van a entregar */
var entregado = [];

/* Se rellena la caja(cajero) de billetes */
caja.push( new Billete(100,10) );
caja.push( new Billete(50,10) );
caja.push( new Billete(20,30) );
caja.push( new Billete(10,10) );
caja.push( new Billete(5,10) );
caja.push( new Billete(2,10) );
caja.push( new Billete(1,10) );

var dinero = 0;
var div = 0;
var papeles = 0;

var lblres = document.getElementById('lblResultado');
var btn = document.getElementById('btnExtraer');
btn.addEventListener('click', entregarDinero);

sebastian_jose

Valentina Bacherer

No esta muy glamoroso pero funciona!

var imagenes = []
{
  imagenes['b10'] = 'billete10.png' 
  imagenes['b20'] = 'billete20.png' 
  imagenes['b50'] = 'billete50.png' 
  imagenes['b100'] = 'billete100.png' 
}

class Billete
{
  constructor(v,c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.nombre = 'b' + this.valor;
    this.imagen.src = imagenes[this.nombre];
  }
}

function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  
  for(var bi of caja)
  {
    if (dinero > 0)  //sigue saldo por entregar
    {
      div = Math.floor(dinero / bi.valor );

      if (div > bi.cantidad)// se necesitan + bill de lo que hay
      {
        papeles = bi.cantidad; //asigna cantidad maxima posible
      }
      else
      {
        papeles = div; // asigna cantidad justa necesaria
      }
      entregado.push( new Billete(bi.valor, papeles)); //anota billetes a entregar
      dinero -=  (bi.valor * papeles); //disminuye saldo
      
    }

  }
  if (dinero > 0)
  {
    resultado.innerHTML = "Cajero malo muy pobre";
  }
  else
  {

    for (e of entregado)
    {
      if (e.cantidad > 0) //solo cuando se deben entregar esos billetes
      {
        resultado.innerHTML +=  '<img src=' + e.imagen.src + " /> <br />" + e.cantidad + " billetes de $" + e.valor + "<br />";
      }
    }
  }

}

var caja = [];
var entregado = [];
caja.push (new Billete(100,2));
caja.push (new Billete(50,20));
caja.push (new Billete(20,30));
caja.push (new Billete(10,10));
//caja.push (new Billete(5,5));
var resultado = document.getElementById("resultado");
var dinero;
var div= 0;
var papeles = 0;

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

Adrian Nieves Uribe

![](

Mi aporte, aunque mi código es algo enredoso y me falta pulirlo bastante, hice el ejercicio, lo estructure más como una aplicación de transacciones, en pocas palabras estas son las funcionalidades que realice para el trabajo … Dejo capturas y el código para solicitar retroalimentaciones y seguir mejorando al aprender de esta comunidad, saludos 😊

Página principal, el cajero puede entregar monedas de 10 como cantidad mínima en cambio, pero genero una condición en la que el monto mínimo a solicitar es de 20, para no entregar solo una moneda de 10 … XD.
Cantidad de dinero disponible en el cajero, este es obtenido por una función que es llamada con el evento “load”, así sin importar cuantos objetos de billetes agregué, la app hace el conteo al cargar y comienza el registro de cambios.
Si no se ingresa cantidad en el “input”, se lanza el mensaje del dato necesario.
Una vez ingresado el monto de la transacción solicitada, esta se agrega como dato para mostrar el historial de los movimientos al usuario y realizar la resta de lo entregado al total disponible del cajero.
Se agrega el monto entregado.
Se agrega la lista de dinero entregado, junto a la cantidad y sus imágenes
En caso de ingresar una cantidad no correspondiente a lo que se puede entregar, ejemplo decenas “10-minimo” base al monto solicitado se redondea la cantidad solicitada a un número entero, para poder realizar la entrega, así cuido dos cosas, una, no desacompletar la cantidad disponible en unidades que no sean de mínimo 10 y dos, seguir con la transacción sin desesperar al usuario en caso de que escriba un “1” por error, estos sobrantes no reflejan descuento a la cuenta del usuario, ni a las resta en lo disponible en el cajero.
Al entregarse moneda(s) se especifica el término “Billete” por “moneda”, con una condicional.
Si la cantidad solicitada supera lo disponible en el cajero, se entrega todo el dinero disponible, mencionando al usuario del sobrante que no se pudo entregar y a su vez desactivando el “botón” para no permitir mas transacciones.

class Billetes{
 constructor(v,c,m){
    this.valor=v;
    this.cantidad=c;
    this.monto=m;
    this.imagen=new Image();
    this.imagen.src=imagenes[this.monto];
 }   
}

var imagenes=[];//Array asociativo, contiene las imagenes de los billetes.
imagenes["200"]="./img/two-hundred-one.png";
imagenes["100"]="./img/one-hundred-one.png";
imagenes["50"]="./img/fifty-one.png";
imagenes["20"]="./img/twenty-one.png";
imagenes["10"]="./img/money-one.png";

//Detecta cambios en el monto dentro del "input", para aplicar cambios en casa transacción cada que se llama a esta función.
function monto(){
    var dinero=trans.value;
    return dinero;
}
//Ejecuta y valida la transacción del ATM.
function transaction(){
    var cantidad=monto();
    var cantidadEntregada=cantidad;
    if(monto()>=20){
        document.getElementById("info").innerHTML="<h3>$ "+monto()+"</h3>";
        trans.value="";
        total-=cantidad;
        for(var bi of caja){
            div=Math.floor(cantidad/bi.valor);
            if(div>bi.cantidad){
                papeles=bi.cantidad;
            }else{
                papeles=div;
            }
            if(papeles>0){
                entrega.push(new Billetes(bi.valor,papeles,bi.monto));
                if(bi.valor!=10){
                    document.getElementById("moneyDelivered").innerHTML+="<img src='"+bi.imagen.src+"' class='img-billetes'/> Se entrego(n) <strong> "+papeles+"</strong> Billete(s) de <strong>$: "+bi.valor+" </strong><br/>"; 
                }else{
                    document.getElementById("moneyDelivered").innerHTML+="<img src='"+bi.imagen.src+"' class='img-moneda'/> Se entrego(n) <strong> "+papeles+"</strong> Moneda(s) de <strong>$: "+bi.valor+" </strong><br/>"; 
                }
            }
            cantidad=cantidad-(bi.valor*papeles);
        }
        if(cantidad!=0){
            total+=cantidad; 
            document.getElementById("rest").innerHTML="<strong>NOTA:</strong> Quedo una cantidad sobrante de <strong>$ "+cantidad+"</strong> en tu transacción solicitada que no se pudo entregar por falta de denominación en valor, <strong>este sobrante no refleja cobro en tu cuenta.</strong>";
        }
        document.getElementById("moneyAtm").innerHTML="Disponible en Cajero: "+total;
        document.getElementById("transaction").innerHTML="Monto entregado: <br/><strong style='font-size:3rem'>$ "+(cantidadEntregada-cantidad)+"</strong>";
    }else if(monto()<=0){
        document.getElementById("info").innerHTML="<small style='color:#e9967a; font-size:1rem; font-weight:normal;'>No has escrito un monto aceptado para la transición.</small>";
        trans.value="";
        trans.focus();
    }
    if(total==0){
        b.disabled=true;
        document.getElementById("moneyAtm").innerHTML="<small style='color:#fa8282; font-size:.9rem;'>El cajero se a quedado sin fondos para realizar mas transacciones :( </small>";
    }
}

var trans=document.getElementById("dinero");
var b=document.getElementById("extraer-dinero");
b.addEventListener("click",/*entregarDinero*/transaction);

//Inserta el valor disponible de dinero en el ATM al cargar la página.
window.addEventListener("load",function(){
    document.getElementById("moneyAtm").innerHTML+="<br/> $ "+conteo();
});
//Devuelve el valor total del dinero con el que arranca el ATM.
function conteo(){
    total=0;
    for(var bi of caja){
        var conteo=bi.valor*bi.cantidad;
        total+=conteo;
    }
    return total;
}

var total=0;
var div=0;
var papeles=0;

var caja=[];//Array de objetos, contenedores del valor y la cantidas de dinero.
caja.push(new Billetes(200,10,"200"));
caja.push(new Billetes(100,5,"100"));
caja.push(new Billetes(50,6,"50"));
caja.push(new Billetes(20,8,"20"));
caja.push(new Billetes(10,4,"10"));

var entrega=[];//Array de objetos, contiene el valor y cantidad dei monto a entregar.
// caja.push(new Billetes(10,5));```

gjfranco

De momento solo pude completar el colocar las imagenes, un dolor de cabeza como concatenar la imagen pero al final era bastante simple dejo mi ejemplo y una imagen, con los billetes peruanos

class Billete
{
  constructor(v,c)
  {
    this.imagen= new Image();
    this.valor= v;
    this.cantidad = c;

    this.imagen.src=imagenes[this.valor];
  }
}


function entregarDinero()
{
  t = document.getElementById("dinero");
  dinero= parseInt(t.value);
  for(var bi of caja)
  {
    if(dinero > 0)
    {
      div=Math.floor(dinero/bi.valor);
      if (div>bi.cantidad)
      {
        papeles= bi.cantidad;
      }
      else
      {
          papeles = div;
      }
      entregado.push(new Billete(bi.valor,papeles));
      dinero = dinero - (bi.valor*papeles);
    }
  }
  if(dinero > 0)
  {
    resultado.innerHTML = "No tendo la cantidad necesaria :(";
  }
  else
  {
    for (var e of entregado)
    {
      if (e.cantidad > 0)
      {
         resultado.innerHTML += e.cantidad + " billetes de $" + "<img src=" + e.imagen.src + " /> <br />";
      }
    }
  }

}


var caja=[];
var entregado= [];
var imagenes = [];
imagenes["10"] = "10.png";
imagenes["20"] = "20.png";
imagenes["50"] = "50.png";
imagenes["100"] = "100.png";
imagenes["200"] = "200.png";

caja.push(new Billete(200,5));
caja.push(new Billete(100,10));
caja.push(new Billete(50,20));
caja.push(new Billete(20,20));
caja.push(new Billete(10,5));
var dinero = 0;
var div= 0;
var papeles=0;
var resultado= document.getElementById("resultado");
var b= document.getElementById("retirar");
b.addEventListener("click", entregarDinero);

![](

Ervic

Apuntes de clase:
Cast: el cambio de una variable de un tipo a otro tipo.
inner HTML la forma en la que controlamos el contenido de una etiqueta.
Prueba frecuentemente que tu código funciona.

AlejandroCordoba

Esta es mi resultado pueden verlo en Github Repositorio LiveDemo

class Billete
{
    constructor(v, c, i)
    {
        this.valor = v;
        this.cantidad = c;
        this.img = i;
    }
}

var caja = []; // Billetes que tiene el cajero array Class Billete
var entregado = []; // Billetes que entrego al cliente
var Salieron = 0; // cuanto dinero he sacado en cada retiro
var Totalcaja = 0; // cuanto dinero tengo en total en caja
var dinero = 0; //dinero es la cantidad de dinero que quiere retirar el cliente
var Papeles = 0; // cantidad de billetes a entregar
var resultado = document.getElementById("resultado"); // llamar el div con class resultado del HTML
var RBillete = document.getElementById("R-billete"); // llamar el div con ID R-billete del HTML
var BotonExtraer = document.getElementById("extraer"); // llamar el boton con ID extraer del HTML
BotonExtraer.addEventListener("click", EntregarDinero); // Al presionar el boton de ID extraer del HTML
var sale = document.getElementById("sale"); // llamar el h5 con ID sale del HTML
var encaja = document.getElementById("encaja"); // llamar el h5 con ID encaja del HTML

//Vamos a contar cuanto dinero tenemos disponible en caja al cargar la pagina
$( document ).ready(function() 
{ totalencaja(); 
    console.log("Buscame en Github ACordobaDev")
});

// Empujar nuevos billetes a la class Billete  de la linea 1
caja.push( new Billete (50, 15, "img/50.png" ) ); // 50 = valor, 3 = Cantidad , imagen
caja.push( new Billete (20, 9, "img/20.png" ) ); // 20 = valor, 2 = Cantidad , imagen
caja.push( new Billete (10, 20, "img/10.png" ) ); // 10 = valor, 2 = Cantidad , imagen

// Algoritmo para sacar el dinero
function EntregarDinero ()
{   
    entregado.length = 0 ; // limpiar el array de billetes a entregar
    var t =document.getElementById("dinero"); // llamar el input con ID dinero  
    dinero = parseInt( t.value); // dinero es igual al valor entero del input con ID dinero

    resultado.innerHTML = "";
    RBillete.innerHTML = "";

    if (Totalcaja >= dinero)
    {
        Salieron += dinero ;
        for ( var bi of caja)
        {
            Division = Math.floor(dinero / bi.valor);
            if (Division > bi.cantidad)
            {
                Papeles = bi.cantidad;
            }
            else
            {
                Papeles = Division;
            }
            dinero = dinero - (bi.valor * Papeles);
            bi.cantidad -= Papeles;
            entregado.push( new Billete(bi.valor, Papeles, bi.img));

        }
         for( var e of entregado)
         {
            if (e.cantidad > 0)  // si la cantidad de billetes a entregar es mayor de 0
            {
                resultado.innerHTML += '<p>' + e.cantidad + " Billetes de $" + e.valor +"  <p/>" ; // imprimo la cantidad y el valor del billete
                RBillete.innerHTML +=  '<img src="'+e.img+'" width="100" class="img-fluid" />' ; // imprimo la imagen del billete
            }
         }

         sale.innerHTML = "Haz Sacado : " + Salieron;
         encaja.innerHTML = "Diponible : " + Totalcaja;
         totalencaja(); 

    }

    else
    {
        resultado.innerHTML = "<p> Lo siento no tengo esa cantidad </p>"; // mostraer en HTML 
     }

}

// Funcion para calcular el valor total del dinero en el cajero
function totalencaja ()
{
    Totalcaja =0;
     for ( var conteo of caja)
    {
        Totalcaja += (conteo.valor * conteo.cantidad);
        document.getElementById(conteo.valor).innerHTML = conteo.cantidad;
        
    }
 
    encaja.innerHTML = "Diponible : " + Totalcaja;
    
}

Luis Alfredo Moreno Luna

Hola, traté de hacer el código más compacto pero lo hice y luego le puse más cosas asi que valió xD pero si a alguno tiene uns sugerencia de cómo hacerlo más compacto se los agradecería 😃
Aquí esta como se ve

Y el código

//Desafio, mostrar los billetes con imágenes 💵
//La caja del cajero se quede vacía sin recargar, que muestre hasta que se quede sin dinero
//Poner la versión más compacta
class Billete{
    constructor(v, c, i){
        this.valor = v;
        this.cantidad = c;
        this.image = i;
    }
}
//Objeto con el nombre de archivo de imagenes
var bImg = {
    20: "20.jpg",
    50: "50.jpg",
    100: "100.jpg",
    200: "200.jpg"
}

var caja = [];

caja.push(new Billete(200, 5, bImg[200]));
caja.push(new Billete(100, 10, bImg[100]));
caja.push(new Billete(50, 5, bImg[50]));
caja.push(new Billete(20, 10, bImg[20]));

var dineroDisponible = dineroTotal();
var div = 0;
var papeles = 0;


var r = document.getElementById("res");
var b = document.getElementById("retirar");

b.addEventListener("click", entregarDinero);

//Funcion que calcula el total de dinero disponible en función a 
//la cantidad de billetes que esten en caja
function dineroTotal(){
    var t = 0;
    for(var i of caja){
        t = t + (i.cantidad * i.valor);
    }
    return t;
}

function entregarDinero(){
    //Se declara el array de entregado aqui para que se ''reseteé'' cada
    //vez que se llama la función.
    var entregado = [];
    //Se declara dinero aqui ya que solo se usa en la funcion
    //y se le hace el parse int sin hacer la var t
    var dinero = parseInt(document.getElementById("dinero").value);
    if(dinero <= dineroDisponible && dinero > 0){
        for(var bi of caja){
            div = Math.floor(dinero / bi.valor);
            if(div > bi.cantidad){
                papeles = bi.cantidad;
            }else{
                 papeles = div;
            }
            entregado.push(new Billete(bi.valor,papeles,bi.image));
            dinero = dinero - (bi.valor * papeles);
        }
        if(dinero > 0){
            r.innerHTML += "No se puede dar esa cantidad<hr>";
        }else{
            //Se llama esta funcion aqui para hacer update de la caja una vez
            //comprobado que se puede entregar la cantidad que el usuario puso
            updateCaja(entregado);
            for(var e of entregado){
                if(e.cantidad > 0){
                    for(var i=0; i < e.cantidad;i++){
                        //InnerHTMl pone lo que se asignes dentro del elemento html (r)
                        r.innerHTML += '<img src="'+e.image+'" class="billete"> ';
                    }
                    r.innerHTML += "<br>";  
                }
            }
            r.innerHTML += "<hr/>"
        }
        //Se hace un update de la variable dineroDisponeble con los valores actuales de la caja
        dineroDisponible = dineroTotal();
    }else{
        r.innerHTML += "No hay dinero suficiente en el cajero<br/>";
    }
    
}

//con este doble ciclo e if comparamos una casilla de caja con todas
//las de entregado y si tienen el mismo valor (o sea si son el mismo billete)
//que reste la cantidad de billtes entregados en los que se tiene en caja.
function updateCaja(entregado){
    for (c in caja){
        for (e in entregado){
            if(caja[c].valor == entregado[e].valor){
                caja[c].cantidad = caja[c].cantidad - entregado[e].cantidad;
            }
        }
    }
}

Cristian Andres Ladino Peña

Hice bastantes mejoras y jugué un poquito con el .css
Aún tiene detalles por mejorar y un par de bugs, pero creo que sería interesante mejorarlo para finalizar una app de simulador de cajero. 😀

// clase billete, actor principal del código.
class Billete
{
  constructor (img, v, c)
  {
    this.imagen = new Image ();
    this.imgBillete = img;
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = rutaimg[this.imgBillete];
  }
}

// img src
var rutaimg = [];
rutaimg["cienmil"] = "billetes/cienmil.png";
rutaimg["cincuentamil"] = "billetes/cincuentamil.jpg";
rutaimg["veintemil"] = "billetes/veintemil.jpg";
rutaimg["diezmil"] = "billetes/diezmil.jpg";
rutaimg["cincomil"] = "billetes/cincomil.jpg";
rutaimg["dosmil"] = "billetes/dosmil.png";
rutaimg["mil"] = "billetes/mil.jpg";

// Función de números aleatorios
function aleatorio(max, min)
{
  var resultado = Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}

// Cantidad de billetes aleatorios
var cantidadBilletes = new Array();

for (i = 0; i <= 6; i++)
{
  var x = aleatorio(1, 100)
  cantidadBilletes[i] = x;
}

// billetes de caja y entregados
var caja = [];
var entregado = [];
caja.push( new Billete("cienmil", 100000, cantidadBilletes[0] ) );
caja.push( new Billete("cincuentamil", 50000, cantidadBilletes[1]) );
caja.push( new Billete("veintemil", 20000, cantidadBilletes[2]) );
caja.push( new Billete("diezmil", 10000, cantidadBilletes[3]) );
caja.push( new Billete("cincomil", 5000, cantidadBilletes[4]) );
caja.push( new Billete("dosmil", 2000, cantidadBilletes[5]) );
caja.push( new Billete("mil", 1000, cantidadBilletes[6]) );


//variables
var saldoBilletes = document.getElementById("saldoBilletes");
var saldoPesos = document.getElementById("saldoPesos");
var saldoDisponible = document.getElementById("saldoBilletes");
var reiniciar = document.getElementById("reiniciar");
var resultado = document.getElementById("resultado");
var finalizado = document.getElementById("finalizado");
var enter = document.addEventListener("keydown", entregarBilletes2);
var t = document.getElementById("dinero");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarBilletes);
var dinero;
var div = 0;
var papeles = 0;

// Extraer billetes con la tecla Enter
function entregarBilletes2(evento)
{
  document.getElementById("sinDinero");
  if (evento.keyCode == 13)
  {
    entregarBilletes();
  }
}

// Saldo de billetes
mostrarSaldoBilletes();  //Muestra el saldo inicial de billetes

function mostrarSaldoBilletes()
{
  saldoBilletes.innerHTML = "";  //Elimina el saldo anterior y deja el espacio vacio para la función
  for (var bill of caja)
  {
    if(bill.cantidad > 1)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else if (bill.cantidad == 0)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else
    {
      saldoBilletes.innerHTML += bill.cantidad + " billete de " + bill.valor + "<br />";
    }
  }
}

// Función con algoritmo del cajero
function entregarBilletes()
{
  var clave = parseInt(prompt("Ingrese la clave para retirar"));
  if (clave == 1837)
  {
  resultado.innerHTML = "";
  entregado = [];  //Limpia los datos de entregado para que la funcion calcular billetes y saldo funcione
  dinero = parseInt(t.value);
  finalizado.innerHTML = "Usted ha recibido:";
  for (var bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);
      if (div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(bi.imgBillete, bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad = bi.cantidad - papeles;
    }

  }
  if (dinero > 0)
    {
      resultado.innerHTML = "";
      finalizado.innerHTML = "";
      document.getElementById("sinDinero");
      sinDinero.innerHTML = "No tengo los billetes para darte el dinero que necesitas..";
    }
  else
  {
    for (var e of entregado)
    {
      sinDinero.innerHTML = "";
      if (e.cantidad >  1 )
      {
        resultado.innerHTML += e.cantidad + " billetes de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }
      else if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " billete de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }  // &nbsp; para añadir espacios adicionales ya que html detecta solo el primer espacio
    }
  }
        mostrarSaldoBilletes();
        var totalPesosFinal = calcularSaldoPesos();
        saldoPesos.innerHTML = "Saldo total COP: " + totalPesosFinal;
  }
  else
  {
    resultado.innerHTML = "Clave incorrecta, intente nuevamente.";
  }
}


// Función para refrescar el document con el boton "otra vez"
reiniciar.addEventListener("click", reiniciarCajero);

function reiniciarCajero()
{
  document.location.reload();
}

//  Calculo inicial del saldo en pantalla
var totalPesos = calcularSaldoPesos();
saldoPesos.innerHTML = "Saldo total COP: " + totalPesos;

// Función para calcular saldo en pantalla
function calcularSaldoPesos()
{
  var y = 0;
  for (var bill of caja)
  {
    y = (bill.cantidad * bill.valor) + y;
  }
  return y;
}

be1y

Desafio logrado. Aunque falta optimizar el código.

atm.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Cajero automatico</title>

  <style type="text/css">
    body
    {
      background-color: gray;
      color: white;
      text-align: center;
    }
    h1
    {
      font-size: 24px ;
      font-family: monospace;
    }
    p
    {
      font-size: 16px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>Cajero automático</h1>
  <p>
    <img src="cajero.gif" />
  </p>
  <p>
    <input type="number" id="dinero" />
    <input type="button" value="Extraer" id="extraer" />
  </p>
  <p id="inicio"></p>
  <p id="resultado"></p>
  <p id="imgBilletes"></p>
  <input type="button" value="Recargar" style="display:none" id="recargar" />

  <script src= "billetes.js"></script>
  <script src= "cajero.js"></script>
</body>
</html>

billetes.js

class Billete {
  constructor(valor, cantidad) {
    this.imagen = new Image();
    this.valor = valor;
    this.cantidad = cantidad;

    this.imagen.src = imagenes[this.valor];
  }

  mostrarBilletes()
  {
    imgB.innerHTML += "<br />" + this.cantidad + " billettes de " + this.valor + "$ <br />";
    for (var i = 0; i < this.cantidad; i++) {
      imgB.innerHTML += "   " + '<img src="' + this.imagen.src + '" width="140" height="60" />';
    }
  }

  calcularSaldo()
  {
    saldoCajero += this.valor * this.cantidad;
  }
}```

cajero.js

var imagenes = []; //contiene las dirección de las imagenes
imagenes[1000] = “mil.png”;
imagenes[500] = “quinientos.png”;
imagenes[200] = “docientos.png”;
imagenes[100] = “cien.png”;
imagenes[50] = “cincuenta.png”;
imagenes[20] = “veinte.png”;
imagenes[10] = “diez.png”;
imagenes[5] = “cinco.png”;

function entregarDinero()
{
var t = document.getElementById(“dinero”);
dinero = parseInt(t.value);
dineroPedido = dinero;
ini.innerHTML = “”;

if (saldoCajero == 0)
{
t.value = “”;
inicializarVar();
imgB.innerHTML = “”;
resultado.innerHTML = “<hr /> Cajero fuera de servicio <br /> No hay dinero! <hr />”;
resultado.innerHTML += “Recargue el cajero para poder realizar transacciones <br />”;
rec.style.display = “block”;

}else
if (dinero > saldoCajero)
{
t.value = “”;
inicializarVar();
imgB.innerHTML = “”;
resultado.innerHTML = “<hr /> No hay dinero suficiente! <br /> modifique el monto <hr />”;
}
else
if (dinero % 5 !== 0)
{
t.value = “”;
inicializarVar();
imgB.innerHTML = “”;
resultado.innerHTML = “<hr /> Modifique el monto! <br /> que sea multiplo de 10 o 5 <hr />”;
}
else
{
extraerDinero();
t.value = “”;
console.log(saldoCajero);

//muestra el saldo del cajero y el total extraído
resultado.innerHTML = "<hr /><strong> Saldo en Cajero: $ " + saldoCajero + "</strong><hr />";
resultado.innerHTML += "Total extraido: $ " + dineroPedido + "<hr />";

//dibuja los billettes
imgB.innerHTML = "Retiró: ";
for (var e of entregado)
{
  if (e.cantidad > 0)
  {
    e.mostrarBilletes();
  }
}

//limpiar el contenedor de entregado
inicializarVar();

}
}

function extraerDinero()
{
for (var bi of caja) {
if (dinero > 0) {
div = Math.floor(dinero / bi.valor);
if(div > bi.cantidad)
{
papeles = bi.cantidad;
}
else {
papeles = div;
}

  entregado.push(new Billete(bi.valor, papeles));
  dinero = dinero - (bi.valor * papeles);
  bi.cantidad -= papeles;
}

}
saldoCajero -= dineroPedido;
}

function inicializarVar()
{
entregado = [];
dineroPedido = 0;
}

function recargarDinero()
{
document.location.reload();
}

var caja = [];
var entregado = [];
caja.push(new Billete(1000, 15));
caja.push(new Billete(500, 10));
caja.push(new Billete(200, 15));
caja.push(new Billete(100, 10));
caja.push(new Billete(50, 10));
caja.push(new Billete(20, 15));
caja.push(new Billete(10, 15));
caja.push(new Billete(5, 10));

var dinero;
var papeles = 0;
var div = 0;
var saldoCajero = 0;

var ini = document.getElementById(“inicio”);
var resultado = document.getElementById(“resultado”);
var imgB = document.getElementById(“imgBilletes”);

var b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

var rec = document.getElementById(“recargar”);
rec.addEventListener(“click”, recargarDinero);

for (var sal of caja)
{
sal.calcularSaldo();
}

ini.innerHTML = “<hr /> Bienvenido! <br /> Ingrese el monto que quiere extraer <hr />”;

Gedo

Bueno le pude meter imagenes, me costo bastante por que tuve que buscar en google jaja ( no supe hacerlo con el resultado.innerHTML )

class Billete
{
  constructor(n, v, c)
  {
    this.nombre = n;
    this.imagen = new Image;
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = img[this.nombre];
  }
}

img = [];
img["$50"] = "Billete50.png";
img["$20"] = "Billete20.png";
img["$10"] = "Billete10.png";

caja = [];
caja.push(new Billete("$50", 50, 10) );
caja.push(new Billete("$20", 20, 30) );
caja.push(new Billete("$10", 10, 50) );

var dinero_requerido = document.getElementById("txt_dinero");
var button = document.getElementById("boton");
button.addEventListener("click", extraerDinero);

var dinero;
var div;
var papeles = 0;
var dinero_total = (caja[0].valor * caja[0].cantidad) + (caja[1].valor * caja[1].cantidad) + (caja[2].valor * caja[2].cantidad)
var resultado = document.getElementById("resultado");

entregado = [];


function extraerDinero()
{
  dinero = parseInt(dinero_requerido.value);

  for(var b of caja)
  {
    if(dinero > 0)
    {
      div = Math.floor(dinero / b.valor)
      if(div > b.cantidad)
      {
        papeles = b.cantidad;
        entregado.push(new Billete(b.nombre, b.valor, papeles))

      }
      else
      {
        papeles = div;
        entregado.push(new Billete(b.nombre, b.valor, papeles))
      }
      dinero = dinero - (papeles * b.valor);
    }
  }

  resultado.innerHTML = "Usted ha retirado: </br>";

  if(dinero > 0)
  {
    resultado.innerHTML = "Lo siento, no puedo darte esa cantidad.";
  }

  else
  {
    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
       for(var papel = 1; papel <= e.cantidad; papel++)
       {
         var nuevoPapel = document.createElement("IMG");
         nuevoPapel.setAttribute("src", img[e.nombre]);
         nuevoPapel.setAttribute("width", 100);
          nuevoPapel.setAttribute("length", 200);
         document.body.appendChild(nuevoPapel)
       }

      }
    }

  }
}```

Abril Darynka Tapia Sosa

Agrego mi resultado del desafio.
![]( Uso del cajero.png


var billete=document.getElementById("billete");
var totalCajero=document.getElementById("totalCajero");
var inputNombre = document.getElementById("numero0");
var dolar = [];
dolar["dolar1"]="img/dolar1.png";
dolar["dolar5"]="img/dolar5.png";
dolar["dolar20"]="img/dolar20.png";

var total=0;
class Billete{
	constructor(v, c, n){
		this.imagen= new Image();
		this.nombre=n;
		this.valor=v;
		this.cantidad=c;
		this.imagen.src=dolar[this.nombre];
	}

	mostrar(){
		billete.appendChild(this.imagen);
		billete.innerHTML += '<span id="cambiar"> Cantidad: '+this.cantidad+'</span><br>' ;
		total = total + (this.cantidad * this.valor);
		totalCajero.innerHTML= 'Dinero en Cajero: <strong>$' +total+'.00</strong>';
	}
}
	var cont=1;
	var  nuevo=0;
function entregarDinero(){
	var t = document.getElementById("dinero");
	dinero=parseInt(t.value);
	for (var bi of caja){
		if(dinero>0){
			div= Math.floor(dinero / bi.valor);
			if(div>bi.cantidad){
				papeles = bi.cantidad;
			}else{
				papeles=div;
			}
		entregado.push(new Billete(bi.valor, papeles));
		dinero = dinero - (bi.valor * papeles); 
		}
	}
	if(dinero>0){
		resultado.innerHTML = 'No puedo darte esa cantidad';
	}else{
		resultado.innerHTML += 'Solicitud #'+cont+'<br>';
		for(var e of entregado){
			if(e.cantidad>0){
				for (var bi of caja){
					if(e.valor==bi.valor){
						for (var i=0; i<e.cantidad; i++){
							// resultado.innerHTML += e.cantidad+' billetes de ';
							resultado.appendChild(bi.imagen);
							resultado.innerHTML += ' &nbsp ';
						}
						resultado.innerHTML += ' <br><br> ';
					}	
				}
			}
		}
		resultado.innerHTML += '<hr /><br>';
		cont++;


		for (var bi of caja){
			for (var en of entregado){
				if(en.valor== bi.valor){
					console.log(bi.valor+' Cantidad : '+bi.cantidad +' - '+ en.cantidad);
					bi.cantidad = bi.cantidad-en.cantidad;
				}
			}
		}
	}

	for (var bi of caja){
		for (var i = 0; i < 3; i++) {
			billete.removeChild(billete.firstChild);
		}	
		total=0;	
	}

	for (freddito of caja) {
		freddito.mostrar();
	}
	
	// console.log(nuevo);
	entregado = [];

}


var caja = [];
var entregado = [];
caja.push(new Billete(20,30, 'dolar20'));
caja.push(new Billete(5,10, 'dolar5'));
caja.push(new Billete(1,5, 'dolar1'));




for (freddito of caja) {
	freddito.mostrar();
}


var dinero=0;
var div=0;
var papeles=0;


var resultado=document.getElementById("resultado");
var b=document.getElementById("extraer");
b.addEventListener("click", entregarDinero);


<code>

diego.arosquipa

Son las casi las 2am pero no podía irme sin terminar el 2do reto que estaba bien interesante. Aquí va mi aporte.

Cajero me muestra lo entregado, el dinero disponible en el cajero y abajo cada una de las operaciones separadas por la línea <hr>

Y por último el código. A falta de tiempo, no lo comenté ni traté de compactarlo así que disculpen si está medio difícil de leer.

var caja = [];
caja.push( new Billete(100, 10));
caja.push( new Billete(50, 10));
caja.push( new Billete(20, 10));
caja.push( new Billete(10, 10));

var dinero;
var div = 0;
var papeles = 0;

var entregado = [];
var totalEntregado = 0;
var dineroEntregado = document.getElementById("dineroEntregado");

var totalDisponible = 0;
var dineroDisponible = document.getElementById("dineroDisponible")

var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

//Muestra dinero disponible en el cajero al inicio//
for (x of caja)
{
  totalDisponible += x.valor * x.cantidad;
  dineroDisponible.innerHTML = totalDisponible;
}

//Función entregar dinero gatillado por el click//
function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value)

  for (bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero/bi.valor)

      if (div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }

      entregado.push( new Billete(bi.valor, papeles));
      dinero = dinero - (bi.valor*papeles)
      //Esta línea actualiza el array Caja de modo que disminuye el saldo disponible//
      bi.cantidad = bi.cantidad - papeles;
    }
  }
  if (dinero > 0)
  {
    resultado.innerHTML = "soy cajero pobre y no tengo dinero";
  }
  else
  {
    for (e of entregado)
    {
      if (e.cantidad > 0)
      {
        totalEntregado += e.valor * e.cantidad;
        dineroEntregado.innerHTML = totalEntregado;
        resultado.innerHTML += e.cantidad + " billetes de $ " + e.valor + "<br>";
      }
    }
    //Limpia el array entregado. De lo contrario crecería con cada click debido al push//
    resultado.innerHTML += "<hr>";
    entregado = [];
  }
  //Limpia la variable totalDisponible de manera que no se sume con el resultado anterior//
  totalDisponible = 0;
  for (x of caja)
  {
    totalDisponible += x.valor * x.cantidad;
    dineroDisponible.innerHTML = totalDisponible;
  }
}

Gonzalo Godoy

–

var imagenes = [];
imagenes[50] = "billete50.png";
imagenes[20] = "billete20.png";
imagenes[10] = "billete10.png";

var dineroLiquido = 0;
var dineroEntregado = 0;
var div = 0;
var papeles = 0;

var caja = [];
var entregado = [];

caja.push(new Billete(50, 2));
caja.push(new Billete(20, 5));
caja.push(new Billete(10, 10));

var estado_cajero = document.getElementById("estado_cajero");
var resultado = document.getElementById("resultado");

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

dineroDisponible();
actualizarDatosDelCajero();

function actualizarDatosDelCajero() {
	estado_cajero.innerHTML = "";
	estado_cajero.innerHTML = "<hr>";

	estado_cajero.innerHTML = "Dinero disponible: " + dineroLiquido + ".<br>";
	for (let billete of caja) {
		estado_cajero.innerHTML += "Billete: $" + billete.valor + " | Cantidad disponible: " + billete.cantidad + ".<br>";
	}
	estado_cajero.innerHTML += "<hr>";
}

function entregarDinero() {
	resultado.innerHTML = "";

	let t = document.getElementById("dinero");
	dineroSolicitado = parseInt(t.value);

	// se podria optimizar para que el usuario NO introduzca valores negativos por pantalla.
	if (dineroSolicitado > 0) {
		if (dineroLiquido >= dineroSolicitado) {
			for (let billete of caja) {
				div = Math.floor(dineroSolicitado / billete.valor);

				papeles = (div > billete.cantidad) ? billete.cantidad : div;

				entregado.push(new Billete(billete.valor, papeles));
				dineroSolicitado = dineroSolicitado - (billete.valor * papeles);

				dineroLiquido = dineroLiquido - (billete.valor * papeles);
				dineroEntregado += billete.valor * papeles;

				actualizarCaja(billete.valor, papeles);
				actualizarDatosDelCajero();
			}

			resultado.innerHTML = "Cantidad entregada: $" + dineroEntregado + ". <br>";
			for(let e of entregado) {
				if (e.cantidad > 0) {
					resultado.innerHTML += e.cantidad + " billetes de $" + e.valor + ".<br>"

					for (let i=0; i < e.cantidad; i++) {
						resultado.innerHTML += "<img src=" + e.imagen.src + ">";
					}
					resultado.innerHTML += "<br>";
				}
			}
			resultado.innerHTML += "<hr>";
			entregado = [];
		} else {
			resultado.innerHTML = "¡No tengo dinero! :(";
		}
	} else {
		resultado.innerHTML = "¡Error! En este momento NO puedo atender este pedido."
	}
}

function actualizarCaja(valorBillete, cantEntregada) {
	for (let billete of caja) {
		if (billete.valor === valorBillete) {
			billete.cantidad -= cantEntregada;
			break;
		}
	}
}

function dineroDisponible() {
	let sumaTotalBilletes = 0;
	for(let billete of caja) {
		sumaTotalBilletes += billete.valor * billete.cantidad;
	}
	this.dineroLiquido = sumaTotalBilletes;
}```

Yago Rodi

Solución a los dos ejercicios.
Lo único que no pude fue que se repitan los billetes a la hora de pedirlos… Es decir, si retiro $150, dice “3 billetes de $50” y me muestra solamente una vez sola la imagen del billete de $50… Después de eso, todo anda bastante bien.

Billete

class Billete
{
    constructor(value,quanty)
    {
        this.value = value;
        this.quanty = quanty;

        //agrego img de billetes
        this.imagen = new Image();
        this.imagen.src = imgOfBilletes[this.value];
    }
    
    showBilletes()
    {
        document.body.appendChild(this.imagen);
    }

}

cajero.js

///// Functions /////
function deliverMoney()
{
    
    var txtBox = document.getElementById("dinero");// t = caja de texto.
    money = parseInt(txtBox.value);//con esto el dinero ya esta representado en pantalla.

    for(var bi of boxContainer)//agarra to2 los elementos de la caja y va uno por uno colocandolos en el "bi";
    {
        if(money > 0)
        {
            div = Math.floor(money / bi.value);
            //console.log(div);
            //210 / 50 = 4
            //210 / 20 = 10
            //210 / 10 = 21
            
            if(div > bi.quanty)
            {
                papers = bi.quanty;
            }
            else
            {
                papers = div;
            }

            delivered.push(new Billete(bi.value,papers));

            money = money - (bi.value * papers);//el dinero que tengo lo toma pero le resta los billetes que ya entregué
            
        }
        
        
    }
    if(money > 0)
    {
        result.innerHTML = "Soy un malo y no puedo darte esa cantidad :(";//es la forma en la que podemos controlar el contenido de una etiqueta.
        //innetHTML = es el atributo del objeto result (es el elemento del documento llamado "resultado" del HTML);
    }
    else
    {
        //en cada ciclo muestro la cantidad de billetes correcta.
        for(var e of delivered) //e = instancia de la clase billete. //of =  voy a obtener una intancia de cada uno de los objetos.
        {
            result.innerHTML += "Dinero retirado: <br/>";
            if(e.quanty > 0)
            {
                
                result.innerHTML +=  e.quanty + " billetes de $ " + e.value + "<br/>";
                
                //console.log(e);
                e.showBilletes(); 
                
                //ULTIMO AGREGADO.
                //result.appendChild(e.imagen);
                totalDelivered = totalDelivered + (e.quanty * e.value);
                console.log(totalDelivered);
                available = available - totalDelivered;
                //console.log(available);
            
            }   
            e.quanty = 0;
            totalDelivered = 0;
            moneyAvailable.innerHTML = "El dinero disponible en el cajero es: " + available;
        }
        delivered = [];
        if(available == 0)
        {
            alert("Usted ha retirado lo último que poseía el cajero, dirijase a la siguiente caja por favor.");
        }
    }
} 

///// Billetes /////
var imgOfBilletes = [];
imgOfBilletes["50"] = "billete_cincuenta.png";
imgOfBilletes["20"] = "billete20.png";
imgOfBilletes["10"] = "billete10.png";

///// Variables /////
var boxContainer = [];
var delivered = [];
//boxContainer.push(new Billete(100,5));
boxContainer.push(new Billete(50,35)); //push le agrega nuevo objetos a nuestro array.
boxContainer.push(new Billete(20,8)); 
boxContainer.push(new Billete(10,10));
//boxContainer.push(new Billete(5,5)); 


var money = 0;
var div = 0;
var papers = 0;
var button = document.getElementById("extraer");//obtenemos un elemento de html por el ID
button.addEventListener("click",deliverMoney);//entregar dinero.

var result = document.getElementById("resultado");//resultado.

//Ejercicio 2.
var available = parseInt(prompt("Ingrese dinero disponible:"));//disponible
var totalDelivered = 0;
var initMoneyAvailable = document.getElementById("inicioCajeroDinero");
initMoneyAvailable.innerHTML += "El cajero arrancó con $ " + available;
var moneyAvailable = document.getElementById("dineroDisponibleParrafo");

diazmin

Funciona bien, pero no muestra el número de billetes correctos, sólo imprime una muestra de cada uno. ¿Alguna idea?

class Billete
{
    constructor(v, c, n)
    {
      this.valorBillete = v;
      this.cantBilletes = c;
      this.nombre = n;
      this.imagen = new Image();
      this.imagen.src = imagenes[this.nombre];
    }
    mostrar()
    {
      document.body.appendChild(this.imagen);
    }
}

function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  for(var b of caja)
  {
    if(dinero > 0)
    {
      div = Math.floor(dinero / b.valorBillete);
      if(div > b.cantBilletes)
        {papeles = b.cantBilletes;}

      else
        {papeles = div;}

    entregado.push(new Billete(b.valorBillete, papeles, b.valorBillete.toString()));
    dinero = dinero - (b.valorBillete * papeles);
    }
  }

  if(dinero > 0) //No se completó la cantidad solicitada o los billetes no pueden dar la cantidad exacta.
  {
    //Determinar el total de dinero en caja
    var totalDinero = 0;
    for(var c in caja)
    {totalDinero = totalDinero + (caja[c].valorBillete * caja[c].cantBilletes);}

    if(dinero > totalDinero)
      {resultado.innerHTML = "Soy un cajero pobre y no tengo dinero";}
    else
      {resultado.innerHTML = "Ingrese una cantidad divisible entre: <br /> $100 <br /> $50 <br /> $10";}
  }

  else
  {
    //Para mostrar resultados en pantalla
    for(var e of entregado)
    {
      //Para restar dinero entregado a la caja
      switch(e.valorBillete)
      {
        case 100:
          caja[0].cantBilletes = caja[0].cantBilletes - e.cantBilletes;
          break;
        case 50:
          caja[1].cantBilletes = caja[1].cantBilletes - e.cantBilletes;
          break;
        case 10:
          caja[2].cantBilletes = caja[2].cantBilletes - e.cantBilletes;
          break;
      }

      //Para mostrar el número de imágenes de los billetes
      if(e.cantBilletes > 0)
      {
        for(var a = 0; a < e.cantBilletes; a++)
        {
          e.mostrar();
          resultado.innerHTML = resultado.innerHTML + e.cantBilletes + " billetes de $" + e.valorBillete + "<br />";
        }

      }


    }//for

    console.log("Ahora hay en caja: ", caja);
  }

}

var dinero =  0;
var div = 0;
var papeles = 0;

var caja = [];
var entregado = [];
var imagenes = [];

imagenes["100"] = "100.jpg";
imagenes["50"] = "50.jpg";
imagenes["10"] = "10.jpg";

caja.push(new Billete(100,20, "100"));
caja.push(new Billete(50,20, "50"));
caja.push(new Billete(10,10, "10"));

var b = document.getElementById("extraer"); //botón "extraer"
b.addEventListener("click", entregarDinero);
var resultado = document.getElementById("resultado");

FernandoRM

Realicé el proyecto con algunas modificaciones, por ejemplo:

El ingreso de la cantidad se realiza mediante botones.
Cuento con el botón de retroceso en caso de escribir mal.
El cajero te informa cuántos billetes te está entregando y cuántos les queda.
Aunque me faltó incluir las imágenes por falta de tiempo.
Incluyo lo siguiente:
Imagen del Resultado
![](

Imagen usada en el proyecto:
![](

Código en HTML (Cajero2.html):

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CAJERO AUTOMÁTICO DE PLATZIBANK</title>
    <style>
    body
    {
      background-color: #2F4354;
      color: white;
      font-family: sans-serif;
    }
    </style>
  </head>
  <body>
    <p><script>
    var imagen= new Image ();
    imagen.src= "PlatziBank.png";
    document.body.appendChild(imagen);
    </script></p>

    <h4>Ingresa la cantidad que deseas retirar </h4>
    <p><input type="button" value= "Retroceder" Id="botonRetroceder" />
    <input type="button" value= "Retirar" Id="botoncito" /></p>
    <p><input type="button" value= "1" Id="boton1" />
    <input type="button" value= "2" Id="boton2" />
    <input type="button" value= "3" Id="boton3" /></p>
    <p><input type="button" value= "4" Id="boton4" />
    <input type="button" value= "5" Id="boton5" />
    <input type="button" value= "6" Id="boton6" /></p>
    <p><input type="button" value= "7" Id="boton7" />
    <input type="button" value= "8" Id="boton8" />
    <input type="button" value= "9" Id="boton9" /></p>
    <p><input type="button" value= ".." Id="botonNulo1" />
    <input type="button" value= "0" Id="boton0" />
    <input type="button" value= ".." Id="botonNulo2" /></p>
    <p><input type="text" Id="caja_texto" /></p>
    <strong><p id="p1"> </p></strong>
    <p id="p2"> </p>
    <strong><p id="p3"> </p></strong>
    <p id="p4"> </p>
    <script src="cajero2.js"></script>
  </body>
</html>

Código en JavaScript (cajero2.js):

var texto= document.getElementById("caja_texto");
var p1= document.getElementById("p1");
var p2= document.getElementById("p2");
var p3= document.getElementById("p3");
var p4= document.getElementById("p4");
var boton= document.getElementById("botoncito");
var boton1= document.getElementById("boton1");
var boton2= document.getElementById("boton2");
var boton3= document.getElementById("boton3");
var boton4= document.getElementById("boton4");
var boton5= document.getElementById("boton5");
var boton6= document.getElementById("boton6");
var boton7= document.getElementById("boton7");
var boton8= document.getElementById("boton8");
var boton9= document.getElementById("boton9");
var boton0= document.getElementById("boton0");
var botonRetroceder= document.getElementById("botonRetroceder");

boton.addEventListener("click", ejecutarAlgoritmo);
boton1.addEventListener("click", escribirNumero);
boton2.addEventListener("click", escribirNumero);
boton3.addEventListener("click", escribirNumero);
boton4.addEventListener("click", escribirNumero);
boton5.addEventListener("click", escribirNumero);
boton6.addEventListener("click", escribirNumero);
boton7.addEventListener("click", escribirNumero);
boton8.addEventListener("click", escribirNumero);
boton9.addEventListener("click", escribirNumero);
boton0.addEventListener("click", escribirNumero);
botonRetroceder.addEventListener("click", borrarNumero);

var dineroSolicitado = parseInt(texto.value);
class Billetes
{
  constructor(n, v, c)
  {
    this.nombre=n;
    this.valor=v;
    this.cantidad=c;
  }
}
var cajero = [];
cajero.push(new Billetes("cincuenta", 50, 3));
cajero.push(new Billetes("veinte", 20, 5));
cajero.push(new Billetes("diez", 10, 5));
var entregado = [];
var sobrante = [];

function ejecutarAlgoritmo ()
{
  dineroSolicitado=parseInt(texto.value);
  determinarBilletes(dineroSolicitado);
}
for (var p of cajero)
{
  console.log(p.nombre + p.cantidad);
}
function determinarBilletes (x)
{
  var dinero = dineroSolicitado;
  var num;
  console.log (dinero);
  for (var b of cajero)
  {
    console.log(b.valor, b.cantidad, b.nombre);
    console.log(b);
    if (dinero>0)
    {
      console.log ("holi, entramos al ciclo");
      num= parseInt(dinero/b.valor);
      if (num>b.cantidad)
      {
        num = b.cantidad;
      }
      dinero = dinero-num*b.valor;
      sobranteBillete= b.cantidad-num;
      sobrante.push(new Billetes (b.nombre, b.valor, sobranteBillete));
      entregado.push(new Billetes (b.nombre, b.valor, num));
    }
    else
    {
      console.log("else");
      entregado.push(new Billetes (b.nombre, b.valor, 0));
      sobrante.push(new Billetes (b.nombre, b.valor, b.cantidad));
    }

    console.log ("El valor al final del ciclo de dinero es " + dinero);
  }
  if (dinero>0)
  {
    p1.innerHTML = "No se puede suministrar esa cantidad";
  }
  else
  {
    console.log ("Tome su plata");
    console.log (entregado[0].cantidad,entregado[1].cantidad,entregado[2].cantidad);
    for (var e of entregado )
    {
      p1.innerHTML ="<hr />" + "Se te entrega:"+ "<p />";
      if (e.cantidad>0)
      {
        p2.innerHTML+= e.cantidad + " billetes de " + e.valor + "<p />";
      }
    }
    for (var s of sobrante )
    {
      p3.innerHTML ="<hr />" + "En el cajero aún quedan:"+ "<p />";
      if (s.cantidad>0)
      {
        p4.innerHTML+= s.cantidad + " billetes de " + s.valor + "<p />";
      }
    }
  }
}
function escribirNumero (abc)
{
  console.log(abc);
  texto.value +=abc.srcElement.value;
}
function borrarNumero ()
{
  texto.value= parseInt(texto.value/10); //Divido entre 10 así reduzco un dígito, y le aplico parseInt para que me dé la parte entera.
//Inclusive luego de que texto.value queda como texto, cuando se aplica escribirNumero, se le suma con otro texto, por lo que
// todo text.value se convierte en texto.
}

Javier_7

El desafió estuvo chevre

Joel Sanchez

ACABE LOS TRES DESAFIOS!!
ESTOY MUY FELIZ:)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
    <style media="screen">
      body{
        background-color: #00FFFF;
        color: black;
      }
      strong{
        background: black;
        color : #00FFFF;
      }
    </style>
  </head>
  <body>
    <img src = "cajero.gif" alt = "cajero.gif" />
    <p id = "saldo"></p>
    <input type = "number" id = "number"/>
    <input type = "button"  value = "Retirar" id = "button" />
    <p id = "resultado"></p>
    <p id = "imagenBilletes"></p>
    <script src = "cajero.js"></script>
  </body>
</html>

class Billete {
  constructor(nombre, valor, cantidad, ubicacion) {
    this.nombre = nombre;
    this.valor = valor;
    this.cantidad = cantidad;
    this.ubicacion = ubicacion;
  }
}

var boton = document.getElementById("button");
boton.addEventListener("click", retirarDinero);
var resultado = document.getElementById("resultado");
var imagenBilletes = document.getElementById("imagenBilletes");
var saldo = document.getElementById("saldo");


entregado = [];
var caja = [];
caja.push(new Billete("DolarDe100", 100, 10, "dolar100.jpg"));
caja.push(new Billete("DolarDe50", 50, 15, "dolar50.jpg"));
caja.push(new Billete("DolarDe20", 20, 20, "dolar20.jpg"));
caja.push(new Billete("DolarDe10", 10, 30, "dolar10.jpg"));
caja.push(new Billete("DolarDe5", 5, 40, "dolar5.jpg"));
caja.push(new Billete("DolarDe1", 1, 50, "dolar1.jpg"));

function retirarDinero(){
  var texto = document.getElementById("number");
  var dinero = parseInt(texto.value);
    for(var billete of caja){
      if(dinero > 0){
        var divicion = Math.floor(dinero / billete.valor);
        if(divicion > billete.cantidad){
          var papeles = billete.cantidad;
        }
        else{
          papeles = divicion;
        }
        entregado.push(new Billete(billete.nombre, billete.valor, papeles, "dolar" + billete.valor + ".jpg"));
        dinero -= papeles * billete.valor;
      }
      else{
        papeles = 0;
      }
      billete.cantidad -= papeles ;
    }
  if(dinero > 0){
    resultado.innerHTML = "Soy un cajero malo, muy malo, y no te he podido entregar tu dinero";
  }
  else{
    for(var t of entregado){
      if(t.cantidad > 0){
        if(t.cantidad == 1){
          resultado.innerHTML += "Se ha entregado " + t.cantidad + " billete de $" + t.valor + " dolares. <br />";
        }
        else{
          resultado.innerHTML += "Se ha entregado " + t.cantidad + " billetes de $" + t.valor + " dolares. <br />";
        }
      }
    }
    for(var e of entregado){
      if(e.cantidad > 0){
        for(var i = 1; i <= e.cantidad; i++){
          imagenBilletes.innerHTML += "<img src = " + e.ubicacion + " /><br />";
        }
      }
    }
  }
  nuevoDinero();
}

function nuevoDinero(){
  var dineroBilletes = [];
  for(var din of caja){
    dineroBilletes.push(din.cantidad * din.valor);
  }
  //estoy generado un nuevo arreglo en el que tengo el valor de cada tipo de billete.
  var dineroTotal = 0;
  for (var contador = 0; contador < dineroBilletes.length; contador++){
    dineroTotal += dineroBilletes[contador];
  }
  saldo.innerHTML = "<strong>El saldo disponible es " + dineroTotal + " dolares.</strong>";
}
nuevoDinero();

Ronald Peña

Raro que con appendChild no se pueden repetir las imágenes. El código lo empece antes de ver esta parte y por eso casi no se parece al de freddy pero el algoritmo es el mismo. El hecho:

El saldo se actualiza
Se muestran los billetes que se entregan (no una imagen y un x2 o x3, la imagen se repite la cantidad de veces). Creo que es más interesante que el reto del saldo.
Retira lo que se puede retirar (eso ya estaba en el código de freddy) o avisa si no es posible hacer retiros

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cajero automático</title>
</head>

<body>
    <h1>Cajero automático</h1>
    <p>
        <strong> Saldo actual $<span id="textBalance"></span> </strong>
    </p>
    <img src="media/cajero.webp" alt="cajero"> <br>
    <p>
        <input type="number" name="valor" id="textValue">
        <input type="submit" id="buttonWithdraw" value="Retirar">

    </p>

    <p id="givenMoney">

    </p>

    <script src="js/billetes.js"></script>
    <script src="js/script.js"></script>




</body>

</html>

let billImages = [];
billImages["50"] = "media/50.png"
billImages["20"] = "media/20.png"
billImages["10"] = "media/10.png"

class Bills {
    constructor (value, quantity){
        this.value = value;
        this.quantity = quantity;
        this.imageSrc = billImages["" + this.value];
    }
}

let buttonWithdraw = document.getElementById("buttonWithdraw");
let textValue = document.getElementById("textValue"); // Entrada de texto
buttonWithdraw.addEventListener('click', giveMoney)

let ATMBills = [new Bills(50, 3), new Bills(20, 5), new Bills(10, 3)];  // Billetes en el cajero
let ATMBalance = 50 * 3 + 20 * 5 + 10 * 3;                              // Saldo del cajero
document.getElementById("textBalance").innerHTML = ATMBalance;          // Muestra el saldo apenas carga la página

function giveMoney() {
    let withdrawValue = parseInt(textValue.value);                      // Valor solicitado a retirar
    let remainingValue = withdrawValue;                                 // Valor faltante a entregar por el cajero
    let bills2Give = [];                                                // Arreglo con los billetes a entregar
    let givenValue = 0;                                                 // Variable del total retirado
    if (ATMBalance == 0) {                                              // Si no hay saldo, muestra un mensaje y termina la función
        document.getElementById("givenMoney").innerHTML = "No hay saldo";
        return

    }
    document.getElementById("givenMoney").innerHTML = "";

    for (const billsValue of ATMBills) {                                // Recorrido por cada denominación de billetes en el cajero 
        if (remainingValue === 0) break;                                // Sale del for si no queda más dinero que entregar
        let billsNeeded = Math.floor(remainingValue / billsValue.value);// Billetes necesarios de cada denominación

        let bill2Push;                                  // Objeto tipo Bills con el valor y cantidad a entregar de cada denominación
        if (billsNeeded < billsValue.quantity) {
            bill2Push = new Bills(billsValue.value, billsNeeded);       // Si hay suficientes billetes en el cajero 
            billsValue.quantity -= billsNeeded;                         // Resta del saldo del cajero la cantidad entregada de cada
                                                                        // denominación
        } else {
            bill2Push = new Bills(billsValue.value, billsValue.quantity);// Si no hay suficientes billetes se entregarán los disponibles
            billsValue.quantity = 0;

        }
        if (!bill2Push.quantity) continue;                              // Salta la iteración si no se requieren billetes de esta
                                                                        // denominación
        bills2Give.push(bill2Push);                                     // Añade al arreglo de salida la cantidad de billetes de 
                                                                        // cada denominación

        remainingValue = remainingValue - bill2Push.quantity * bill2Push.value; // Se actualiza el valor que faltaría por retirar
        for (let index = 0; index < bill2Push.quantity; index++) {      // Muestra en pantalla los billetes de salida
            document.getElementById("givenMoney").innerHTML += '<img src="' + bill2Push.imageSrc + '"></img>';
        }
        document.getElementById("givenMoney").innerHTML += "<br>";      // Salto de línea al terminar de mostrar todos los billetes
                                                                        // de la actual denominación

        givenValue += (bill2Push.quantity * bill2Push.value);
        document.getElementById("givenMoney").innerHTML += bill2Push.quantity + " de $" + bill2Push.value + "<br>";
    }

    ATMBalance -= givenValue
    document.getElementById("textBalance").innerHTML = ATMBalance;

    if (givenValue === withdrawValue) {
        document.getElementById("givenMoney").innerHTML += "Retiro exitoso! <br>";
    } else {
        document.getElementById("givenMoney").innerHTML += "Solo pudo retirar $" + givenValue;
    }

}

Ruth de los Angeles Campoverde Tabara

Hice el desafío 1 y 2. En el desafío 2 le agregué cuántos billetes quedaban de cada denominación.

desafio 1.PNG
desafio 2.PNG
desafio 3.PNG
desafio 4.PNG
desafio 5.PNG

Diego Ibanez

Creo que para ser las 4.35 am el codigo funciona bien les dejo este link

http://platzi.estudiowkl.com/14_atm.html

para que lo vean funcionando y el codigo js es:

(mañana mas despierto intentare mejorarlo)

var imagenes = [];

imagenes["50"] = "billete50.png";

imagenes["20"] = "billete20.png";

imagenes["10"] = "billete10.png";

class Billete

	constructor(v, c)

		this.valor = v;

		this.cantidad = c;

		this.imagen = new Image();

		this.imagen.src = imagenes[this.valor];

var caja = [];

caja.push( new Billete(50, 3) );

caja.push( new Billete(20, 5) );

caja.push( new Billete(10, 5) );

contar();

var div = 0;

var papeles = 0;

var resultado = document.getElementById("resultado");

var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);

function entregarDinero()

	var dibujado = [];

	var t = document.getElementById("dinero");

	dinero = parseInt(t.value);

	if (total >= dinero)

		for(bi of caja)

			if (dinero > 0)

				div = Math.floor(dinero/bi.valor);

				if (div>bi.cantidad)

					papeles = bi.cantidad;

				else

					papeles = div;

					bi.cantidad = bi.cantidad-papeles;

				for (var i = 0; i < papeles; i++)

					dibujado.push ( new Billete(bi.valor, 1) );

				dinero -= (bi.valor * papeles);

		if (dinero == 0)

			resultado.innerHTML += "Se ha retirado: <br />";

			for(var e of dibujado)

				resultado.innerHTML += "<img src=" + e.imagen.src + " />";

			resultado.innerHTML += "<hr />";

		contar();

		else

			resultado.innerHTML += "No tengo los billetes para esa suma, intenta otro valor <hr />";

	else

		resultado.innerHTML += "Soy un cajero pobre y no tengo dinero :( <hr />";

function contar()

	total = 0

	for (var tot of caja)

		total = total + tot.valor * tot.cantidad;

	console.log(total);

brayanmamani

✨ innerHTML nos permite leer un dato o asignarlo al contenido a una etiqueta definida en HTML. Nos facilita la asignación de valores.

sara

Cuando Freddy dice que esto es optimizable, entro en pánico jajaja. Para mi tiene las líneas de código exactas.

Facundo Andrés Martinez Rossi

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>

//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";
  }
}

A496

Casi los mismo.

Diego Fabián Ramírez Borges

Imágenes de los billetes.

Hmmm…Esto es todo amigos.

Jean Sebastian Rodriguez

Cuando ya no queda dinero en el cajero.

if(dinero>0) {
	document.write("No tengo dinero ni nada que nadar!");
}

Isaac Israel Groisman Oberman

Le agregué algunas cosas más al proyecto:

Html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero Auomatico</title>
  </head>
  <body>
       <p>
         <img src="cajero.gif" />
       </p>

       <p>
         <input type="number" id="dinero"/>
         <input type="button" value="Saldo" id="ver_saldo"/>
         <input type="button" value="Depositar" id="depositar"/>
         <input type="button" value="Extraer" id="extraer"/>
         <input type="button" value="Borrar" id="borrar"/>
       </p>

       <p id="resultado"> </p>

     <script src="cajero.js"></script>
  </body>
</html>

Javascript:

var imagenes = [];

imagenes["5"] = "billete5.jpg";
imagenes["10"] = "billete10.jpg";
imagenes["20"] = "billete20.jpg";
imagenes["50"] = "billete50.jpg";
imagenes["100"] = "billete100.jpg";

class Billete {
  constructor(v, c) {

    this.valor = v;
    this.cantidad = c;

    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var caja = [];
var entregado = [];
caja.push(new Billete(100, 1));
caja.push(new Billete(50, 1));
caja.push(new Billete(20, 1));
caja.push(new Billete(10, 1));
caja.push(new Billete(5, 1));


var dinero = 0;
var div = 0;
var papeles = 0;

var boton_saldo = document.getElementById("ver_saldo");
boton_saldo.addEventListener("click", saldo);

var total = 0;
function saldo() {
  var monto = 0;
  for (var v of caja) {
    monto = monto + v.valor * v.cantidad;
    total = monto;
    resultado.innerHTML = "Su saldo es: $"+ monto + "<hr />" ;
  }
}

function actualizar() {  //actualiza el saldo despues de depositar
  var saldo = 0 ;
  for (var v of caja) {
    saldo = saldo + v.valor * v.cantidad;
    total = saldo;
  }
}

var boton_depositar = document.getElementById("depositar");
boton_depositar.addEventListener("click", deposito);

function deposito() {
  var monto = prompt("Por favor indique el valor a depositar de $: 100, 50, 20, 10, o 5 ", "100");
if ( monto == 100 || monto == 50 || monto == 20 || monto == 10 || monto == 5) {

   if (monto == 100) {

     var cant_cien = prompt("Indíque la cantidad", 1);

     while (isNaN(cant_cien)) {
       cant_cien = prompt(cant_cien + " No es un valor correcto, Por favor indíque un valor");
     }

     caja[0].cantidad = caja[0].cantidad + parseInt(cant_cien);
     actualizar();
     resultado.innerHTML += "Se ha depositado " + cant_cien + " Billetes de: $" + monto + "<hr />";

    }

    if (monto == 50) {
      var cant_cincuenta = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_cincuenta)) {
        cant_cincuenta = prompt(cant_cincuenta + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[1].cantidad = caja[1].cantidad + parseInt(cant_cincuenta);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_cincuenta + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 20) {
      var cant_veinte = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_veinte)) {
        cant_veinte = prompt(cant_veinte + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[2].cantidad = caja[2].cantidad + parseInt(cant_veinte);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_veinte + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 10) {
      var cant_diez = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_diez)) {
        cant_diez = prompt(cant_diez + " No es un valor correcto, Por favor indíque un valor");
      }

      caja[3].cantidad = caja[3].cantidad + parseInt(cant_diez);
      actualizar();
      resultado.innerHTML += "Se ha depositado " + cant_diez + " Billetes de: $" + monto + "<hr />";
    }

    if (monto == 5) {
      var cant_cinco = prompt("Indíque la cantidad", 1);

      while (isNaN(cant_cinco)) {
        cant_cinco = prompt(cant_cinco + " No es un valor correcto, Por favor indíque un valor");
    }

    caja[4].cantidad = caja[4].cantidad + parseInt(cant_cinco);
    actualizar();
    resultado.innerHTML += "Se ha depositado " + cant_cinco + " Billetes de: $" + monto + "<hr />";

    }
  }
 else{
   resultado.innerHTML =("Valor no valido, por favor indicar los valores correspondientes para depositar" + "<hr />");
  }

}




var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

var resultado = document.getElementById("resultado");



document.getElementById('borrar').onclick = function borra() {
//Esta funciona hace que cuando apretas el boton "Borrar" se borra el resultado y billetes entregados
   resultado.innerHTML = "";
    entregado = [];
}

function contador()
{
	total = 0;
	for (var tot of caja)
	{
		total = total + tot.valor * tot.cantidad;

	}
}


function entregarDinero(){

 //resultado.innerHTML = "";
 //document.getElementById('resultado').innerHTML = "";

  var mostrado = [];

  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  if (dinero > total) {
      resultado.innerHTML += "No hay billetes para esa cantidad, intenta otro valor! <hr />";
  }else {



  for (var bi of caja) {
    //console.log(bi);
    if (dinero > 0) {
      div = Math.floor(dinero / bi.valor);
      //console.log(div);
      if (div > bi.cantidad) {
        papeles = bi.cantidad;
      }
      else {
        papeles = div;
      }
      bi.cantidad = bi.cantidad - papeles;
      //console.log(caja);

      entregado.push(new Billete(bi.valor, papeles));

      for (var i = 0; i < papeles; i++)
				{
					mostrado.push (new Billete(bi.valor, 1) );
				}
				dinero = dinero - (bi.valor * papeles);
			}

    }



    if (dinero == 0) {

      resultado.innerHTML += "Se ha retirado: <br />";

			for(var e of mostrado)
			{
				resultado.innerHTML = resultado.innerHTML + e.cantidad + " billetes de $" + e.valor + "<br/>" + "<img src=" + e.imagen.src + " />" + "<hr />";
			}

			resultado.innerHTML = resultado.innerHTML + "<hr />";
		  contador();

		}
    else  {
      resultado.innerHTML += "No hay billetes para esa cantidad, intenta otro valor! <hr />";

    }
 }
}







        //resultado.innerHTML = resultado.innerHTML + "Se ha retirado: " + "<br/>" + e.cantidad + " billetes de $" + e.valor + "<br/>" + "<img src=" + e.imagen.src + " />" + "<hr />";
        //document.write(e.cantidad + " billetes de $" + e.valor + "<br/>" );


     //contador();
    //console.log(entregado);

Daniel Felipe Celis Fernández

Mi aporte, agregue fecha y hora, además del último retiro.

class Billetes
{
  constructor(n, v, c)
  {
    this.nombre = n;
    this.valor = v;
    this.cantidad = c;
    this.image = new Image();
    this.image.src = images[this.nombre];
  }
}

var images = [];
images["100.000"] = "100.jpg";
images["50.000"] = "50.jpg";
images["20.000"] = "20.jpg";
images["10.000"] = "10.jpg";

var dinero_1 = document.getElementById('dinero');
var sold = document.getElementById('saldo');
var r = document.getElementById('resultado');
var r1 = document.getElementById('resultado1');
var div_i = document.getElementById('imagen');
var extraer_1 = document.getElementById('extraer');
extraer_1.addEventListener("click", transaccion);

var box = [];
box.push(new Billetes("100.000", 100000, 23));
box.push(new Billetes("50.000", 50000, 48));
box.push(new Billetes("20.000", 20000, 41));
box.push(new Billetes("10.000", 10000, 48));

var j = 0;
var p = 0;
for (var s of box)
{
  j += parseInt(s.cantidad * s.valor);
  p += parseInt(s.cantidad * s.valor);
  sold.innerHTML = "<font size=5> Saldo del Cajero: $" + j + "</font>" ;
}

var retirado = [];
var entregado = [];
var papeles = 0;

function transaccion()
{
  var money = parseInt(dinero_1.value);
  if (money > 500000)
  {
    r.innerHTML = "";
    r1.innerHTML = "<font size=4> Recuerde que la máxima cantidad de dinero que se puede retirar en una </font> </br>";
    r1.innerHTML += "<font size=4> sola transaccion es de: $500.000. </font>"
  }
  else
  {
    for (var b of box)
    {
      if( money > 0)
      {
        var div = Math.floor(money / b.valor);

        if(div > b.cantidad)
        {
          papeles = b.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push( new Billetes(b.nombre, b.valor, papeles) );
        money -= (b.valor * papeles);
        var t = j - dinero_1.value;
      }
    }
    if (money > 0)
    {
      r.innerHTML = "";
      r1.innerHTML = "<font size=4> Lo siento, la cantidad que desea retirar no es compatible con el valor de los billetes. </font> <br/>";
      r1.innerHTML += "</br> <font size=4> Recuerde que el valor del billete de menor denominación es de: $10.000. </font>";
    }
    else if (money <= t)
    {
      var m = parseInt(dinero_1.value);
      retirado.push(m);
      for (var e of entregado)
      {
        if(e.cantidad > 0)
        {
          if (t + m == p)
          {
            r1.innerHTML = "";
          }
          else
          {
            r1.innerHTML = "El Ultimo retiro fue de: $" + retirado[0];
          }
          r.innerHTML += e.cantidad + " billetes de $" + e.valor + "<br/> <br/>";
          for (var i = 0; i < e.cantidad; i++)
          {
            r.appendChild(e.image);
            if (e.valor == e.valor)
            {
              r.innerHTML += " ";
            }
            else
            {
              r.innerHTML += "<br/>";
            }
          }
          r.innerHTML += "<br/><br/>";
        }
      }
      todayDate(r);
      sold.innerHTML = "<font size=5> Saldo del Cajero: $" + t + "</font>";
    }
    else if (money > t)
    {
      sold.innerHTML = "<font size=5> Saldo del Cajero: $" + j + "</font>";
      r.innerHTML = "";
      r1.innerHTML = "<font size=4> Lo sentimos, la cantidad que desea retirar excede la disponibilidad de dinero en el cajero. </font> <br/>";
      r1.innerHTML += "</br> <font size=4> O el cajero no dispone de más dinero. </font>";
      t = j;
    }
    j = t;
  }
}

function clean()
{
  lastTransaction();
  entregado.splice(0,entregado.length);
  document.getElementById('formulario').reset();
  r.innerHTML = "";
  r1.innerHTML = "";
  return true;
}

function resetAll()
{
  clean()
  retirado.splice(0,retirado.length);
  var h = 0;
  for (var l of box)
  {
    h += parseInt(l.cantidad * l.valor);
    sold.innerHTML = "<font size=5> Saldo del Cajero: $" + h + "</font>";
    j = h;
  }
}

function todayDate(v)
{
  var today = new Date();
  var dia = today.getDate();
  var month = today.getMonth() + 1;
  var months = (month < 10) ? "0" + month : month;
  var year = today.getFullYear();
  var hour = today.getHours();
  var minute = today.getMinutes();
  var minutes = (minute < 10) ? "0" + minute : minute;
  var second = today.getSeconds();
  var seconds = (second < 10) ? "0" + second : second;
  v.innerHTML += "<strong> Fecha: </strong>" + dia +  "/" + months + "/" + year + "<strong> Hora: </strong>" + hour + ":" + minutes + ":" + seconds;
}

function lastTransaction()
{
  var h = parseInt(dinero_1.value);
  if (h > 500000)
  {
    retirado.splice(0,0);
  }
  else if (h <= j)
  {
    retirado.splice(0,retirado.length, h);
  }
  else if (h > j)
  {
    retirado.splice(0,retirado.length, retirado[retirado.length - 1]);
    retirado.splice(0,0,retirado[0]);
  }
}

Santiago Cujaban

Si quieren verlo en acción sólo díganme y les paso el link!

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
  </head>
  <body>
    <h1>Bienvenido a tu Bank E! :D</h1>
    <p>Aquí podrás retirar tu dinero de <strong>tu cuenta bancaria :)</strong></p>
    <p>
      <img src="cajerobanke.jpg" />
    </p>
    <h2>Por favor, ingresa la cantidad de dinero que quieres retirar en pesos colombianos:</h2>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
      <p>
        <br />
        <input type="button" value="Consultar Saldo" id="cantidad" />
        <input type="button" value="Refrescar Cajero" onclick="javascript:window.location.reload();"/>
      </p>
    </p>
    <p id="resultado"></p>
    <script src="cajero.js"></script>
  </body>
</html>

JavaScript

class Billete
{
  constructor(v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var imagenes = [];
imagenes["100000"] = "100mil.jpg";
imagenes["50000"] = "50mil.jpg";
imagenes["20000"] = "20mil.jpg";
imagenes["10000"] = "10mil.jpg";
imagenes["5000"] = "5mil.jpg";
imagenes["2000"] = "2mil.jpg";
imagenes["1000"] = "1mil.jpg";

var caja = [];
caja.push( new Billete(100000, 5) );
caja.push( new Billete(50000, 5) );
caja.push( new Billete(20000, 5) );
caja.push( new Billete(10000, 10) );
caja.push( new Billete(5000, 15) );
caja.push( new Billete(2000, 15) );
caja.push( new Billete(1000, 10) );

var entregado = [];

var dinero;
var div;
var papeles;

var cantidad = document.getElementById("cantidad");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);
cantidad.addEventListener("click", existencia);

function entregarDinero()
{
  resultado.innerHTML = "";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  for(var b of caja)
  {
    if(dinero > 0)
    {
      div = Math.floor(dinero / b.valor);

      if(div > b.cantidad)
      {
        papeles = b.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(b.valor, papeles) );
      dinero -= (b.valor * papeles);

      b.cantidad -= papeles;
    }
  }

  if(dinero > 0)
  {
    resultado.innerHTML = "Soy un cajero <strong>malo</strong>, he sido <strong>malo</strong> y no puedo darte esa cantidad :( <br /><hr />";
  }
  else
  {
    resultado.innerHTML += "<p>Retiraste:<br /></p>";

    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
        for(var bi = 1; bi <= e.cantidad ;bi++)
        {
          resultado.innerHTML += "<img src=" + e.imagen.src + " />" + "<br /><hr />";
        }
      }
    }
  }
}

function existencia()
{
  var total = 0;

  for(var bi of caja)
  {
    total += bi.valor * bi.cantidad;
  }
  alert("La cantidad actual de dinero es de " + total + "$COP");
}

Diego Ibanez

http://platzi.estudiowkl.com/nuevo/atmDiegoWKL.html

Jesús David Emiliano Reynoso Sarmiento

Después de días, me quedó así.
Me quedó medio feo pero es mío, y lo aprendido nadie me lo quita 😄

evi dukaba martinez

Cuando te enteras de que document.write es una mala práctica.
he vivido engañado toda mi vida =o

soydarius

Carlos Gomez

Diana_Sanchez

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
    <style type="text/css">
    body
    {
      background-color: #9ad7df;
      font-size: 20px;
      font-family: "Times New Roman";
    }
    h1
    {
      font-size: 35px;
    }
    </style>
  </head>
  <body>
  <center>
    <h1>Cajero automático</h1>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer"/>
      <input type="button" value="Limpiar" id="limpiar"/>
    </p>
    <p id="disponible"></p>
    <p id="resultado"></p>
    <script type="text/javascript" src="cajero.js"></script>
    <script type="text/javascript" src="clase_billete.js"></script>
</center>
  </body>
</html>```

JS

class Billete
{
constructor(valor, cantidad)
{
this.valor = valor;
this.cantidad = cantidad;
this.imagen = new Image();

this.imagen.src = imagenes[this.valor];
this.saldo = this.valor * this.cantidad;

}
}

var dinero = 0;
var div = 0;
var papeles = 0;

var dineroDisponible;
function dineroTotal()
{
suma = 0;

for ( var j of caja)
{
suma = suma + j.saldo;
}
disponible.innerHTML = (“Dinero total disponible en el cajero: " + suma + " lps”);
dineroDisponible = suma;
}

function limpiarPagina()//funcion para vaciar o limpiar la pagina con el boton limpiar
{
resultado.innerHTML = “”;
entregado.length = 0;
}

dineroTotal(); //Muestra la cantidad total de dinero disponible

function entregarDinero()//Al presionar el boton extraer se activa esta funcion
{
var caja_texto = document.getElementById(“dinero”);
dinero = parseInt(caja_texto.value);

dineroActual();//Muestra la cantidad disponible en el cajero cuando se retira dinero

if(dinero > dineroDisponible)
{
resultado.innerHTML = “Saldo en el cajero insuficiente para esta transacción”;
return;
}

if (dinero > 0)
{
  resultado.innerHTML = "No hay suficiente dinero en el cajero";
}
else
{ //dibuja los billettes
  resultado.innerHTML = "Retiró: <br />";
  for (var e of entregado)
  {
      if(e.cantidad > 0)
      {
        resultado.innerHTML += e.cantidad + " billetes de " + e.valor + " lps <br />";
        resultado.appendChild(e.imagen);
        resultado.innerHTML += "<br />";
      }
  }
}
dineroActual()//Muestra la cantidad disponible en el cajero

}```

Miguel Alcarra

Hey everyone! Hice unos billetes al estilo pixelart bien divertidos.

Espero que les sea util. Saludos!

marcoaureliooviedovillena

Kerepakupai

Luego mejorare el código, escucho propuestas de mejoras para aplicarlas. Pueden ver el codigo en funcionamiento en el siguiente link: https://jsfiddle.net/kerepakupai/hwLrasaz/

![](

Gustavo Daniel Franco Gonzalez

Apuntes en clase:

Caja de texto en HTML => Input type “text” : Alfanumérico
Input type “number” : Numérico solamente.

Siempre es importante ir probando el código a medida que se va escribiendo código, hacerse ese hábito con el fin de detectar con más facilidad los errores que se puedan presentar
Todas las cajas de texto tienen valores de texto, por mas que se ingresen números, por ello es necesario parsear el resultado si se desea trabajar con números.
ParseInt => Función nativa de JS que convierte el valor String a Int
Cast(Casteo) => Proceso de transformar una variable con un tipo de datos a otro.
Document.Write reescribe el código ya cargado anteriormente en el navegador a través de JS.
OnLoad=> Evento que ocurre cuando el navegador ha cargado la página por completo, luego de este evento se ejecuta otro llamado Close.
Open => Ocurre posterior al cierre del documento, en este evento solo se da prioridad al Document,write, es por este motivo que en el ejemplo anterior todo el contenido desaparece, dejando solamente en pantalla lo que está dentro del Document.write.
InnerHTML => La manera en que podemos controlar el contenido en HTML.
Operador += => Se utilizan en operaciones matemáticas, y se puede interpretar como que el valor de una variable es igual a su propio valor, mas el resto de la operación.
Operador -= => Se aplica el mismo concepto que el operador “+=”, solo que en este caso el valor es restado.

alvarohrv

– -- – -- – -- – -- – -- – --

Puedes testear mi cajero acá XD
cajeroautomaticoplatzi.alvarohrv.repl.co

– -- – -- – -- – -- – -- – --

Koe

Veré este vídeo unas 3 veces más.

NaruJN

Youssef Abarca

Lo hice de tal manera que puedas usar la imagen para manipular el cajero, todo lo que esta en azul dentro de la forma azul se puede usar como botones.

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero Automático</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" usemap="#workmap" />
      <map name="workmap">
        <area shape="rect" coords="60,178,77,189" id="Uno">
        <area shape="rect" coords="82,178,97,189" id="Dos">
        <area shape="rect" coords="102,178,120,189" id="Tres">
        <area shape="rect" coords="58,192,75,204" id="Cuatro">
        <area shape="rect" coords="80,192,98,204" id="Cinco">
        <area shape="rect" coords="102,192,121,204" id="Seis">
        <area shape="rect" coords="55,208,73,222" id="Siete">
        <area shape="rect" coords="79,208,99,222" id="Ocho">
        <area shape="rect" coords="102,208,122,222" id="Nueve">
        <area shape="rect" coords="77,226,98,241" id="Cero">
        <area shape="rect" coords="127,178,146,189" id="Borrar">
        <area shape="rect" coords="128,192,149,204" id="Cancelar">
        <area shape="rect" coords="130,208,151,222" id="Enter">
      </map>
    </p>
    <p id="saldo"></p>
    <p id="cantidad">"Cuando dinero desea retirar"</p>
    <p id="resultado"></p>
    <p id="fotos"></p>
    <script type="text/javascript" src="cajero.js"></script>
  </body>
</html>

class Billete
{
  constructor(valor, cantidad, nombre)
  {
    this.imagen = new Image();
    this.valor = valor;
    this.cantidad = cantidad;
    this.nombre = nombre;
    this.imagen.src = imagenes[this.nombre]
  }
}

var imagenes = [];
imagenes["cincuenta"]="cincuenta.jpg";
imagenes["veinte"]="veinte.jpg";
imagenes["diez"]="diez.jpg";
imagenes["cinco"]="cinco.jpg";

var caja = [];

caja.push(new Billete(50, 10, "cincuenta"));
caja.push(new Billete(20, 20, "veinte"));
caja.push(new Billete(10, 30, "diez"));
caja.push(new Billete(5, 50, "cinco"));

var totalDinero = 0;
var digitos = "";

var resultado = document.getElementById("resultado");
var cantidad = document.getElementById("cantidad");
var saldo = document.getElementById("saldo");
var foto = document.getElementById("fotos");

dineroDisponible();

//BOTONES DEL TECLADO
var bUno = document.getElementById("Uno");
bUno.addEventListener("click", escribirUno);
function escribirUno(){digitos += "1"; cantidad.innerHTML = digitos;}

var bDos = document.getElementById("Dos");
bDos.addEventListener("click", escribirDos);
function escribirDos(){digitos += "2"; cantidad.innerHTML = digitos;}

var bTres = document.getElementById("Tres");
bTres.addEventListener("click", escribirTres);
function escribirTres(){digitos += "3"; cantidad.innerHTML = digitos;}

var bCuatro = document.getElementById("Cuatro");
bCuatro.addEventListener("click", escribirCuatro);
function escribirCuatro(){digitos += "4"; cantidad.innerHTML = digitos;}

var bCinco = document.getElementById("Cinco");
bCinco.addEventListener("click", escribirCinco);
function escribirCinco(){digitos += "5"; cantidad.innerHTML = digitos;}

var bSeis = document.getElementById("Seis");
bSeis.addEventListener("click", escribirSeis);
function escribirSeis(){digitos += "6"; cantidad.innerHTML = digitos;}

var bSiete = document.getElementById("Siete");
bSiete.addEventListener("click", escribirSiete);
function escribirSiete(){digitos += "7"; cantidad.innerHTML = digitos;}

var bOcho = document.getElementById("Ocho");
bOcho.addEventListener("click", escribirOcho);
function escribirOcho(){digitos += "8"; cantidad.innerHTML = digitos;}

var bNueve = document.getElementById("Nueve");
bNueve.addEventListener("click", escribirNueve);
function escribirNueve(){digitos += "9"; cantidad.innerHTML = digitos;}

var bCero = document.getElementById("Cero");
bCero.addEventListener("click", escribirCero);
function escribirCero()
{
  if(digitos != "")
  {
    digitos += "0"
    cantidad.innerHTML = digitos;
  }
}

var bBorrar = document.getElementById("Borrar");
bBorrar.addEventListener("click", borrarDigito);
function borrarDigito()
{
  if(digitos != "")
  {
    digitos = digitos.slice(0,-1);  //elimina elementos de un string
    cantidad.innerHTML = digitos;
  }
  else
  {
    limpiar();
  }
}

var bCancelar = document.getElementById("Cancelar");
bCancelar.addEventListener("click", limpiar);
function limpiar()
{
  digitos = "";
  cantidad.innerHTML = digitos;
  cantidad.innerHTML = "\"Cuando dinero desea retirar\"";
  resultado.innerHTML = "";
  foto.innerHTML = "";
}

var bEnter = document.getElementById("Enter");
bEnter.addEventListener("click", entregarDinero);
//FIN BOTONES

function entregarDinero()
{
  var div;
  var papeles;
  var entregado = [];

  if(digitos != "")
  {
    var dinero = parseInt(digitos);
    entregado = [];

    for(var billete of caja)
    {
      if (dinero > 0)
      {
        div = Math.floor(dinero / billete.valor);
        if(div > billete.cantidad)
        {
          papeles = billete.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push(new Billete(billete.valor, papeles, billete.nombre));
        dinero = dinero - (billete.valor * papeles);
      }
    }

    limpiar();

    if (totalDinero == 0)
    {
      resultado.innerHTML = "No hay saldo disponible";
    }
    else if(dinero > totalDinero)
    {
      resultado.innerHTML = "No te puedo entregar esa cantidad!";
    }
    else if(dinero == 0)
    {
      for (var e in entregado)
      {
        if(entregado[e].cantidad > 0)
        {
          resultado.innerHTML += entregado[e].cantidad + " Billetes de $ " + entregado[e].valor + "<br />"
          resultado.appendChild(entregado[e].imagen)
          resultado.innerHTML += "<br />"
          caja[e].cantidad = caja[e].cantidad - entregado[e].cantidad;
        }
      }
      dineroDisponible();
    }
    else
    {
      resultado.innerHTML = "Imposible procesar tu transacción!";
    }
  }
}

function dineroDisponible()
{
  totalDinero = 0;
  for(var billete of caja)
  {
    totalDinero += billete.valor * billete.cantidad;
  }
  saldo.innerHTML = "El cajero dispone de: " + totalDinero;
}

Carlos Arturo Abril Triviño

Ivorales

Wow! después de tantos días por fin se logró el objetivo, el código emite tres alarmas.

cuando un número no es múltiplo de 10.
cuando se ingresa un monto mayor al saldo disponible en caja
cuando el cajero se queda sin dinero.

Cualquier sugerencia para perfeccionarlo o mejorarlo será bien recibida…

Isaac Hernandez Resendiz

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
  </head>
  <body>
    <p>
      <img src = "cajero.gif" />
      </p>
      <h1 id = "sobrante"></h1>
      <p>
        <input type = "number" id = "dinero" />
        <input type = "button" value = "EXTRAER" id =  "extraer" />
        </p>
        <p id="resultado"></p>
        <script src ="cajero.js" ></script>

  </body>
</html>

`class Billete
{
  constructor( n, v, c)
  {
    this.nombre = n;
    this.valor = v;
    this.cantidad = c;

  }

}

var efectivo = 0;
var caja = [];
var entregado = [];

caja.push(new Billete ("100",100,20) );
caja.push( new Billete ("50",50,20) );
caja.push( new Billete ("20",20,40) );
caja.push( new Billete ("10",10,100) );

var imagenes = [];
imagenes["100"] = "billete100.png";
imagenes["50"] = "billete50.png";
imagenes["20"] = "billete20.png";
imagenes["10"] = "billete10.png";



var dinero;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer") ;
b.addEventListener("click",entregarDinero);
document.addEventListener("keydown",clean);
var resto = document.getElementById("sobrante");
var extraer = 0;

for(var i of caja){
  efectivo += i.valor * i.cantidad;
}

resto.innerHTML = "Efectivo disponible : " + efectivo;

function entregarDinero()
{

  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

 for(var bi of caja)
 {

   if(dinero > 0)
   {
     div = Math.floor(dinero / bi.valor)
     if( div > bi.cantidad)
     {
       papeles = bi.cantidad;
     }

     else
       {
         papeles = div;
       }

        entregado.push(new Billete(bi.valor, papeles) );
        dinero = dinero - (bi.valor * papeles);
        extraer += bi.valor * papeles;
     }

   }

   if(dinero > 0 || efectivo < extraer )
   {
    resultado.innerHTML = "Soy un cajero malo y no puedo darte esa cantidad";
    console.log(dinero, " ", efectivo, " ", extraer);
    extraer = 0;
   }

   else
   {
      efectivo -= extraer;
     for(var e of entregado)
     {

         for(var i = e.valor; i > 0; i--)
         {
           resultado.innerHTML += "<img src = "+ imagenes[e.nombre]+ " />"+ "  ";
         }
         resultado.innerHTML += "<br />";
         resto.innerHTML = "Efectivo disponible : "+ efectivo;
         console.log(dinero, " ", efectivo, " ", extraer);
     }
     extraer = 0;

   }

   entregado = [];

 }

function clean()
 {
      resultado.innerHTML = " ";
}

Frank Cedeño

http://blesska.me/atm Por aqui mi aporte del Curso

Edwin Andres Roman Henao

https://imgur.com/deLUXCb Captura de pantalla 2020-04-12 17.46.53.png

Diego Romero

Envés de billetes son dogecoins.
Captura de pantalla (317).png

Intenten actualizar el código para que aparezca el saldo debajo de la imagen del banco sin los dogecoins y no con un alert. Se los agradecería mucho !!

<code> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body
      {
        background-color: "black";
        color: "white";
        font-family: Helvetica;
      }
    </style>
    <title>Cajero Automatico</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number"  id="dinero" />
      <input type="button" value="extraer" id="extraer"/>
      <input type="button" value="Saldo" id="saldo" />
    </p>
    <p id="resultado"> </p>
    <script type="text/javascript" src="cajero.js" id="entregado" > </script>
  </body>
</html>

<code> 
class Billete
{
  constructor(v, c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  for(var bi of caja)
  {

    if(dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);

      if(div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }

      entregado.push( new Billete(bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad -=  papeles
    }

  }

  if(dinero > 0)
  {
    resultado.innerHTML = "Soy un cajero malo, he sido malo y no puedo darte esa cantidad :(";
  }
  else
  {
    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
          resultado.innerHTML = resultado.innerHTML + "<strong>" + e.cantidad + " dogecoin de $ " + e.valor + "</strong>" + "<br />"; //innerHTML nos permite leer un dato o asignarlo al contenido a una etiqueta definida en HTML. Nos facilita la asignación de valores.
          for(var d=1; d<=e.cantidad; d++)
          {
            resultado.innerHTML += "<img src=" + e.imagen.src + " />" + "<br />";
          }
      }
    }
  }
}

function cosultarSaldo()
{
  let total = 0;

  for(var bi of caja)
  {
    total = total + bi.valor * bi.cantidad;
  }
  alert("Tu saldo es de : " + total + " dogecoins");
}
var caja = [];
var imagenes = [];
var entregado = [];
imagenes[100] = "dogeCoin.png";
imagenes[50] = "dogeCoin.png";
imagenes[20] = "dogeCoin.png";
imagenes[10] = "dogeCoin.png";
imagenes[5] = "dogeCoin.png";

caja.push( new Billete(100, 5) );
caja.push( new Billete(50, 5) );
caja.push( new Billete(20, 5) );
caja.push( new Billete(10, 5) );
caja.push( new Billete(5, 20) );

var dinero = 0;
var div = 0;
var papeles = 0;
var saldo = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
saldo.addEventListener("click", cosultarSaldo);
b.addEventListener("click", entregarDinero);

Francisco Zárate

Espero les ayude Para agregar las imagenes de su elección solo introduzcan el link como tercer parametro de entrada en:
caja.push(new Billete(50, 20, “cincuenta-pesos.jpg”));
Éxito

class Billete {
    constructor(v, c, l) {
        this.valor = v;
        this.cantidad = c;
        this.link = l;
    }
}

function entregarDinero() {
    var x = 0;
    var t = document.getElementById("dinero");
    dinero = parseInt(t.value);

    //reinicia el array "entregado", borrando todos los elementos
    entregado.splice(0, entregado.length);

    for (var bi of caja) {
        if (dinero > 0) {
            div = Math.floor(dinero / bi.valor);
            if (div > bi.cantidad) {
                papeles = bi.cantidad;
            }
            else {
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles, bi.link));
            dinero = dinero - (bi.valor * papeles);
            // Aqui se actualiza el valor de la caja
            caja[x] = new Billete(bi.valor, (bi.cantidad - papeles), bi.link);
            x++;
            //Aqui se llama la funcion que dibuja los billetes, parametros: ¿Qué billete? y ¿Cuántos dibujo?
            dibujarBillete(bi, papeles);
        }
    }
    if (dinero > 0) {
        resultado.innerHTML = "Soy un cajero malo, he sido malo y no puedo darte esa cantidad :(";
    }
    else {

        for (var e of entregado) {
            resultado.innerHTML += e.cantidad + " billetes de $ " + e.valor + "<br>";
        }
    }

    console.log("Este es el total: " + calcularTotal());
}

var caja = [];
var entregado = [];
caja.push(new Billete(50, 20, "cincuenta-pesos.jpg"));
caja.push(new Billete(20, 25, "veinte-pesos.jpg"));
caja.push(new Billete(10, 10, "diez-pesos.jpg"));

function dibujarBillete(elBillete, numBilletes) {

    for (x = 0; x < numBilletes; x++) {
        imagen = new Image();
        imagen.src = elBillete.link;
        document.body.appendChild(imagen);
    }
}

function calcularTotal() {
    var res = 0;
    for (ele of caja) {
        res += (ele.valor * ele.cantidad);
    }
    return (res);
}

var dinero;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);```

Hector Francisco Medina Garnica

Javier Eduardo Morón Mendoza

Me tardé pero me siento orgulloso jajaja

Henry Corredor

a mi ese cubo rubik desarmado me da anciedad >_<

juankipedia

javierbravorey

Finalmente después de algún tiempo, me tomo más de lo que esperaba, y creo que yo mismo me fui alargando el proyecto. Les explico lo que hice adicional:

Validar antes de realizar la entrega de billetes, es decir que el array entregado este vacío:
a. Validar si la cantidad a retirar es mayor que lo disponible.
b. Validar si la cantidad es mayor de cero
c. Verificar si se tienes billetes divisibles para la cantidad a retirar, encontrando un MCD. Y aplicando la función “es divisible”
Ingresar las cantidades en caja, por medio del usuario.
Llenar el arreglo de entregado, solo cuando la cantidad de billetes es mayor a cero.
Colocar en plural o singular la palabra billete según corresponda a la cantidad.

<
var imagenes = [];
imagenes["bill100"] = "bi100.png";
imagenes["bill50"] = "bi50.png";/// esto es un array asociativo
imagenes["bill20"] = "bi20.png";
imagenes["bill10"] = "bi10.png";

class Billete
{
  constructor (n, v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.nombre = n;
    this.imagen = new Image ();
    this.imagen.src = imagenes[this.nombre];
  }
}

var mensajeInicio = alert("BIENVENIDO AL CAJERO BANCO JJBR" + "\n" + "Configure los valores iniciales disponible en el cajero" + "\n" + "Ingrese desde 0 en adelante");
var x100 = prompt("Ingrese la cantidad de billetes de $100: ");
var x50 = prompt("Ingrese la cantidad de billetes de $50: ");
var x20 = prompt("Ingrese la cantidad de billetes de $20: ");
var x10 = prompt("Ingrese la cantidad de billetes de $10: ");

var entregado = [];
var caja = [];
caja.push(new Billete("bill100",100,x100));
caja.push(new Billete("bill50",50,x50));
caja.push(new Billete("bill20",20,x20));
caja.push(new Billete("bill10",10,x10));

var repetir = true;
var dineroPorEntregar = 0;
var div = 0;
var papeles = 0;
var total = 0;
var consulta = true;
var consultaEntregado = false;
var saldoActual;

var disponible = document.getElementById("disponible");
//var billetera = document.getElementById("billetera");
var resultado = document.getElementById("resultado");
var b = document.getElementById("retirar");
var c = document.getElementById("dineroEnCajero");
b.addEventListener("click", saldoEnCaja);
c.addEventListener("click", saldoDisponible);

function saldoDisponible()
{
  var saldoInicial;
  var totalEntregado = 0;

  if (consulta)
  {
    total = 0;
    for (var h of caja)
    {
      total = total + (h.valor * h.cantidad);
    }

    if (consultaEntregado)
    {
      for (var z of entregado)
      {
        totalEntregado = totalEntregado + (z.valor * z.cantidad);
      }
    }
    else
    {
      totalEntregado = 0;
    }

    saldoInicial = total - totalEntregado;
    saldoActual = saldoInicial;
  }

  disponible.innerHTML = "Disponible: $" + saldoInicial;
  //consulta = false;
}

function saldoEnCaja()
{
  var t = document.getElementById("dinero");
  dineroPorEntregar = parseInt(t.value);
  console.log("Saldo Actual : " + saldoActual);

  if (saldoActual == 0)
  {
    resultado.innerHTML = "Lo sentimos, al momento no hay dinero disponible " + "</br>";

  }
  else
  {
    if (saldoActual < dineroPorEntregar)
      {
        resultado.innerHTML = "No disponemos de la cantidad solicitada, ingrese con una cantidad inferior a $: " + saldoActual + "</br>";
      }
    else
      {
        if(esDivisible(dineroPorEntregar,5) && esDivisible(dineroPorEntregar,2))
          {
            entregarDinero();
          }
        else
          {
            resultado.innerHTML = "No hay billetes en esa denominación" + "</br>";
          }
      }
  }

}//FIN FUNCION

function esDivisible(num, divisor)
{
  if ( num % divisor == 0)
  {
    return true; // retorna el valor de la funcion
  }
  else
  {
    return false; // una funcion muere en el return
  }
}

function entregarDinero()
{
  var dineroEntregado = dineroPorEntregar;

  for (var bi of caja)
  {
    div = Math.floor(dineroEntregado / bi.valor);

      if(div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }

      if (div != 0)
      {
        entregado.push(new Billete(bi.nombre, bi.valor, papeles));
      }

      dineroEntregado = dineroEntregado - (bi.valor * papeles);
  }

    for ( var e of entregado)
    {
      if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " Billete de $" + " : " + "<img src=" + e.imagen.src + "></img>" + "<br />";
      }
      else
      {
        resultado.innerHTML += e.cantidad + " Billetes de $" + " : " + "<img src=" + e.imagen.src + "></img>" + "<br />";

        /*for (var i = 1; i <= e.cantidad; i++)
        {
          resultado.innerHTML +="<img src=" + e.imagen.src + "></img>" + "   ";
        }
        resultado.innerHTML += "<br />";*/
        resultado.innerHTML += "</ hr>";
      }

    }
      consultaEntregado = true;
      saldoDisponible();
}//FIN DE FUNCION
>

javi pinilla

Por fin, he conseguido sacarlo… lo dejo por aqui.

class Billete
{
  constructor(v, c)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
}

var imagenes = [];
imagenes[200] = "Billete200.gif";
imagenes[100] = "Billete100.gif";
imagenes[50] = "Billete50.gif";
imagenes[20] = "Billete20.gif";
imagenes[10] = "Billete10.gif";
imagenes[5] = "Billete5.gif";

function entregarDinero()
{
  var entregado = [];
  var t = document.getElementById("operacion");
  dinero = parseInt(t.value);
  if (dinero > efectivoT)
  {
    resultado.innerHTML += "No hay tanto efectivo. <br/>";
  }
  else if ( dinero % caja[caja.length -1].valor != 0)
  {
    resultado.innerHTML += "Escribe una cantidad multiplo de " + caja[caja.length -1].valor + " <br/>";
  }
  else
  {
    efectivoT = efectivoT - dinero;
    mostrarEfectivo.innerHTML = "Maximo en efectivo: " + efectivoT + "€" + "<br/>" ;

    for(var b of caja)
    {
      if (dinero > 0)
      {
        div = Math.floor(dinero / b.valor);
        if (div > b.cantidad)
        {
          papeles = b.cantidad;
        }
        else
        {
          papeles = div;
        }
        entregado.push(new Billete(b.valor, papeles));
        dinero = dinero - (b.valor * papeles);
        b.cantidad = b.cantidad - papeles;
      }
    }

    for(var e of entregado)
    {
      if(e.cantidad>0)
      {
        resultado.innerHTML += e.cantidad + " billetes de " + e.valor + "€" + "<br/>";
        resultado.appendChild(e.imagen);
        resultado.innerHTML += "</br>";
      }
    }
  }

  resultado.innerHTML += "<hr/>";
}

var caja = [];
caja.push(new Billete(200, 5));
caja.push(new Billete(100, 10));
caja.push(new Billete(50, 20));
caja.push(new Billete(20, 50));
caja.push(new Billete(10, 100));
caja.push(new Billete(5, 200));

var dinero = 0;
var div = 0;
var papeles = 0;
var efectivoT =0;

for(var b of caja)
{
  var efectivo = b.valor * b.cantidad;
  efectivoT = efectivoT + efectivo;
}

var resultado = document.getElementById("resultado");
var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

mostrarEfectivo.innerHTML = "Maximo en efectivo: " + efectivoT + "€" + "<br/>" ;

Luis Alberto Luisjuan Guerrero

caja.push( new Billete(20, 10));
caja.push( new Billete(50, 30));
caja.push( new Billete(100, 20));

Roy Roger Martinez Cano

voy dejando las imagenes de las denominaciones que ocupe

Por aqui dejo el html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cajero automatico</title>
    <link rel="stylesheet" href="static/style/style.css">
</head>
<body>
    <h2>Cantidad de billetes disponibles en el ATM</h2>
    <p id="billetesCaja"></p>
    <p>
        <img src="static/img/cajero.gif"/>
    </p>
    <p>
        <input type="number" id="txtEfectivo"/>
        <input type="button" id="btnCajero" value="Retirar del cajero"/>
    </p>
    <br/>
    <p id="resultado"></p>
    <script src="static/script/script.js"></script>
</body>
</html>

aqui esta el CSS:

h1{
    color:red;
}
h2{
    color: red;
}

y finalmente aqui esta mi Javascript:

imagenes=[]
imagenes["1000"]="static/img/billetes/Mil.png";
imagenes["500"]="static/img/billetes/Quinientos.png";
imagenes["200"]="static/img/billetes/Doscientos.png";
imagenes["100"]="static/img/billetes/Cien.png";
imagenes["50"]="static/img/billetes/Cincuenta.png";
imagenes["20"]="static/img/billetes/Veinte.png";
imagenes["10"]="static/img/billetes/Diez.png";

//clase billete que guarda la denominacion(valor) y la cantidad(cantidad)
class Billete{
    //constructor de la clase
    constructor(valor,cantidad){
        this.img = new Image();
        this.valor= valor;
        this.cantidad= cantidad;
        this.img.src = imagenes[this.valor];
    }
    //para mostrar los billetes entregados del cajero
    mostrar(){
        resultado.innerHTML = resultado.innerHTML+"<p>";
        resultado.innerHTML = resultado.innerHTML+"<strong>Cantidad : "+ this.cantidad +"</strong><br />";
        resultado.innerHTML = resultado.innerHTML+"Valor   : "+ this.valor +"<hr />";
        resultado.innerHTML = resultado.innerHTML+"</p>";
        resultado.innerHTML = resultado.innerHTML+"<img src='"+this.img.src+"' />";
    }
    //para mostrar los billetes que contiene el cajero
    mostrarCaja(){
        billetesCaja.innerHTML = billetesCaja.innerHTML+"<p>";
        billetesCaja.innerHTML = billetesCaja.innerHTML+"<strong>Billete : "+ this.valor +"</strong><br />";
        billetesCaja.innerHTML = billetesCaja.innerHTML+"Cantidad   : "+ this.cantidad;
        billetesCaja.innerHTML = billetesCaja.innerHTML+"</p>";
    }
}
//arreglo de "cajero automatico"(caja) y Retiro(retiro) que es la cantidad de billetes que lanzara el cajero
var unidadesBillete = 3;
var denominaciones=[1000,500,200,100,50,20,10];
var caja = [];
var retiro = [];

//Obteniendo los datos de input y del buttom
var txtCantidad = document.getElementById("txtEfectivo");
var btnEfectivo = document.getElementById("btnCajero");
var billetesCaja = document.getElementById("billetesCaja");
var resultado = document.getElementById("resultado");

//Añadiendo los billetes a nuestro "cajero automatico"(caja)
for (billete of denominaciones){
    caja.push(new Billete(billete,unidadesBillete));
}

//funcion para sumar lo que hay en caja
function disponibleCaja(){
    var sumatoria =0;
    for(billete of caja){
        sumatoria += billete.valor*billete.cantidad;
    }
    return sumatoria;
}


//para mostrar los billetes disponibles en caja luefo de eso la invocamos para la pantalla incial
function mostrarBilletesCaja(){
    var totalCaja = disponibleCaja();
    billetesCaja.innerHTML += "Total en ATM: "+totalCaja;
    for (billete of caja){
        billete.mostrarCaja();
    }
}
mostrarBilletesCaja();

//para mostrar los billetes retirados del cajero
function mostrarBilletesRetiro(){
    for(billete of retiro)
        billete.mostrar();
}
//Añadir escuchador del boton
btnEfectivo.addEventListener("click",mostrarEfectivo);

//para limpiar los resultado de los billetes
function limpiarResultado(){
    resultado.innerHTML = "";
    billetesCaja.innerHTML = "";
}

//funcion del evento click del boton
function mostrarEfectivo(event){
    var dinero = parseInt(txtCantidad.value);
    retiro = calculoBillete(dinero);
    limpiarResultado();
    if (retiro.length == 0){
        resultado.innerHTML= "Lo siento no puedo retirar esa cantidad";
    }
    mostrarBilletesRetiro();
    mostrarBilletesCaja();
}

//funcion que devuelve la minima cantidad de billete
function calculoBillete(dinero){
    var vuelto =[];
    var totalCaja = disponibleCaja();
    if (totalCaja>=dinero){//si el total del cajero tiene mas que el dinero solicitado
        for(billete of caja){
            if(dinero>0){
                var dineroBillete = Math.floor(dinero/billete.valor)//sacar la cantidad de billetes correspondiente
                if(dineroBillete < billete.cantidad){
                    papeles = dineroBillete;
                }
                else{
                    papeles = billete.cantidad;
                }
                if(papeles>0)
                  vuelto.push(new Billete(billete.valor,papeles));//poner en el arreglo de objetos el billete y su cantidad para el vuelto
                dinero = dinero-(billete.valor*papeles);//para ir restando la cantidad de billete entregado
                billete.cantidad = billete.cantidad-papeles;
            }
        }
    }
    if (dinero>0){//si al final quedo el dinero en el cajero quiere decir que el cajero no completo la operacion
        return [];
    }
    else{//en caso contrario retornamos los billetes
        return vuelto;
    }
}

IsraelBarreras

Mi resultado:

class Billete {
  constructor(v, c, url)
  {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = url;
  }
};

function extraerDinero()
{
 var entregado = [];
 var c = document.getElementById("dinero");
 cantidad = parseInt(c.value);

 for(var denominacion of caja)
 {
   var papel = 0;
   while(cantidad >= denominacion.valor && denominacion.cantidad > papel)
   {
     cantidad -= denominacion.valor;
     papel++;
   }
   entregado.push(new Billete(denominacion.valor, papel, denominacion.imagen.src));
 }

 if(cantidad > 0)
 {
   resultado.innerHTML += "No se puede entregar esta cantidad con los billetes existentes <br/>"
 }
 else
 {
  var x = 0;
  resultado.innerHTML += ("No olvide tomar su dinero: <br/>");
  for (var b of entregado)
  {
   caja[x++].cantidad -= b.cantidad;
   if(b.cantidad > 0)
   {
     for(var i = 0; i < b.cantidad; i++)
     {
       resultado.innerHTML += "<img src=" + b.imagen.src + "></img>";
     }
     resultado.innerHTML += ("</br>");
   }
  }
 }
  resultado.innerHTML += ("<hr/>");
  restante.innerHTML = "<strong>Dinero disponible: " + calcularRestante() + "</strong>";
}

var caja = [];
caja[0] = (new Billete(50,10,"cincuenta.png"));
caja[1] = (new Billete(20,10,"veinte.png"));
caja[2] = (new Billete(10,10,"diez.png"));

var papel = 0;

var resultado = document.getElementById("resultado");

var restante = document.getElementById("restante");
restante.innerHTML = "<strong>Dinero disponible: " + calcularRestante() + "</strong>";

var b = document.getElementById("extraer");
b.addEventListener("click", extraerDinero);

function calcularRestante()
{
  var total = 0;
  for(var b of caja)
  {
    total += b.valor * b.cantidad;
  }
  return total;
}

Alejandro Tangarife Rivas

Hola, un pro tip pequeño para ustedes 😄.

En HTML la forma más recomendada para dibujar imagenes en una página es con la etiquete <figure>

<body>

	<figure>
		<img src="direcciónImagen" alt="textoAlternativo">
	</figure>

</body>

Gabriel De Jesus Gomez Barrios

Comparto mi resultado, la verdad fue un muy buen desafío.
Dejo mis platzi coins por si alguien los quiere usar.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
  </head>
  <body>
    <p>
      <<img src="cajero.gif" "\n" />
    </p>
    <p id="saldo"></p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
    </p>
    <p id="resultado"></p>
    <script src="cajero.js" type="text/javascript"></script>
  </body>
</html>

var imagenes = [];
imagenes["100"] = "platziCoins100.png";
imagenes["50"] = "platziCoins50.png";
imagenes["20"] = "platziCoins20.png";
imagenes["10"] = "platziCoins10.png";//carga de imagenes por array

class Billete
{
  constructor( v, c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero()
{
  var dinero = 0;
  var div = 0;
  var papeles = 0;
  var total = 0;
  var divAux = 0;
  resultado.innerHTML = null;
  saldo.innerHTML ="";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  divAux = dinero % 10;

  for (var t of caja) //cuento la cantidad total de dinero en el cajero
  {
      total +=  t.cantidad*t.valor;
    }

  if (divAux == 0) //valido las cantidades que puede operar el cajero
  {
    for (var bi of caja)
    {
      if (dinero > 0 & dinero <= total) //valido que el dinero sea menor que el total para evitar repeticiones
      {
        div = Math.floor(dinero / bi.valor);
        if ( div > bi.cantidad)
        {
          papeles = bi.cantidad;
          bi.cantidad = 0;
          total = total - (papeles * bi.valor);
        }
        else
        {
          papeles = div;
          bi.cantidad = bi.cantidad - div;
          total = total - papeles * bi.valor;
        }//siempre actualizo el total y la cantidad de billetes(directamente en caja)

        entregado.push ( new Billete( bi.valor, papeles));
        dinero -= (bi.valor * papeles);
      }
      saldo.innerHTML += "quedan " + bi.cantidad + " billetes de " + bi.valor + "<br>"; //imprimo con el mismo for la cantidad restante
    }
  }

  if (dinero > 0)// acá entera tambien cuando es un numero invalido
  {
      saldo.innerHTML ="";//es importante para limpiar la pagina y no se repita informacion
      for (var bi of caja)
      {
        saldo.innerHTML += "quedan " + bi.cantidad + " billetes de " + bi.valor + "<br>";
      }
      resultado.innerHTML ="Saldo imposible de extraer";
      saldo.innerHTML += "</br>"+"Saldo disponible: " + total + "</br>";
  }

  else
  {
    for (var e of entregado)// acá se imprimen los billetes correctos
    {
      if (e.cantidad > 0)
      {
        resultado.innerHTML += e.cantidad + " <img src=" + e.imagen.src + " />";
      }
    }
    saldo.innerHTML +="</br>"+ "Saldo disponible: " + total + "</br>";// se actuliza el saldo
  }
  console.log(resultado.innerHTML);
}

var caja = [];
var entregado = [];
caja.push( new Billete(100, 10));//carga de billetes
caja.push( new Billete( 50, 20));
caja.push( new Billete( 20, 30));
caja.push( new Billete( 10, 40));

var saldo = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);//definicion de campos y accion de lanzamiento```

Angelo Paul Yenque Tume

Imprimir billetes en imágenes ✓
Extraer dinero y cuanto dinero queda ✓

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cajero de Billetes y Monedas</title>
</head>
<body>
    <p id="saldoId"> </p>
    <p><img src="cajero_auto.jpg" width="350" height="350"></p>
    
    <p>
        <input type="number" id="dinero">
        <input type="button" value="Extraer" id="extraer">
    </p>
    <p>---------- Historico de retiros ------------- </p>
    
    <p id="resultadoId">  </p>
    <p id="horarioId"> </p>
    <script src="cajeroreto.js"></script>
</body>
</html>

Js:


var imagenes =[];

imagenes["valor200"] ="billete200.png";
imagenes["valor100"] ="billete100.png";
imagenes["valor50"] ="billete50.png";
imagenes["valor20"] ="billete20.png";
imagenes["valor10"] ="billete10.png";
imagenes["valor5"] ="moneda5.png";
imagenes["valor2"] ="moneda2.png";
imagenes["valor1"] ="moneda1.png";


class Billete
{
    constructor(valor,cantidad)
    {   
        this.valor = valor;
        this.cantidad = cantidad;
        this.imagen = new Image();
        this.imagen.src = imagenes["valor" + this.valor];
    }

    mostrar()
    { 
        document.body.appendChild(this.imagen); // se agrega la etiquta img .. a la etiqueta body
    }
    
    devolvertipo()
    {
        if(this.valor >= 10)
        {
            return "Billete";
        }
        else
        {
            return "Moneda";
        }
    }
    
}




var caja =[];
var entregado = [];
var dinero;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("resultadoId");
var saldo = document.getElementById("saldoId");
var horario = document.getElementById("horarioId");

var b = document.getElementById("extraer");
b.addEventListener("click",entregarDinero);
b.addEventListener("click",reiniciarBoton);


t = document.getElementById("dinero")

caja.push(new Billete(200,15));
caja.push(new Billete(100,15));
caja.push(new Billete(50,15));
caja.push(new Billete(20,20));
caja.push(new Billete(10,20));
caja.push(new Billete(5,20));
caja.push(new Billete(2,20));
caja.push(new Billete(1,20));

var saldoCaja = sumaCaja(caja);
saldo.innerHTML = ("<strong> Saldo actual del cajero: " + saldoCaja + "<hr>");
console.log(caja);


function reiniciarBoton()
{
    t.value = null;

}


function entregarDinero() 
{
    dinero = parseInt(t.value);
    var dineroTemp = dinero;
    var hora = devolverHora();
   for (var bi of caja)
    {
        if (dinero > 0)
        {
            div = Math.floor(dinero / bi.valor);

            if(div > bi.cantidad)
            {
                papeles = bi.cantidad;
            }
            else
            {
                papeles = div;
            }

            entregado.push(new Billete(bi.valor,papeles));
            dinero = dinero - (bi.valor*papeles);
        }

    }

    if(dinero > 0)
    {
        resultado.innerHTML +="<h1> Saldo insuficiente </h1>"; //agrega un valor a una etiqueta del HTML, atributo del objeto resultado
        console.log(caja);
        console.log(entregado);
        console.log(dinero);
    }
    else
    {
       for(var e of entregado)
       {
           if(e.cantidad > 0)
           {
            resultado.innerHTML += ("<li><strong>" + e.cantidad + " </strong>" + e.devolvertipo() + "s de S/. <strong>" + e.valor + "</strong>" + "</ul></li><img src=" + e.imagen.src + "> <hr>");

            for(var c of caja)
            {
                 if(c.valor == e.valor)
                 {
                     c.cantidad = c.cantidad - e.cantidad;
                 }
            }

           }
       }
       horario.innerHTML += ("Retiro de  S/."+ dineroTemp +  " | Hora : "  + hora + "<br>");
       console.log(caja);
       console.log(entregado);
       saldoCaja = saldoCaja - sumaCaja(entregado);
       saldo.innerHTML = ("<strong> Saldo actual del cajero: " + saldoCaja + "<hr>");
       
    }
    entregado = [];
}

function sumaCaja(arreglo)
{
    
    var suma = 0;
    for(var i of arreglo)
    {
        suma += i.cantidad*i.valor;
    }

    return suma;

}

function devolverHora()
{
    var tiempo = new Date();
    var hora = tiempo.getHours();
    var minuto = tiempo.getMinutes();
    var segundo = tiempo.getSeconds();
    var horaTexto = hora + " : " + minuto + " : " + segundo;
    return horaTexto;
}

Falta diseño, pero a seguir aprendiendo ! 😃

Katerin Calderón

JAVASCRIPT:

class Billete
{
    constructor(n, v, c)
    {
        this.nombre = n;        
        this.valor = v;
        this.cantidad = c;
    }
    mostrar()
    {
        this.imagen = new Image();
        this.imagen.src = imagenes[this.nombre];
        document.getElementById("divBilletes").appendChild(this.imagen);
    }
}

var imagenes = [];
imagenes["500"] = "500.png";
imagenes["200"] = "200.png";
imagenes["100"] = "100.png";
imagenes["20"] = "20.png";
    
var caja = [];
caja.push(new Billete("500", 500, 5));
caja.push(new Billete("200", 200 , 3));
caja.push(new Billete("100", 100, 7));
caja.push(new Billete("20", 20, 10));

var valorBilletes = caja.map(a => a.valor);
var valorMinimo = Math.min.apply(null, valorBilletes);

var entrega = [];
var monto;
var div = 0;
var papeles = 0;

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

function entregarDinero()
{
    var m = document.getElementById("monto");
    monto = parseInt(m.value);

    limpiar();

    if(monto % valorMinimo != 0)
    {
        document.getElementById("divBilletes").innerHTML = "No puedo entregarte esa cantidad de dinero";
        monto = 0; 
    }

    for(var bi of caja)
    {
        if(monto > 0)
        {
            div = Math.floor( monto / bi.valor);
            if(div > bi.cantidad)
            {
                papeles = bi.cantidad;
            }
            else
            {
                papeles = div;
            }
            bi.cantidad = bi.cantidad - papeles;
            entrega.push(new Billete (bi.nombre, bi.valor, papeles));
            monto = monto - (bi.valor * papeles);        
        }       
    }
    if(monto > 0)
    {
        document.getElementById("divBilletes").innerHTML = "Soy un cajero pobre, ya no tengo mas billetes :(";
    }
    else
    {
        for(entregar of entrega)
        {
            for(i=1; i<= entregar.cantidad; i++)
            {
                entregar.mostrar();
            }
            
        }
    }
}

function limpiar()
{
    var inputMonto = document.getElementById("monto");
    inputMonto.value = "";
    entrega = [];
    document.getElementById("divBilletes").innerHTML = "";

}

Betty Rossana Jimenez Cedeño

La verdad necesité ayuda, pero entendí.

<code>
var imagenes = [];
imagenes["50"] = "billete50.png"
imagenes["20"] = "billete20.png"
imagenes["10"] = "billete10.png"

class billete
{
  constructor(v, c)
  {
    this.imagen = new Image;
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

var caja = [];
var entregado = [];
caja.push(new billete (50, 5));
caja.push(new billete (20, 3));
caja.push(new billete (10, 2));
cuenta(); // en esta linea se ejecuta el conteo de toda la cantidad
var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", cash);


function cash()
{
  var dibujando = []; // para traer la imagen al ciclo
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

  if (total >= dinero)
{
  for (b of caja)
  {
    if ( dinero > 0)
    {
      div = Math.floor( dinero / b.valor );

      if (div > b.cantidad)
      {
        papeles =  b.cantidad;
      }
      else
      {
        papeles = div;
      }
      b.cantidad = b.cantidad - papeles;
      for ( var i = 0; i < papeles; i++) // que dibuje el billete y cuente y descuente.
      {
        dibujando.push( new billete (b.valor, papeles) );
      }
        dinero = dinero - (b.valor * papeles);
    }
  }

    if (dinero == 0)
    {
      resultado.innerHTML = "Has obtenido <br />"

      for ( var e of dibujando)
      {
        resultado.innerHTML += "<img src=" +  e.imagen.src  + " />"; // que muestre el billete
      }
        resultado.innerHTML += " <hr/>"

        cuenta(); // para que cuente cuanto fue retirado
    }

    else
    {
      resultado.innerHTML = "soy un cajero muy pobre <br />" ;
    }
  }
}
  function cuenta()
   {
    total = 0;
    for ( var to of caja)
    {
      total += to.valor * to.cantidad;
    }
    console.log(total);
   }
</code>

Kevin Parra Lopez

(

Erwing Armando Coss Batista

mi cara cuando freddy dijo que document.write era una mala practica
:0

luigijosegutierrez

24 clases despues, Freddy nos dice que el document.write no es profesional :V

cristian-camilo-bulla

Aquí pueden ver mi Cajero
COLOMBIA

Cesar Augusto Moreno Chavez

Ha sido un reto enorme, si no fuera por los demas compañeros de clase mas diestros en el tema seria muy dificil para quienes no dominamos estos conceptos.

Aun asi por todo su aporte mil gracias.
Ejercicio 1.jpg

Luis Daniel Altamirano Soto

Emanuel Sabariego

William Ricardo Arenas Vera

Les comparto mi solución; en el html cree un <div id=“billetes”></div> para mostrar los billetes.

class Billete {
  constructor(valor,cant) {
    this.valor=valor;
    this.cant=cant;
    this.imagenUrl = "b"+valor+".png";
  }
}

function validaTotal(){
  var totalCaja = 0;
  var menor = 0;
  for (var c of caja){
    totalCaja = totalCaja + (c.valor*c.cant);
  }
  return totalCaja;
}

function validaMenorDenomina(){
  var menor = 0;
  for (var c of caja){
    if (menor == 0 || menor > c.valor)
    {
      menor = c.valor;
    }
  }
  return menor;
}

function entregaDinero()
{
  entregado=[];
  resultado.innerHTML = "";
  billetes.innerHTML = "";

  var t = document.getElementById("txtDinero");
  dinero = parseInt(t.value);
  var totalC = validaTotal();
  var menorD = validaMenorDenomina();

  if (dinero > totalC) {
    resultado.innerHTML = "Soy un cajero pobre, no me alcanza el dinero :(";
    return false;
  }

  if (dinero % menorD != 0 ) {
    resultado.innerHTML = "Soy un cajero inteligente, solo entrego multiplos de "+menorD;
    return false;
  }

  for(bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero/bi.valor);
      if (div > bi.cant)
      {
        papeles = bi.cant;
      }
      else
      {
        papeles = div;
      }
      entregado.push(new Billete(bi.valor,papeles));
      dinero = dinero - (bi.valor * papeles);
    }
  }

  for (var e of entregado) {
    if (e.cant > 0) {
          //resultado.innerHTML = resultado.innerHTML + e.cant+" billetes de $" + e.valor + "<br />";
          for (var i = 0; i < e.cant; i++) {
            billetes.innerHTML += "<img src=" + e.imagenUrl + " />";
          }
          billetes.innerHTML += "<br />";
        }
      }
  }

var caja = [];
var entregado = [];
caja.push(new Billete(5000,2));
caja.push(new Billete(2000,3));
caja.push(new Billete(1000,5));
caja.push(new Billete(500,1));
caja.push(new Billete(200,5));
caja.push(new Billete(100,5));
caja.push(new Billete(50,2));

var dinero = 0;
var div = 0;
var papeles = 0;

var resultado = document.getElementById("result");
var billetes = document.getElementById("billetes");
var boton = document.getElementById("btnExtraer");
boton.addEventListener("click", entregaDinero);

Ramón Ruiz

Les dejo estas imágenes que hice de billetes.

Daniela Camacho

Vander Idme

var r = document.getElementById("resultado");
var b = document.getElementById("extraer");
var s = document.getElementById("estatus");

b.addEventListener("click", entregarDinero);

var imagenes = [];

imagenes[50] = "vaca.png";
imagenes[20] = "pollo.png";
imagenes[10] = "cerdo.png";

var dinero;
var papeles = 0;
var div = 0;

var caja = [];
var entregado = [];

class Billete {
    constructor(v, c) {

        this.imagen = new Image();
        this.valor = v;
        this.cantidad = c;
        this.imagen.src = imagenes[this.valor];
    }  
}

function entregarDinero() {

    var t = document.getElementById("dinero");
    dinero = parseInt(t.value);

    for (var bi of caja) {

        if (dinero > 0) {
            div = Math.floor(dinero / bi.valor);

            if (div > bi.cantidad) {
                papeles = bi.cantidad;
            }
            else {
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles));
            bi.cantidad = bi.cantidad - papeles;
            dinero = dinero - (bi.valor * papeles);
        }
        //console.log("billetes de $: " + bi.valor + "quedan: " + bi.cantidad);
    }
    if (dinero > 0) {

        r.innerHTML = "soy un cajero pobre";

    } else {
        //trucazo para limpiar la pantalla 
        r.innerHTML = " ";

        for (var e of entregado) {
            if(e.cantidad > 0){
                r.innerHTML += e.cantidad + " Billetes de $" + e.valor + "<br>";
                for(var i=0; i<e.cantidad;i++){
                    r.innerHTML += "<img src=" + e.imagen.src + ">";                  
                }
                r.innerHTML += "<br>"
            }
        }
        
        r.innerHTML = r.innerHTML + "<hr>";  
    }
    //hubo problemas para mostrar de nuevo la cantidad de billetes que se estaba entregando, porque al mostrar
    //los billetes entregados que se guardaban entregados, se hacia un push de la nueva cantidad dada, pero este
    //array aun continuaba teniendo los push anteriores, lo que se hizo fue vaciar entregado con entregado = []
    entregado = [];
    estatus();
}

caja.push(new Billete(50, 10));
caja.push(new Billete(20, 5));
caja.push(new Billete(10, 5));

function estatus(){

    var dinero_total = 0;
    for(c of caja){
        dinero_total = dinero_total + (c.valor * c.cantidad);
    }

    s.innerHTML = "Estado del cajero: <br>";
    s.innerHTML += "Dinero total: " + dinero_total + "<br>";
    
    for(c of caja){
        s.innerHTML += "Billetes de $" + c.valor + " quedan: " + c.cantidad + "<br>";

    }
}
estatus();

Ana Beatriz Martinez

Mi aporte 😄

Al cargar sin realizar ningún retiro:

Primer retiro:

Segundo retiro:

Yuder David Hernandez Melo

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href= "imagenes/icono_cajero.ico">
  <title>ATM</title>
</head>
<body>
  
    <p id="Imagen_cajero"></p>
    <p>
      <input type="text" id="valorIngresado">
      <input type="button" value="Retirar" id="BotonRetiro">
    </p>
    <p id="resultado"></p>
    <canvas width="700" height="70" id="canvas" ></canvas>
    <p id="resumen"></p>
    <script src="javascript/clase_billete.js"></script>
    <script src="javascript/calculo_retiro.js"></script>
    <script src="javascript/dibujar.js"></script>

</body>
</html>

CALCULO RETIRO

var d = document.getElementById("BotonRetiro");
var e1 = document.getElementById("valorIngresado");
var res = document.getElementById("resultado");
var imagen_cajero = document.getElementById("Imagen_cajero");
var Resumen = document.getElementById("resumen");
imagen_cajero.innerHTML="<img src=imagenes/cajero.gif>";
var Imagen_billete = document.getElementById("imagen_billete");
d.addEventListener("click", eventoClick);

var billete =[];
billete.push(new money(50, 5, 0, "<img src=imagenes/fifty.gif>"));
billete.push(new money(20, 4, 0, "<img src=imagenes/twenty.gif>"));
billete.push(new money(10, 3, 0, "<img src=imagenes/ten.gif>"));
billete.push(new money(5, 5, 0, "<img src=imagenes/five.gif>"));
Resumen.innerHTML="Saldo en cajero" + "<br />" ;
for(var i of billete){
     Resumen.innerHTML= Resumen.innerHTML + i.valor + " = " + i.cantidad + "<br />" ;
     
 }

function eventoClick(){
    memoria_posicion = 0;
    borrar(); 
    var Entregado = parseInt(e1.value);
    if(Entregado>0){
        for(var b of billete){
            while (Entregado>=b.valor && b.cantidad != b.transferido) {
                
                b.transferido ++;
                Entregado = Entregado - b.valor;
            }
          
        }
        if(Entregado==0){
           res.innerHTML="la suma entregada" + "<br />" ;
           Resumen.innerHTML="Saldo en cajero" + "<br />" ;
           imagen_cajero.innerHTML="<img src=imagenes/cajero_retiro.gif>";
           for(var i of billete){
               if(i.cantidad > 0){
                i.cantidad = Math.abs(i.cantidad - i.transferido);
                    if (i.transferido>0) {
                    res.innerHTML= res.innerHTML + i.valor + "= " + i.transferido + "<br />" ;
                    }
               }
                Resumen.innerHTML= Resumen.innerHTML + i.valor + " = " + i.cantidad + "<br />" ;
                dibujar(i.valor, i.transferido, 40);
                i.transferido = 0 ;
                
            }
            memoria_posicion = 0;
            
        }
        else{
            res.innerHTML="Sin fondos";
            imagen_cajero.innerHTML="<img src=imagenes/cajero_sin_fondos.gif>";
            for(var i of billete){
                i.transferido = 0 ;
            }
        }
    }
    else{
        res.innerHTML="Ingrese cantidad valida";
        imagen_cajero.innerHTML="<img src=imagenes/cajero_invalido.gif>";
    }
 
}

DIBUJAR

var ctx = document.getElementById('canvas').getContext('2d');
var picture50 = new Image();
picture50.src="imagenes/fifty.gif";

var picture20 = new Image();
picture20.src="imagenes/twenty.gif";

var picture10 = new Image();
picture10.src="imagenes/ten.gif";

var picture5 = new Image();
picture5.src="imagenes/five.gif";

var memoria_posicion = 0;

function dibujar(valor, cantidad, distancia) {
    
    if(valor==50){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture50,memoria_posicion,0);
                memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==20){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture20,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==10){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture10,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
    else if(valor==5){
        for(var j=0; j < cantidad; j++){
            ctx.drawImage(picture5,memoria_posicion,0);
            memoria_posicion = memoria_posicion + distancia;
        }
    }
}  

function borrar()
{
    ctx.fillStyle ="#FFFFFF";
    ctx.fillRect(0,0,700,70);
}

CLASE_BILLETE

class money
{
    constructor(valor, cantidad, tranfer, image)
    {
        this.valor =valor;
        this.cantidad = cantidad;
        this.transferido = tranfer;
        this.imagen = image;
        
    }
    mostrar()
    {
        console.log("por aqui paso " + this.valor);
    }

}

Gonzalo Neyra Bermudez

Anotación 2020-04-10 183416.png
let caja = [];
let entregado = [];

caja.push(new Billete(50, 3));
caja.push(new Billete(20, 2));
caja.push(new Billete(10, 2));

let dinero = 0;
let div;
let papeles;

let totalCaja = document.getElementById(“total”);
let totalSoles = 0;

maxRetiro();

let biCant = [];
let entrCant = [];

function entregarDinero(){
let t = document.getElementById(“dinero”);
dinero = parseInt(t.value);

if(dinero > totalSoles){
    // console.log("No hay suficiente dinero en el banco");
    resultado.innerHTML = "No hay dinero suficiente :(";
} else {
    for(bi of caja){
        if(dinero > 0){
            div = Math.floor(dinero / bi.valor);
            if(div > bi.cantidad){
                papeles = bi.cantidad;
            } else{
                papeles = div;
            }
            entregado.push(new Billete(bi.valor, papeles));
            dinero -= (bi.valor *papeles);
            dineroEntregado = bi.cantidad;
        }
        biCant.push(bi.cantidad);
    }
            
    for(entr of entregado){
        entrCant.push(entr.cantidad);
    }

    for(let i = 0; i < entregado.length; i++){
        caja[i].cantidad = biCant[i]-entrCant[i];
    }

    for(var e of entregado){

        if(e.valor == 10){
            cargarDiez(e.cantidad); 
        }

        if(e.valor == 20){
            cargarVeinte(e.cantidad); 
        }

        if(e.valor == 50){
            cargarCincuenta(e.cantidad); 
        }

        if(e.cantidad > 0){

            resultado.innerHTML += e.cantidad + " billetes de " + e.valor + "<br>";
        }
    }
}
maxRetiro();
entregado = [];
biCant = []
entrCant = []

}

let diez = {
url: “…/img/diez.png”,
cargarOk: false
}

diez.img = new Image();
diez.img.src = diez.url;
diez.img.addEventListener(“load”, cargarDiez);

function cargarDiez(cant){
diez.cargarOk = true;
cargarImgBillete(cant, diez.url);
}

let veinte = {
url: “…/img/veinte.png”,
cargarOk: false
}

veinte.img = new Image();
veinte.img.src = veinte.url;
veinte.img.addEventListener(“load”, cargarVeinte);

function cargarVeinte(cant){
veinte.cargarOk = true;
cargarImgBillete(cant, veinte.url);
}

let cincuenta = {
url: “…/img/cincuenta.jpg”,
cargarOk: false
}

cincuenta.img = new Image();
cincuenta.img.src = cincuenta.url;
cincuenta.img.addEventListener(“load”, cargarCincuenta);

function cargarCincuenta(cant){
cincuenta.cargarOk = true;
cargarImgBillete(cant, cincuenta.url);
}

function cargarImgBillete(c, src){
let imgD;
let bP = document.getElementById(“billetes”);

for(let i = 0; i < c; i++){
    imgD = bP.appendChild(document.createElement("img"));
    imgD.setAttribute("src",src);
}

}

let resultado = document.getElementById(“resultado”);

let b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

Luis Javier Jaramillo García

class Billete {
  constructor(name, value, quantity) {
    this.imagen = new Image();
    this.nombre = name;
    this.imagen.src = imagenes[this.nombre];
    this.valor = value;
    this.cantidad = quantity;
  }
}

function entregarDinero() {
  var salto = document.createElement("BR");
  var veces = document.createTextNode(" x ");
  dinero = parseInt(t.value);
  for(billetes of caja) {
    if(dinero > 0) {
      div = Math.floor(dinero / billetes.valor);
      if(div > billetes.cantidad) {
        papeles = billetes.cantidad;
        totalDinero = totalDinero - (papeles * billetes.valor);
      }
      else {
        papeles = div;
        totalDinero = totalDinero - (papeles * billetes.valor);
      }
      entregado.push(new Billete(billetes.nombre, billetes.valor, papeles));
      dinero = dinero - (billetes.valor * papeles);
    }
  }
  if(dinero > 0) {
    resultado.innerHTML = "No puedo entregar esa cantidad D:";
  }
  else {
    for(entrega of entregado) {
      if(entrega.cantidad > 0 && totalDinero >= 0) {
              resultado.innerHTML += entrega.cantidad;
              resultado.appendChild(veces);
              resultado.appendChild(entrega.imagen);
              resultado.appendChild(salto);
      }
      else {
        resultado.innerHTML = "Se acabaron los billetes.";
      }
    }
  }
  if(totalDinero > 0) {
    disponible.innerHTML = "En este momento tenemos disponibles $ " + totalDinero;
  }
  else {
    disponible.innerHTML = "Ya no tengo dinero :(";
  }
}

function totalCaja() {
  for(total of caja) {
    totalDinero += (total.valor * total.cantidad);
  }
  disponible.innerHTML = "En este momento tenemos disponibles $ " + totalDinero;
}

var imagenes = [];
imagenes["cincuenta"] = "50s.png";
imagenes["veinte"] = "20s.png";
imagenes["diez"] = "10s.png";

var caja = [];
var entregado = [];
caja.push(new Billete("cincuenta", 50, 10));
caja.push(new Billete("veinte", 20, 5));
caja.push(new Billete("diez", 10, 10));

var div = 0;
var papeles = 0;
var dinero = 0;
var totalDinero = 0;

var b = document.getElementById("extraer");

b.addEventListener("click", entregarDinero);
var t = document.getElementById("dinero");
var resultado = document.getElementById("resultado");
var disponible = document.getElementById("disponible");
window.addEventListener("load", totalCaja);

Luis Alberto Luisjuan Guerrero

Dejo la pagina con la que cambie de tamaño las imagenes de los billetes:
https://www.iloveimg.com/

Kevin Flórez

HTML

<
<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cajero automatico</title>
    <style media="screen">
    body{
      background-color: grey;
      color: white;
    }
      #saldo{
        background-color: white;
        color: green;
      }
      #retirado{
        background-color: white;
        color: red;
      }
      #resultado{
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p>
    <img src="cajero.gif" />
    </p>
      <p id="saldo"> </p>
    <h3>Ingrese la cantidad a retirar</h3>
    <p>
      <input type="number" id="dinero">
      <input type="button" value="Extraer" id="extraer">
      <input type="button" value="Disponible" id="disponible">
      <input type="button" value="Historial" id="histori">
    </p>

    <p id="retirado"></p>
    <p id="resultado"></p>
    <script src="cajero.js"></script>
      <script src="cajeroClass.js"></script>
  </body>
</html>

>

javaScript cajero.js

<

function entregarDinero(){

  resultado.innerHTML = "";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);

    if(dinero > saldoCaja()){
      resultado.innerHTML = "<strong>No es posible sacar esa cantidad $" + dinero + " , supera el saldo disponible</strong><br><hr> ";
    }
    else {
      var val = 0;
      var cant = 0;
      var i = 0;

      retirado.splice(0);
    for(var bi of caja){
      if (dinero > 0){
        div = Math.floor(dinero/bi.valor);

        if (div > bi.cantidad) {
            papeles = bi.cantidad;
        }
        else {
        papeles = div;
        }

        retirado.push(new Billete(bi.valor, papeles));//para solo mostrar retiro reciente

          for (var en of entregado){
            if (bi.valor == en.valor){
              entregado.splice(i,1,new Billete(bi.valor,en.cantidad + papeles));
            }
          }
      dinero = dinero - (bi.valor * papeles);
      val = bi.valor;
      cant = bi.cantidad - papeles;
      caja.splice(i,1,new Billete(val, cant));
      i += 1;
      }
    }
      for (var r of retirado){
        if(r.cantidad > 0){
          //document.body.appendChild(r.imagen);
        resultado.innerHTML += "<br>" + r.cantidad + " billete de $" + r.valor + "<br>";
            for (var l=1; l<=r.cantidad;l++){
              resultado.appendChild(r.imagen);//de esta forma traidod e platzi
              resultado.innerHTML+= " ";
                  }
        }
      }
      resultado.innerHTML += "<br>...Fin transacción... <br><hr>";
      saldito.innerHTML = "<strong>Saldo disponible para retiro : $" + saldoCaja() + "</strong><hr>";

    }
    t.value = ""; //traido de la ayuda platzi
}

function saldoEntregado(){
  saldo = 0;
  for (var e of entregado){
    aux1 = e.valor * e.cantidad;
    saldo = saldo + aux1;
  }
  return saldo;
}

function saldoCaja(){
  saldo = 0;
  for (var c of caja){
    aux1 = c.valor * c.cantidad;
    saldo = saldo + aux1;
  }
  return saldo;
}

function mostrarSaldo(){
    saldito.innerHTML = "<strong>Saldo disponible para retiro : $" + saldoCaja() + "</strong> <hr>";
}

function historico(){
    resultado.innerHTML="";
    retiros.innerHTML = "<strong>Cantidad retirada : $" + saldoEntregado() + "</strong><hr>";
  for (var ri of entregado){
    if(ri.cantidad > 0){
      //document.body.appendChild(r.imagen);
    resultado.innerHTML += "<br>" + ri.cantidad + " billete de $" + ri.valor + "<br>";
    for (var l=1; l<=ri.cantidad;l++){
      resultado.appendChild(ri.imagen);//de esta forma traidod e platzi
      resultado.innerHTML+= " ";
          }

    }
  }
}

>

javaScript cajeroClass.js

<
class Billete{
  constructor(v, c){
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}

var aux1 = 0;
var saldo = 0;

var imagenes = [];
imagenes[100000] = "100mil.png";
imagenes[50000] = "50mil.png";
imagenes[20000] = "20mil.png";
imagenes[10000] = "10mil.png";
imagenes[5000] = "5mil.png";
imagenes[2000] = "2mil.png";
imagenes[1000] = "1mil.png";

var caja = [];
caja.push(new Billete(100000, 10));
caja.push(new Billete(50000, 10));
caja.push(new Billete(20000, 10));
caja.push(new Billete(10000, 10));
caja.push(new Billete(5000, 10));
caja.push(new Billete(2000, 10));
caja.push(new Billete(1000, 10));

var entregado = [];
entregado.push(new Billete(100000, 0));
entregado.push(new Billete(50000, 0));
entregado.push(new Billete(20000, 0));
entregado.push(new Billete(10000, 0));
entregado.push(new Billete(5000, 0));
entregado.push(new Billete(2000, 0));
entregado.push(new Billete(1000, 0));

var retirado = [];
var dinero = 0;
var div = 0;
var papeles = 0;

var saldito = document.getElementById("saldo");
var resultado = document.getElementById("resultado");
var retiros = document.getElementById("retirado");

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

var dis = document.getElementById("disponible");
dis.addEventListener("click", mostrarSaldo);

var his = document.getElementById("histori");
his.addEventListener("click", historico);

>

Debora Garrido

CSS

.caja { 
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    color: #3917b6; 
    font-size: 18px; 
    font-weight: 400; 
    text-align: center; 
    background: #050e41; 
    margin: 0 0 25px; 
    overflow: hidden; 
    padding: 20px; 
    border-radius: 35px 0px 35px 0px; 
    -moz-border-radius: 35px 0px 35px 0px; 
    -webkit-border-radius: 35px 0px 35px 0px; 
    border: 2px solid #4639b8;}```


<code>

HTML

<code>

<!DOCTYPE html>
<html>

<head>
	<title>Cajero Automatico</title>
	<link rel="stylesheet" href="cajero.css">
	<style>
		body {
			background-color: #009393;
			color: whitesmoke;
			font-family: Arial, Helvetica, sans-serif;
		}
	</style>
</head>

<div class="caja"><strong>Banco Mundial Akira</strong></div>

<p>
	<img src="cajero.gif">
</p>
<p style="text-shadow: 0.1em 0.1em 0.15em black">Este cajero tiene disponible para entregar: </p>
<p id="saldo" ></p>
<p style="text-shadow: 0.1em 0.1em 0.15em black">Ingrese el valor a retirar:</p>

<p>
	<input type="number" id="dinero" />
	<input type="button" value="Retirar" id="extraer" />
	<input type="button" value="Limpiar" id="clean" />
</p>
<p id="espacio"></p>
<p id="resultado"> </p>
<script src="cajero_automatico.js">
</script>
</body>

</html>

JS
<code>


class Billete {
	constructor(v, c) {
		this.imagen = new Image();
		this.valor = v;
		this.cantidad = c;
		this.imagen.src = imagenes[this.valor];
	}
	mostrar(){
		resultado.appendChild(this.imagen);
		
		
	}
}

var imagenes = {};
imagenes["20000"] = "20000.png";
imagenes["10000"] = "10000.png";
imagenes["5000"] = "5000.png";
imagenes["2000"] = "2000.png";
imagenes["1000"] = "1000.png";

var caja = [];

caja.push(new Billete(20000, 100));
caja.push(new Billete(10000, 100));
caja.push(new Billete(5000, 100));
caja.push(new Billete(2000, 100));
caja.push(new Billete(1000, 100));


function calcularTotal(){
	var a0 = parseInt(caja[0].valor * caja[0].cantidad);
	var a1 = parseInt(caja[1].valor * caja[1].cantidad);
	var a2 = parseInt(caja[2].valor * caja[2].cantidad);
	var a3 = parseInt(caja[3].valor * caja[3].cantidad);
	var a4 = parseInt(caja[4].valor * caja[4].cantidad);
	
	return (a0 + a1 + a2 + a3 + a4);
	
}


var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById("resultado");


var billetines = document.getElementById("extraer");
billetines.addEventListener("click", entregarDinero);

var nuevoretiroefectivo = document.getElementById("clean");
nuevoretiroefectivo.addEventListener("click", nuevoRetiro);



function entregarDinero() {
	let entregado = [];

	var t = document.getElementById("dinero");
	dinero = parseInt(t.value);

	for (var billetines of caja) {
		if (dinero > 0) {
			div = Math.floor(dinero / billetines.valor);

			if (div > billetines.cantidad) {
				papeles = billetines.cantidad;
			}
			else {
				papeles = div;
			}
			billetines.cantidad = billetines.cantidad - papeles;
			entregado.push(new Billete(billetines.valor, papeles));
			dinero = dinero - (billetines.valor * papeles);
		}
	}
	if (dinero > 0) {
		resultado.innerHTML = "Saldo insuficiente para realizar transacci&oacuten";
	}
	else {
		for (var billete_entregado of entregado) {
			if (billete_entregado.cantidad > 0) {

				var result = billete_entregado.cantidad * billete_entregado.valor;
				
				resultado.innerHTML += "<br>" + billete_entregado.cantidad + " billetes de $" + billete_entregado.valor + "<br>";
				billete_entregado.mostrar();
			}
		}
		let af = calcularTotal()
		var disponible = document.getElementById("saldo");
		disponible.innerHTML = af + "<hr>"

	}
}

function nuevoRetiro(){
	resultado.innerHTML = ""
	var t = document.getElementById("dinero");
	t.value = ""
}

David Alexander Benz Zambrano

Este proyecto si me volara la cabeza

Ivorales

class Billete {
  constructor(v, c) {
    this.valor = v;
    this.cantidad = c;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }

  mostrar() {
    // resultado.appendChild(this.imagen);
    var p = document.createElement("p");
    resultado.appendChild(p);
    p.innerHTML +=
      "<strong>" +
      this.cantidad +
      "</strong>" +
      "<strong> Billete(s) de </strong> " +
      "</br>";
    p.appendChild(this.imagen); // Se necesita crear una etiqueta <p> para que cada billete del array entregado que se está imprimiendo no quede en el aire.
  }
}

//Variables
var disponible = document.getElementById("Disponible");

var caja_texto = document.getElementById("cajaTexto");

var resultado = document.getElementById("Resultado");

var boton = document.getElementById("extraer");
boton.addEventListener("click", entregarDinero);

// Arreglos
var imagenes = [];
imagenes["50"] = "50.png";
imagenes["20"] = "20.png";
imagenes["10"] = "10.png";

var entregado = [];

var caja = [new Billete(50, 20), new Billete(20, 20), new Billete(10, 20)];

disponible.innerHTML = "Saldo disponible: $" + saldoDisponible();

function entregarDinero() {
  var monto = caja_texto.value;
  var cantidadPapeles = 0;
  var papeles = 0;

  if (monto % 10 != 0) {
    parrafo(
      "<strong>POR FAVOR INTRODUZCA UN NÚMERO QUE SEA MÚLTIPLO DE 10 EJEMPLO(10,20,30,40)</strong>" +
        "<hr>"
    );
  } else if (monto > saldoDisponible() && saldoDisponible() != 0) {
    parrafo(
      "<strong>SU CANTIDAD SUPERA EL SALDO DISPONIBLE POR FAVOR INGRESE UN MONTO IGUAL O INFERIOR A: </strong>" +
        saldoDisponible() +
        "<hr>"
    );
  } else {
    for (var b of caja) {
      if (monto > 0) {
        cantidadPapeles = Math.floor(monto / b.valor);

        if (cantidadPapeles > b.cantidad) {
          papeles = b.cantidad;
          b.cantidad -= papeles; // Restándole los billetes del array entregado[] a los billetes de mi array caja[]
        } else {
          papeles = cantidadPapeles;
          b.cantidad -= papeles;
        }

        entregado.push(new Billete(b.valor, papeles));

        monto -= b.valor * papeles;
      }
    }
    if (saldoDisponible() === 0 && monto != 0) {
      resultado.innerHTML =
        "<strong>ESTE CAJERO ACTUALMENTE NO CUENTA CON SALDO DISPONIBLE PARA SU RETIRO.</strong>";
      // Alarma que se dispara en el momento que el cajero automático queda sin dinero
    } else {
      for (var e of entregado) {
        if (e.cantidad > 0) {
          // Condición para que no se impriman todas las denominaciones...

          e.mostrar();
        }

        disponible.innerHTML = "Saldo disponible: $" + saldoDisponible();

        entregado = []; // hay que vaciar la variable, y así, evitamos que se acumulen las cifras retiradas anteriormente.
      }
      parrafo(
        "Usted ha retirado la cantidad de: $" + caja_texto.value + "<hr>"
      );
    }
  }
}

function saldoDisponible() {
  var total = 0;

  for (var c of caja) {
    total += c.valor * c.cantidad;
  }
  return total;
}

function parrafo(texto) {
  var p = document.createElement("p");
  resultado.appendChild(p);
  p.innerHTML = texto;
}

Jose Ramon Moreno Sanchez

Para el primer desafio:

//clave, valor para las imagenes 
var imgBillete = {
    1: "dineroMonopoly/one-dollar.PNG",
    5: "dineroMonopoly/five-dollar.PNG",
    10: "dineroMonopoly/ten-dollar.PNG",
    20: "dineroMonopoly/twenty-dollar.PNG",
    50: "dineroMonopoly/fifty-dollar.PNG",
    100: "dineroMonopoly/one-hundred-dollar.PNG",
    500: "dineroMonopoly/five-hundred-dollar.PNG"
};

caja.push( new Billete(500, 10) );
caja.push( new Billete(100, 10) );
caja.push( new Billete(50, 10) );
caja.push( new Billete(20, 10) );
caja.push( new Billete(10, 10) );
caja.push( new Billete(5, 30) );
caja.push( new Billete(1, 10) );

Se manda a llamar el metodo

if( dinero > 0 ){
    resultado.innerHTML = "Saldo insuficiente en cajero";
  }
  else{
    for( var e of entregado ){
      if( e.cantidad > 0 ){
        e.mostrarEfectivo();
        console.log(e.valor + " , " + imgBillete[e.valor]);
      }
    }
  }

Se muestran los billetes

class Billete {
  constructor(v, c) {
    this.valor = v;
    this.cantidad= c;
    //ruta que se usara en la propiedad src de la etiqueta img
    this.urlImagen = imgBillete[this.valor];
  }

  mostrarEfectivo(){
    resultado.innerHTML += "<br/>" + this.cantidad + " billetes de $ " + this.valor + "<img width='200px' height='100px' src=" + "'"+this.urlImagen+"'" +"/>" + "<br/>";
  }
//se usa "'" para poder concatenar la url de imagen y se pueda mostrar, esto me dio problemas
}

Ejemplo:

Eira Yanai García Mata

Hola a todos, les quiero compartir lo que he avanzado:

Muestra el monto actual en cajero.
Muestra lista de operaciones realizadas incluyendo las no exitosas.
Muestra tantas imágenes como billetes entregados, no sé si lo hice bien pero fue como funcionó.
A cada operación va restando dinero del caja hasta quedarse en 0.

Con lo que no estoy muy feliz es con las líneas de código, espero seguir aprendiendo.

![](

class Billete
{
  constructor(valor,cantidad)
  {
    this.valor = valor;
    this.cantidad = cantidad;
  }

  mostrarImagen(){
    var replicaImagen = new Image();
    replicaImagen.src = imagenes[this.valor];
    return replicaImagen;
  }

  mostrarValor(){
    return this.cantidad + " billetes de $" + this.valor
  }
}

var imagenes = [];
imagenes["100"] =  "b100.jpg";
imagenes["50"] = "b50.jpg";
imagenes["20"] = "b20.jpg";
imagenes["10"] = "b10.jpg";
imagenes["5"] = "b5.jpg";

var caja = [];
caja.push( new Billete(100,5) );
caja.push( new Billete(50,30) );
caja.push( new Billete(20,20) );
caja.push( new Billete(10,20) );
caja.push( new Billete(5,5) );

document.getElementById("extraer").addEventListener("click",solicitarDinero);
var montoCaja = document.getElementById("montoCaja");
mostrarMontoCaja();
var resultado = document.getElementById("resultado");
var operacionesRealizadas = document.getElementById("operaciones");
var operaciones = [];


function solicitarDinero()
{
  var dineroSolicitado = parseInt(document.getElementById("dinero").value);
  operaciones.push(calcularBilletes(dineroSolicitado));
  mostrarBilletes(operaciones[operaciones.length - 1]);
  actualizarMontoCaja(operaciones[operaciones.length - 1]);
  mostrarOperaciones();
}

function calcularBilletes(dinero)
{
  var entregado = [];
  var papeles = 0;

  for (b of caja)
  {
    if(dinero > 0)
    {
      papeles = Math.min( Math.floor(dinero/b.valor), b.cantidad);
      if(papeles > 0)
      {
        entregado.push(new Billete(b.valor,papeles));
        dinero -= b.valor * papeles;
      }
    }
  }

  if ( dinero <= 0 )
  {
    return entregado;
  }
  else
  {
      return 0;
  }
}

function mostrarBilletes(entregado)
{
  resultado.innerHTML = "";
  if(!Array.isArray(entregado))
  {
    resultado.innerHTML = "<h3> Lo sentimos no es posible entregarte la cantidad solicitada. </h3>";
  }
  else
  {
    resultado.innerHTML += "<strong> Tu dinero: </strong><br/>";
    for(e of entregado)
    {
      resultado.innerHTML += "<br />" + e.mostrarValor() + "<br />";
      for(var i=0; i < e.cantidad; i++)
      {
        resultado.appendChild( e.mostrarImagen() );
      }
    }
  }
}

function calcularMonto(billetes)
{
  var monto = 0;
  for(i of billetes)
  {
    monto += i.valor * i.cantidad
  }
  return monto;
}

function mostrarOperaciones()
{
  operacionesRealizadas.innerHTML = "<hr/>";
  for(var i = 0; i < operaciones.length; i++)
  {
    operacionesRealizadas.innerHTML += "<br /> <li> <strong> Operación " + (i + 1) + ": <strong> </li>";
    if(Array.isArray(operaciones[i]))
    {
      operacionesRealizadas.innerHTML += "<strong> Monto: $" + calcularMonto(operaciones[i]) + "</strong> <br/>";
      for(b of operaciones[i])
      {
        operacionesRealizadas.innerHTML += b.mostrarValor() + "<br />";
      }
    }
    else
    {
        operacionesRealizadas.innerHTML += "Operación no exitosa <br />";
    }
  }
}

function actualizarMontoCaja(entregado) {
  if(Array.isArray(entregado))
  {
    for(b of entregado)
    {
      var c = caja.find(element => element.valor == b.valor);
      c.cantidad -= b.cantidad
    }
    montoCaja.innerHTML = "<h2> Actualmente el cajero tiene: " + calcularMonto(caja) + "</h2>";
  }
}

Luis Fernando Cruz

Ferd Condas

Aquí les dejo mi cajero
https://fer80.github.io/Cajero/
Captura de Pantalla 2021-01-10 a la(s) 8.08.47 a. m..png

Brian Ángel Gabriel García Cesín

Me encantó este curso, quise darle un diseño un poco más bonito a mi cajero. Amé el curso en serio, casi lloré de emoción cuando mi servidor corrió
Imagen 1.png
Imagen 2.png
Imagen 3.png

Cristian Andres Ladino Peña

Código de .js

// clase billete, actor principal del código.
class Billete
{
  constructor (img, v, c)
  {
    this.imagen = new Image ();
    this.imgBillete = img;
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = rutaimg[this.imgBillete];
  }
}

// img src
var rutaimg = [];
rutaimg["cienmil"] = "billetes/cienmil.png";
rutaimg["cincuentamil"] = "billetes/cincuentamil.jpg";
rutaimg["veintemil"] = "billetes/veintemil.jpg";
rutaimg["diezmil"] = "billetes/diezmil.jpg";
rutaimg["cincomil"] = "billetes/cincomil.jpg";
rutaimg["dosmil"] = "billetes/dosmil.png";
rutaimg["mil"] = "billetes/mil.jpg";


// billetes de caja y entregados
var caja = [];
var entregado = [];
caja.push( new Billete("cienmil", 100000, 10) );
caja.push( new Billete("cincuentamil", 50000, 15) );
caja.push( new Billete("veintemil", 20000, 20) );
caja.push( new Billete("diezmil", 10000, 15) );
caja.push( new Billete("cincomil", 5000, 5) );
caja.push( new Billete("dosmil", 2000, 5) );
caja.push( new Billete("mil", 1000, 5) );


//variables
var saldoBilletes = document.getElementById("saldoBilletes");
var saldoPesos = document.getElementById("saldoPesos");
var saldoDisponible = document.getElementById("saldoBilletes");
var reiniciar = document.getElementById("reiniciar");
var resultado = document.getElementById("resultado");
var finalizado = document.getElementById("finalizado");
var enter = document.addEventListener("keydown", entregarBilletes2);
var t = document.getElementById("dinero");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarBilletes);
var dinero;
var div = 0;
var papeles = 0;

// Extraer billetes con la tecla Enter
function entregarBilletes2(evento)
{
  if (evento.keyCode == 13)
  {
    entregarBilletes();
  }
}

// Saldo de billetes
mostrarSaldoBilletes();  //Muestra el saldo inicial de billetes

function mostrarSaldoBilletes()
{
  saldoBilletes.innerHTML = "";  //Elimina el saldo anterior y deja el espacio vacio para la función
  for (var bill of caja)
  {
    if(bill.cantidad > 1)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else if (bill.cantidad == 0)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else
    {
      saldoBilletes.innerHTML += bill.cantidad + " billete de " + bill.valor + "<br />";
    }
  }
}

// Función con algoritmo del cajero
function entregarBilletes()
{
  entregado = [];  //Limpia los datos de entregado para que la funcion calcular billetes y saldo funcione
  dinero = parseInt(t.value);
  finalizado.innerHTML = "Usted ha recibido:";
  for (var bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);
      if (div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(bi.imgBillete, bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad = bi.cantidad - papeles;
    }

  }
  if (dinero > 0)
    {
      resultado.innerHTML = "";
      finalizado.innerHTML = "";
      document.getElementById("sinDinero");
      sinDinero.innerHTML = "No tengo los billetes para darte el dinero que necesitas..";
    }
  else
  {
    for (var e of entregado)
    {
      sinDinero.innerHTML = "";
      if (e.cantidad >  1 )
      {
        resultado.innerHTML += e.cantidad + " billetes de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }
      else if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " billete de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }  // &nbsp; para añadir espacios adicionales ya que html detecta solo el primer espacio
    }
  }
        mostrarSaldoBilletes();
        var totalPesosFinal = calcularSaldoPesos();
        saldoPesos.innerHTML = "Saldo total COP: " + totalPesosFinal;
}


// Función para refrescar el document con el boton "otra vez"
reiniciar.addEventListener("click", reiniciarCajero);

function reiniciarCajero()
{
  document.location.reload();
}

//  Calculo inicial del saldo en pantalla
var totalPesos = calcularSaldoPesos();
saldoPesos.innerHTML = "Saldo total COP: " + totalPesos;

// Función para calcular saldo en pantalla
function calcularSaldoPesos()
{
  var y = 0;
  for (var bill of caja)
  {
    y = (bill.cantidad * bill.valor) + y;
  }
  return y;
}```


html

Pablo Gabriel Mederos Caballero

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero automático</title>
  </head>
  <body>
    <p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer" />
    </p>
    <p id="resultado"></p>
    <script  charset="utf-8">
    class Billete{
      constructor(v,c, recurso){
        this.valor = v;
        this.cantidad = c;
        this.imgBillete = new Image();
        this.imgBillete.src = recurso;
        this.imgBillete.width = 100;
        this.imgBillete.height = 60;
      }
    }

    function entregarDinero(){
      posicion=0;
        entregado.length=0;
      resultado.innerHTML = "";
      var t = document.getElementById("dinero");
      dinero=parseInt(t.value);

      for (var bi of caja) {
        if(dinero>0){
          div=Math.floor(dinero / bi.valor);
          if (div>bi.cantidad) {
            papeles=bi.cantidad;
          } else {
            papeles = div;
          }

          entregado.push(new Billete(bi.valor,papeles));
          devolucionACaja[posicion]=new Billete (bi.valor,bi.cantidad);
          dinero = dinero - (papeles*bi.valor);
          bi.cantidad -= entregado[posicion].cantidad;
          posicion ++;
        }
      }
      if (dinero>0) {
        if (caja[2].cantidad == 0) {
          resultado.innerHTML = "Quizá no quede dinero en este cajero.<br />  Intenta con una suma menor!";
          caja[0].cantidad = devolucionACaja[0].cantidad;
          caja[1].cantidad = devolucionACaja[1].cantidad;
          caja[2].cantidad = devolucionACaja[2].cantidad;
        }else {
          console.log(dinero);
          resultado.innerHTML = "Solo puedo darte múltiplos de $10";
          posicion=0;
        }
      } else {
      for ( var e of entregado){
        posicion = 0;
        if (e.cantidad>0) {

        resultado.innerHTML = resultado.innerHTML + "Has retirado " + +e.cantidad + " Billetes de $" + e.valor + " ";
        resultado.appendChild(caja[posicion].imgBillete);
        resultado.innerHTML += "<br />";
        posicion ++;
            }
      }
      resultado.innerHTML += "<hr />";
      posicion = 0;
    for (var i of caja) {
      if (i.cantidad > 0) {
          resultado.innerHTML += "Quedan " + i.cantidad + " billetes de " + i.valor + " ";
          resultado.appendChild(caja[posicion].imgBillete);
          resultado.innerHTML += "<br />";
          posicion ++;
      }
      if (caja[2].cantidad == 0) {
        resultado.innerHTML += "<br />Ya no queda dinero!!!"
      }
    }
      }

    }

    var caja = [];
    var devolucionACaja = [];
    var entregado = [];
    var posicion = 0;

    caja.push(new Billete(50,10,"http://cloud10.todocoleccion.online/billetes-extranjeros/tc/2012/05/27/31924929.jpg"));
    caja.push(new Billete(20,30,"http://s03.s3c.es/imag/_v0/600x253/e/2/9/dolares-20.jpg"));
    caja.push(new Billete(10,10, "https://http2.mlstatic.com/antiguo-billete-sello-verde-de-10-dolares-usa-1934-D_NQ_NP_21499-MLA20210481234_122014-F.jpg"));

    var dinero;
    var div = 0;
    var papeles = 0;

    var resultado = document.getElementById("resultado");
    var b = document.getElementById("extraer");
    b.addEventListener("click", entregarDinero);
</script>
  </body>
</html>

clauguzman

//código para crear la clase de los billetes y luego crearlos.
class billete
{
constructor (n,v,c)
{
this.nombre=n;
this.valor=v;
this.cantidad=c;
}
}

function calcular()
{
var valor= cajatexto.value;
var bolsa_banco=0;
var billetes_entregados= [];

// codigo para crear los billetes
var caja= [];
caja.push(new billete(“Cincuenta”,50000,1));
caja.push(new billete(“Veinte”, 20000,4));
caja.push(new billete(“Diez”, 10000,2));

// codigo para calcular cuanto hay en el banco.
for (i in caja)
{
bolsa_banco= bolsa_banco + (caja[i].valor * caja[i].cantidad);
}
console.log(bolsa_banco);

}
else
{
billetes_entregados[j]= caja[j].cantidad;
valor = valor - (billetes_entregados[j]* caja[j].valor);
}
mensaje.innerHTML = mensaje.innerHTML+ "Billetes de <strong>" + caja[j].nombre + " Mil entregados: " + billetes_entregados[j] + "</strong></br>";
}

mensaje.innerHTML= mensaje.innerHTML+ "Monto total etregado:  <strong>" + cajatexto.value + "</strong></br>";

}
else
{
mensaje.innerHTML=mensaje.innerHTML+“el monto NO es válido”;
}

}

Pablo Juarez Castillo

var imagenes = [];
imagenes[“100”] = “billete100.jpg”;
imagenes[“50”] = “billete50.jpg”;
imagenes[“20”] = “billete20.jpg”;
imagenes[“10”] = “billete10.jpg”;

class Billete
{
constructor(v, c)
{
this.valor = v;
this.cantidad = c;
this.imagen = new Image();
this.imagen.src = imagenes[this.valor];
}
}

var caja = [];
caja.push( new Billete(100, 20) );
caja.push( new Billete(50, 30) );
caja.push( new Billete(20, 20) );
caja.push( new Billete(10, 20) );

contar();

var div = 0;
var papeles = 0;

var resultado = document.getElementById(“resultado”);
var b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

}
else
{
	resultado.innerHTML += "Lo siento no contamos con ese saldo <hr />";
}

}

function contar()
{
total = 0
for (var tot of caja)
{
total = total + tot.valor * tot.cantidad;
}
console.log(total);
}

EmpiricalCoder

Hice mi tarea y me tomé la libertad de implementarle algunas modificaciones y de añadirle algunas cosas que detallo a continuación:

1. Separé la clase billetes en un archivo aparte llamado billetes.js.

2. Creé la función recargarAtm para darle la oportunidad al usuario de cargar el ATM con el tipo y cantidad de billetes que ellos deseen.

3. Quite el input tipo text y cree en su lugar dos botones con las opciones de Extraer Dinero y Recargar ATM, los montos se piden a través de un Prompt

Dejo a continuación una imagen de como se ve y el código de los respectivos archivos:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Cajero Automatico</title>
</head>

<body>
    <p>
        <img src="cajero.gif" alt="atm">
    </p>
    <h3>¿Que tipo de operacion deseas hacer?</h3>
    <p>
        <input type="button" value="Extraer Dinero" id="extraer">
        <input type="button" value="Recargar ATM" id="recargar">
    </p>
    <p id="resultado"></p>
    <script src="billetes.js"></script>
    <script src="cajero.js"></script>
</body>
</html>```

**BILLETES.js**

class billetes
{
constructor(valor, cantidad)
{
this.valor = valor;
this.cantidad = cantidad;
}
}

**CAJERO.js**

//Declaracion de Funciones

function entregarDinero()
{
mostrar.innerHTML = “”;
dinero = parseInt(prompt(“Cuanto dinero deseas retirar”));

for(var bi of caja)
{
   if (dinero > 0)
   {
       div = Math.floor(dinero / bi.valor);
       if (div > bi.cantidad)
        {
            papeles = bi.cantidad;
        }
       else
        {
            papeles = div;
        }
       
       entregado.push( new billetes(bi.valor, papeles) );
       dinero = dinero - (bi.valor * papeles);
   }
}

if (dinero > 0)
{
    mostrar.innerHTML = "El monto solicitado no puede ser despachado :(";
}
else
{
    for (var e of entregado)
    {
        if(e.cantidad != 0)
        {
            mostrar.innerHTML += "Entregado: " + e.cantidad + " billete(s) de $" + e.valor + "<br>";
        }
    }
}

}

//Inicio del programa
extraer.addEventListener(“click”, entregarDinero);
recargar.addEventListener(“click”, recargarAtm);

Los invito a que lo prueben y se diviertan!

jonathan sanchez

q aprendimos:

como llevar un diagrama de flujo a codigo de programacion.
lo ideal es usar innerHTML y no document.write().
hemos aprendido un nuevo operador += indica que la variable es igual a su valor mas lo que hay despues del operador.

Pablo André Vásquez Romualdo

Aqui dejo mi aporte
HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ATM PLATZI</title>
    <style media="screen">
      .bill{
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div class="ATM">
      <img src="cajero.png" alt="" /><br>
      <input type="number" id="Salida" placeholder="0.00" value="55"><br>

      <input type="button" id="request" value="Confirmar"><br>
    </div>
    <div id="Entrega">
      <img src="B1.png" alt="" /><br
    </div>

  </body>
  <script type="text/javascript" src="ATM.js">

  </script>
</html>

// DECLARACION DE VARIABLES NORMALES
var dineroMaximo = 0;
var boton = document.getElementById('request');
boton.addEventListener('click',comenzar);

// CREACION DE OBJETO BILLETE
function Billete (valor = 0,cantidad = 1, path){
    // valor que actua como valor y como ID
    this.valor = valor;
    // cantidad para contabilizar
    this.cantidad = cantidad;
    // nombre de la img vinculada al billete
    this.img = path;
}
// DECLARACION DE CAJA
var Caja = [];
Caja.push(new Billete(100,5,"B100.png"));
Caja.push(new Billete(50,10,"B50.png"));
Caja.push(new Billete(20,20,"B20.png"));
Caja.push(new Billete(10,30,"B10.png"));
Caja.push(new Billete(5,50,"B5.png"));
Caja.push(new Billete(1,100,"B1.png"));
// CONTABILIZAR DINERO EN CAJA
for(billete of Caja){
  console.log(billete);
  dineroMaximo+= billete.cantidad * billete.valor;
}
function actualizarCaja(retiro) {
  // ciclo por cada billete distinto en retiro
  for (bill of retiro){
    // resta la cantidad de billetes que tengo que retirar del cajero
    Caja.find(x => x.valor === bill.valor).cantidad -= bill.cantidad;
    console.log(Caja.find(x => x.valor === bill.valor));
  }
  for(billete of Caja){
    // suma el valor de los billetes por la cantidad para guardar cuando dinero hay
    dineroMaximo+= billete.cantidad * billete.valor;
  }
}
console.log(dineroMaximo);
// FUNCION DE ACCION
function comenzar() {
  // DECLARACION DE IFORMACION DEL USUARIO
  var error ="";
  var dineroAccion = document.getElementById('Salida').value;
  var Retiro = [];
  var billete_temp = new Billete(1,0,"B1.png");
  var dinero_acumulado = dineroAccion;
  dineroAccion = parseInt(dineroAccion);
  // SI TENEMOS SUFICIENTE DINERO
  if(dineroAccion <= dineroMaximo){
      // Incia el ciclo de comprobación
      for(billete_caja of Caja){
        // Igualo un billete temporar al de la caja
        billete_temp.valor = billete_caja.valor;
        billete_temp.img = billete_caja.img;
        console.log(billete_temp.img);
        // si ya tengo el dinero salgo del ciclo
        if(dinero_acumulado ==0){
          break;
        }
        // si el dinero de la accion - el dinero acumulado es mayor o igual al del billete
        if(dinero_acumulado >= billete_temp.valor){
          // iguala la cantidad a un numero entero y define cuantos hay que dar
          billete_temp.cantidad = Math.floor(dinero_acumulado / billete_caja.valor);
          // si la cantidad es mayor a la que tiene el cajero lo pone al maximo
          if(billete_temp.cantidad > billete_caja.cantidad){
            billete_temp.cantidad = billete_caja.cantidad;
          }
          // resta la cantidad de los billetes que ya estan subidos para entregar
          dinero_acumulado -= billete_temp.cantidad * billete_temp.valor;
          // guarda el objeto del billete con el valor y la cantidad, Si la cantidad es mayor a 0
          if(billete_temp.cantidad> 0)
          Retiro.push(new Billete(billete_temp.valor, billete_temp.cantidad,billete_temp.img));
        }

      }
      if(dinero_acumulado >0){
        error += "No fue posible retirar la cantidad requerida <br>";
      }else {
        // Actualiza la cantidad que el cajero tiene.
        actualizarCaja(Retiro);
        // se muestra un resultado fanci de la cantidad de dinero entregada.
        say = "<strong>Se te ha Entregado: </strong><br/>";
        for(bill of Retiro){
          // acumula la cantidad de billetes que se han dado.
          say += "<img src='"+ bill.img + "' class='bill'/>" + "x" + bill.cantidad +"<br/>";

      }

      }
      document.getElementById('Entrega').innerHTML = say;
  }else{
    // en caso de no tener suficiente dinero en el cajero
    error +="El Cajero no dispone de suficiente dinero<br>";
  }
  if(error != "")
  document.getElementById('Entrega').innerHTML = error;
}

Sergio Angel Noriega Cantillo

ingeniero hack voy a ahcer el curso desde el principio esta fuerte esos codigos

laura

Que dificil ! 😦

robertocorreareyes

Anexo codigo…

/* RCR Febrero 2019*/

var imagenes = [];
imagenes["1"] = "uno.jpg";
imagenes["2"] = "dos.jpg";
imagenes["5"] = "cinco.jpg";
imagenes["10"] = "diez.jpg";
imagenes["20"] = "veinte.jpg";
imagenes["50"] = "cincuenta.jpg";
imagenes["100"] = "cien.jpg";

/* Definir el valor de los billetes y la cantidad
   de billetes */
class Billete {
  constructor(valor, cantidad) {
    this.valor = valor;
    this.cantidad = cantidad;
    this.imagen = new Image();

    this.imagen.src = imagenes[this.valor];
  }
}

function entregarDinero() {

  var di = document.getElementById('txtDinero');
  dinero = parseInt(di.value);

  // Se inicializa el arreglo para
  // para mostrar solo lo procesado la última vez
  entregado = [];

  for (var bi of caja )
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero/bi.valor);
      if (div > bi.cantidad)
        papeles = bi.cantidad;
      else
        papeles = div;

      entregado.push( new Billete(bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
    }
      //console.log(div);
  }

  if (dinero > 0 )
    lblres.innerHTML = 'Soy un cajero pobre y no tengo dinero suficiente para tu solicitud';
    //console.log('Soy un cajero pobre y no tengo dinero suficiente para tu solicitud');
  else {
        lblres.innerHTML = '';
        for(var e of entregado)
        {
          if(e.cantidad > 0)
          {
            //lblres.innerHTML += e.cantidad + " billetes de $" + e.valor + " &nbsp; = " + (e.cantidad * e.valor) + "&nbsp;<img src=" + e.imagen.src + " />" + "<hr />";
            lblres.innerHTML += e.cantidad + " billetes de " + "&nbsp;<img src=" + e.imagen.src + " />" + " &nbsp; = " + (e.cantidad * e.valor) + "<hr />";
          }
        }
  }

  console.log(entregado);
  console.log(dinero);
  //console.log(bi);
}

/* Cuantos billetes y de que denominación */
var caja = [];
/* Cuantos billetes y de que denominación
   se van a entregar */
var entregado = [];

/* Se rellena la caja(cajero) de billetes */
caja.push( new Billete(100,10) );
caja.push( new Billete(50,10) );
caja.push( new Billete(20,30) );
caja.push( new Billete(10,10) );
caja.push( new Billete(5,10) );
caja.push( new Billete(2,10) );
caja.push( new Billete(1,10) );

var dinero = 0;
var div = 0;
var papeles = 0;

var lblres = document.getElementById('lblResultado');
var btn = document.getElementById('btnExtraer');
btn.addEventListener('click', entregarDinero);

sebastian_jose

Valentina Bacherer

No esta muy glamoroso pero funciona!

var imagenes = []
{
  imagenes['b10'] = 'billete10.png' 
  imagenes['b20'] = 'billete20.png' 
  imagenes['b50'] = 'billete50.png' 
  imagenes['b100'] = 'billete100.png' 
}

class Billete
{
  constructor(v,c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.nombre = 'b' + this.valor;
    this.imagen.src = imagenes[this.nombre];
  }
}

function entregarDinero()
{
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  
  for(var bi of caja)
  {
    if (dinero > 0)  //sigue saldo por entregar
    {
      div = Math.floor(dinero / bi.valor );

      if (div > bi.cantidad)// se necesitan + bill de lo que hay
      {
        papeles = bi.cantidad; //asigna cantidad maxima posible
      }
      else
      {
        papeles = div; // asigna cantidad justa necesaria
      }
      entregado.push( new Billete(bi.valor, papeles)); //anota billetes a entregar
      dinero -=  (bi.valor * papeles); //disminuye saldo
      
    }

  }
  if (dinero > 0)
  {
    resultado.innerHTML = "Cajero malo muy pobre";
  }
  else
  {

    for (e of entregado)
    {
      if (e.cantidad > 0) //solo cuando se deben entregar esos billetes
      {
        resultado.innerHTML +=  '<img src=' + e.imagen.src + " /> <br />" + e.cantidad + " billetes de $" + e.valor + "<br />";
      }
    }
  }

}

var caja = [];
var entregado = [];
caja.push (new Billete(100,2));
caja.push (new Billete(50,20));
caja.push (new Billete(20,30));
caja.push (new Billete(10,10));
//caja.push (new Billete(5,5));
var resultado = document.getElementById("resultado");
var dinero;
var div= 0;
var papeles = 0;

var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);

Adrian Nieves Uribe

![](

Página principal, el cajero puede entregar monedas de 10 como cantidad mínima en cambio, pero genero una condición en la que el monto mínimo a solicitar es de 20, para no entregar solo una moneda de 10 … XD.
Cantidad de dinero disponible en el cajero, este es obtenido por una función que es llamada con el evento “load”, así sin importar cuantos objetos de billetes agregué, la app hace el conteo al cargar y comienza el registro de cambios.
Si no se ingresa cantidad en el “input”, se lanza el mensaje del dato necesario.
Una vez ingresado el monto de la transacción solicitada, esta se agrega como dato para mostrar el historial de los movimientos al usuario y realizar la resta de lo entregado al total disponible del cajero.
Se agrega el monto entregado.
Se agrega la lista de dinero entregado, junto a la cantidad y sus imágenes
En caso de ingresar una cantidad no correspondiente a lo que se puede entregar, ejemplo decenas “10-minimo” base al monto solicitado se redondea la cantidad solicitada a un número entero, para poder realizar la entrega, así cuido dos cosas, una, no desacompletar la cantidad disponible en unidades que no sean de mínimo 10 y dos, seguir con la transacción sin desesperar al usuario en caso de que escriba un “1” por error, estos sobrantes no reflejan descuento a la cuenta del usuario, ni a las resta en lo disponible en el cajero.
Al entregarse moneda(s) se especifica el término “Billete” por “moneda”, con una condicional.
Si la cantidad solicitada supera lo disponible en el cajero, se entrega todo el dinero disponible, mencionando al usuario del sobrante que no se pudo entregar y a su vez desactivando el “botón” para no permitir mas transacciones.

class Billetes{
 constructor(v,c,m){
    this.valor=v;
    this.cantidad=c;
    this.monto=m;
    this.imagen=new Image();
    this.imagen.src=imagenes[this.monto];
 }   
}

var imagenes=[];//Array asociativo, contiene las imagenes de los billetes.
imagenes["200"]="./img/two-hundred-one.png";
imagenes["100"]="./img/one-hundred-one.png";
imagenes["50"]="./img/fifty-one.png";
imagenes["20"]="./img/twenty-one.png";
imagenes["10"]="./img/money-one.png";

//Detecta cambios en el monto dentro del "input", para aplicar cambios en casa transacción cada que se llama a esta función.
function monto(){
    var dinero=trans.value;
    return dinero;
}
//Ejecuta y valida la transacción del ATM.
function transaction(){
    var cantidad=monto();
    var cantidadEntregada=cantidad;
    if(monto()>=20){
        document.getElementById("info").innerHTML="<h3>$ "+monto()+"</h3>";
        trans.value="";
        total-=cantidad;
        for(var bi of caja){
            div=Math.floor(cantidad/bi.valor);
            if(div>bi.cantidad){
                papeles=bi.cantidad;
            }else{
                papeles=div;
            }
            if(papeles>0){
                entrega.push(new Billetes(bi.valor,papeles,bi.monto));
                if(bi.valor!=10){
                    document.getElementById("moneyDelivered").innerHTML+="<img src='"+bi.imagen.src+"' class='img-billetes'/> Se entrego(n) <strong> "+papeles+"</strong> Billete(s) de <strong>$: "+bi.valor+" </strong><br/>"; 
                }else{
                    document.getElementById("moneyDelivered").innerHTML+="<img src='"+bi.imagen.src+"' class='img-moneda'/> Se entrego(n) <strong> "+papeles+"</strong> Moneda(s) de <strong>$: "+bi.valor+" </strong><br/>"; 
                }
            }
            cantidad=cantidad-(bi.valor*papeles);
        }
        if(cantidad!=0){
            total+=cantidad; 
            document.getElementById("rest").innerHTML="<strong>NOTA:</strong> Quedo una cantidad sobrante de <strong>$ "+cantidad+"</strong> en tu transacción solicitada que no se pudo entregar por falta de denominación en valor, <strong>este sobrante no refleja cobro en tu cuenta.</strong>";
        }
        document.getElementById("moneyAtm").innerHTML="Disponible en Cajero: "+total;
        document.getElementById("transaction").innerHTML="Monto entregado: <br/><strong style='font-size:3rem'>$ "+(cantidadEntregada-cantidad)+"</strong>";
    }else if(monto()<=0){
        document.getElementById("info").innerHTML="<small style='color:#e9967a; font-size:1rem; font-weight:normal;'>No has escrito un monto aceptado para la transición.</small>";
        trans.value="";
        trans.focus();
    }
    if(total==0){
        b.disabled=true;
        document.getElementById("moneyAtm").innerHTML="<small style='color:#fa8282; font-size:.9rem;'>El cajero se a quedado sin fondos para realizar mas transacciones :( </small>";
    }
}

var trans=document.getElementById("dinero");
var b=document.getElementById("extraer-dinero");
b.addEventListener("click",/*entregarDinero*/transaction);

//Inserta el valor disponible de dinero en el ATM al cargar la página.
window.addEventListener("load",function(){
    document.getElementById("moneyAtm").innerHTML+="<br/> $ "+conteo();
});
//Devuelve el valor total del dinero con el que arranca el ATM.
function conteo(){
    total=0;
    for(var bi of caja){
        var conteo=bi.valor*bi.cantidad;
        total+=conteo;
    }
    return total;
}

var total=0;
var div=0;
var papeles=0;

var caja=[];//Array de objetos, contenedores del valor y la cantidas de dinero.
caja.push(new Billetes(200,10,"200"));
caja.push(new Billetes(100,5,"100"));
caja.push(new Billetes(50,6,"50"));
caja.push(new Billetes(20,8,"20"));
caja.push(new Billetes(10,4,"10"));

var entrega=[];//Array de objetos, contiene el valor y cantidad dei monto a entregar.
// caja.push(new Billetes(10,5));```

gjfranco

De momento solo pude completar el colocar las imagenes, un dolor de cabeza como concatenar la imagen pero al final era bastante simple dejo mi ejemplo y una imagen, con los billetes peruanos

class Billete
{
  constructor(v,c)
  {
    this.imagen= new Image();
    this.valor= v;
    this.cantidad = c;

    this.imagen.src=imagenes[this.valor];
  }
}


function entregarDinero()
{
  t = document.getElementById("dinero");
  dinero= parseInt(t.value);
  for(var bi of caja)
  {
    if(dinero > 0)
    {
      div=Math.floor(dinero/bi.valor);
      if (div>bi.cantidad)
      {
        papeles= bi.cantidad;
      }
      else
      {
          papeles = div;
      }
      entregado.push(new Billete(bi.valor,papeles));
      dinero = dinero - (bi.valor*papeles);
    }
  }
  if(dinero > 0)
  {
    resultado.innerHTML = "No tendo la cantidad necesaria :(";
  }
  else
  {
    for (var e of entregado)
    {
      if (e.cantidad > 0)
      {
         resultado.innerHTML += e.cantidad + " billetes de $" + "<img src=" + e.imagen.src + " /> <br />";
      }
    }
  }

}


var caja=[];
var entregado= [];
var imagenes = [];
imagenes["10"] = "10.png";
imagenes["20"] = "20.png";
imagenes["50"] = "50.png";
imagenes["100"] = "100.png";
imagenes["200"] = "200.png";

caja.push(new Billete(200,5));
caja.push(new Billete(100,10));
caja.push(new Billete(50,20));
caja.push(new Billete(20,20));
caja.push(new Billete(10,5));
var dinero = 0;
var div= 0;
var papeles=0;
var resultado= document.getElementById("resultado");
var b= document.getElementById("retirar");
b.addEventListener("click", entregarDinero);

![](

Ervic

AlejandroCordoba

Esta es mi resultado pueden verlo en Github Repositorio LiveDemo

class Billete
{
    constructor(v, c, i)
    {
        this.valor = v;
        this.cantidad = c;
        this.img = i;
    }
}

var caja = []; // Billetes que tiene el cajero array Class Billete
var entregado = []; // Billetes que entrego al cliente
var Salieron = 0; // cuanto dinero he sacado en cada retiro
var Totalcaja = 0; // cuanto dinero tengo en total en caja
var dinero = 0; //dinero es la cantidad de dinero que quiere retirar el cliente
var Papeles = 0; // cantidad de billetes a entregar
var resultado = document.getElementById("resultado"); // llamar el div con class resultado del HTML
var RBillete = document.getElementById("R-billete"); // llamar el div con ID R-billete del HTML
var BotonExtraer = document.getElementById("extraer"); // llamar el boton con ID extraer del HTML
BotonExtraer.addEventListener("click", EntregarDinero); // Al presionar el boton de ID extraer del HTML
var sale = document.getElementById("sale"); // llamar el h5 con ID sale del HTML
var encaja = document.getElementById("encaja"); // llamar el h5 con ID encaja del HTML

//Vamos a contar cuanto dinero tenemos disponible en caja al cargar la pagina
$( document ).ready(function() 
{ totalencaja(); 
    console.log("Buscame en Github ACordobaDev")
});

// Empujar nuevos billetes a la class Billete  de la linea 1
caja.push( new Billete (50, 15, "img/50.png" ) ); // 50 = valor, 3 = Cantidad , imagen
caja.push( new Billete (20, 9, "img/20.png" ) ); // 20 = valor, 2 = Cantidad , imagen
caja.push( new Billete (10, 20, "img/10.png" ) ); // 10 = valor, 2 = Cantidad , imagen

// Algoritmo para sacar el dinero
function EntregarDinero ()
{   
    entregado.length = 0 ; // limpiar el array de billetes a entregar
    var t =document.getElementById("dinero"); // llamar el input con ID dinero  
    dinero = parseInt( t.value); // dinero es igual al valor entero del input con ID dinero

    resultado.innerHTML = "";
    RBillete.innerHTML = "";

    if (Totalcaja >= dinero)
    {
        Salieron += dinero ;
        for ( var bi of caja)
        {
            Division = Math.floor(dinero / bi.valor);
            if (Division > bi.cantidad)
            {
                Papeles = bi.cantidad;
            }
            else
            {
                Papeles = Division;
            }
            dinero = dinero - (bi.valor * Papeles);
            bi.cantidad -= Papeles;
            entregado.push( new Billete(bi.valor, Papeles, bi.img));

        }
         for( var e of entregado)
         {
            if (e.cantidad > 0)  // si la cantidad de billetes a entregar es mayor de 0
            {
                resultado.innerHTML += '<p>' + e.cantidad + " Billetes de $" + e.valor +"  <p/>" ; // imprimo la cantidad y el valor del billete
                RBillete.innerHTML +=  '<img src="'+e.img+'" width="100" class="img-fluid" />' ; // imprimo la imagen del billete
            }
         }

         sale.innerHTML = "Haz Sacado : " + Salieron;
         encaja.innerHTML = "Diponible : " + Totalcaja;
         totalencaja(); 

    }

    else
    {
        resultado.innerHTML = "<p> Lo siento no tengo esa cantidad </p>"; // mostraer en HTML 
     }

}

// Funcion para calcular el valor total del dinero en el cajero
function totalencaja ()
{
    Totalcaja =0;
     for ( var conteo of caja)
    {
        Totalcaja += (conteo.valor * conteo.cantidad);
        document.getElementById(conteo.valor).innerHTML = conteo.cantidad;
        
    }
 
    encaja.innerHTML = "Diponible : " + Totalcaja;
    
}

Luis Alfredo Moreno Luna

Y el código

//Desafio, mostrar los billetes con imágenes 💵
//La caja del cajero se quede vacía sin recargar, que muestre hasta que se quede sin dinero
//Poner la versión más compacta
class Billete{
    constructor(v, c, i){
        this.valor = v;
        this.cantidad = c;
        this.image = i;
    }
}
//Objeto con el nombre de archivo de imagenes
var bImg = {
    20: "20.jpg",
    50: "50.jpg",
    100: "100.jpg",
    200: "200.jpg"
}

var caja = [];

caja.push(new Billete(200, 5, bImg[200]));
caja.push(new Billete(100, 10, bImg[100]));
caja.push(new Billete(50, 5, bImg[50]));
caja.push(new Billete(20, 10, bImg[20]));

var dineroDisponible = dineroTotal();
var div = 0;
var papeles = 0;


var r = document.getElementById("res");
var b = document.getElementById("retirar");

b.addEventListener("click", entregarDinero);

//Funcion que calcula el total de dinero disponible en función a 
//la cantidad de billetes que esten en caja
function dineroTotal(){
    var t = 0;
    for(var i of caja){
        t = t + (i.cantidad * i.valor);
    }
    return t;
}

function entregarDinero(){
    //Se declara el array de entregado aqui para que se ''reseteé'' cada
    //vez que se llama la función.
    var entregado = [];
    //Se declara dinero aqui ya que solo se usa en la funcion
    //y se le hace el parse int sin hacer la var t
    var dinero = parseInt(document.getElementById("dinero").value);
    if(dinero <= dineroDisponible && dinero > 0){
        for(var bi of caja){
            div = Math.floor(dinero / bi.valor);
            if(div > bi.cantidad){
                papeles = bi.cantidad;
            }else{
                 papeles = div;
            }
            entregado.push(new Billete(bi.valor,papeles,bi.image));
            dinero = dinero - (bi.valor * papeles);
        }
        if(dinero > 0){
            r.innerHTML += "No se puede dar esa cantidad<hr>";
        }else{
            //Se llama esta funcion aqui para hacer update de la caja una vez
            //comprobado que se puede entregar la cantidad que el usuario puso
            updateCaja(entregado);
            for(var e of entregado){
                if(e.cantidad > 0){
                    for(var i=0; i < e.cantidad;i++){
                        //InnerHTMl pone lo que se asignes dentro del elemento html (r)
                        r.innerHTML += '<img src="'+e.image+'" class="billete"> ';
                    }
                    r.innerHTML += "<br>";  
                }
            }
            r.innerHTML += "<hr/>"
        }
        //Se hace un update de la variable dineroDisponeble con los valores actuales de la caja
        dineroDisponible = dineroTotal();
    }else{
        r.innerHTML += "No hay dinero suficiente en el cajero<br/>";
    }
    
}

//con este doble ciclo e if comparamos una casilla de caja con todas
//las de entregado y si tienen el mismo valor (o sea si son el mismo billete)
//que reste la cantidad de billtes entregados en los que se tiene en caja.
function updateCaja(entregado){
    for (c in caja){
        for (e in entregado){
            if(caja[c].valor == entregado[e].valor){
                caja[c].cantidad = caja[c].cantidad - entregado[e].cantidad;
            }
        }
    }
}

Cristian Andres Ladino Peña

Hice bastantes mejoras y jugué un poquito con el .css
Aún tiene detalles por mejorar y un par de bugs, pero creo que sería interesante mejorarlo para finalizar una app de simulador de cajero. 😀

// clase billete, actor principal del código.
class Billete
{
  constructor (img, v, c)
  {
    this.imagen = new Image ();
    this.imgBillete = img;
    this.valor = v;
    this.cantidad = c;

    this.imagen.src = rutaimg[this.imgBillete];
  }
}

// img src
var rutaimg = [];
rutaimg["cienmil"] = "billetes/cienmil.png";
rutaimg["cincuentamil"] = "billetes/cincuentamil.jpg";
rutaimg["veintemil"] = "billetes/veintemil.jpg";
rutaimg["diezmil"] = "billetes/diezmil.jpg";
rutaimg["cincomil"] = "billetes/cincomil.jpg";
rutaimg["dosmil"] = "billetes/dosmil.png";
rutaimg["mil"] = "billetes/mil.jpg";

// Función de números aleatorios
function aleatorio(max, min)
{
  var resultado = Math.floor(Math.random() * (max - min + 1)) + min;
  return resultado;
}

// Cantidad de billetes aleatorios
var cantidadBilletes = new Array();

for (i = 0; i <= 6; i++)
{
  var x = aleatorio(1, 100)
  cantidadBilletes[i] = x;
}

// billetes de caja y entregados
var caja = [];
var entregado = [];
caja.push( new Billete("cienmil", 100000, cantidadBilletes[0] ) );
caja.push( new Billete("cincuentamil", 50000, cantidadBilletes[1]) );
caja.push( new Billete("veintemil", 20000, cantidadBilletes[2]) );
caja.push( new Billete("diezmil", 10000, cantidadBilletes[3]) );
caja.push( new Billete("cincomil", 5000, cantidadBilletes[4]) );
caja.push( new Billete("dosmil", 2000, cantidadBilletes[5]) );
caja.push( new Billete("mil", 1000, cantidadBilletes[6]) );


//variables
var saldoBilletes = document.getElementById("saldoBilletes");
var saldoPesos = document.getElementById("saldoPesos");
var saldoDisponible = document.getElementById("saldoBilletes");
var reiniciar = document.getElementById("reiniciar");
var resultado = document.getElementById("resultado");
var finalizado = document.getElementById("finalizado");
var enter = document.addEventListener("keydown", entregarBilletes2);
var t = document.getElementById("dinero");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarBilletes);
var dinero;
var div = 0;
var papeles = 0;

// Extraer billetes con la tecla Enter
function entregarBilletes2(evento)
{
  document.getElementById("sinDinero");
  if (evento.keyCode == 13)
  {
    entregarBilletes();
  }
}

// Saldo de billetes
mostrarSaldoBilletes();  //Muestra el saldo inicial de billetes

function mostrarSaldoBilletes()
{
  saldoBilletes.innerHTML = "";  //Elimina el saldo anterior y deja el espacio vacio para la función
  for (var bill of caja)
  {
    if(bill.cantidad > 1)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else if (bill.cantidad == 0)
    {
      saldoBilletes.innerHTML += bill.cantidad + " billetes de " + bill.valor + "<br />";
    }
    else
    {
      saldoBilletes.innerHTML += bill.cantidad + " billete de " + bill.valor + "<br />";
    }
  }
}

// Función con algoritmo del cajero
function entregarBilletes()
{
  var clave = parseInt(prompt("Ingrese la clave para retirar"));
  if (clave == 1837)
  {
  resultado.innerHTML = "";
  entregado = [];  //Limpia los datos de entregado para que la funcion calcular billetes y saldo funcione
  dinero = parseInt(t.value);
  finalizado.innerHTML = "Usted ha recibido:";
  for (var bi of caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero / bi.valor);
      if (div > bi.cantidad)
      {
        papeles = bi.cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push( new Billete(bi.imgBillete, bi.valor, papeles) );
      dinero = dinero - (bi.valor * papeles);
      bi.cantidad = bi.cantidad - papeles;
    }

  }
  if (dinero > 0)
    {
      resultado.innerHTML = "";
      finalizado.innerHTML = "";
      document.getElementById("sinDinero");
      sinDinero.innerHTML = "No tengo los billetes para darte el dinero que necesitas..";
    }
  else
  {
    for (var e of entregado)
    {
      sinDinero.innerHTML = "";
      if (e.cantidad >  1 )
      {
        resultado.innerHTML += e.cantidad + " billetes de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }
      else if (e.cantidad == 1)
      {
        resultado.innerHTML += e.cantidad + " billete de:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=" + e.imagen.src + " /><br />";
      }  // &nbsp; para añadir espacios adicionales ya que html detecta solo el primer espacio
    }
  }
        mostrarSaldoBilletes();
        var totalPesosFinal = calcularSaldoPesos();
        saldoPesos.innerHTML = "Saldo total COP: " + totalPesosFinal;
  }
  else
  {
    resultado.innerHTML = "Clave incorrecta, intente nuevamente.";
  }
}


// Función para refrescar el document con el boton "otra vez"
reiniciar.addEventListener("click", reiniciarCajero);

function reiniciarCajero()
{
  document.location.reload();
}

//  Calculo inicial del saldo en pantalla
var totalPesos = calcularSaldoPesos();
saldoPesos.innerHTML = "Saldo total COP: " + totalPesos;

// Función para calcular saldo en pantalla
function calcularSaldoPesos()
{
  var y = 0;
  for (var bill of caja)
  {
    y = (bill.cantidad * bill.valor) + y;
  }
  return y;
}

be1y

Desafio logrado. Aunque falta optimizar el código.

atm.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Cajero automatico</title>

  <style type="text/css">
    body
    {
      background-color: gray;
      color: white;
      text-align: center;
    }
    h1
    {
      font-size: 24px ;
      font-family: monospace;
    }
    p
    {
      font-size: 16px;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>Cajero automático</h1>
  <p>
    <img src="cajero.gif" />
  </p>
  <p>
    <input type="number" id="dinero" />
    <input type="button" value="Extraer" id="extraer" />
  </p>
  <p id="inicio"></p>
  <p id="resultado"></p>
  <p id="imgBilletes"></p>
  <input type="button" value="Recargar" style="display:none" id="recargar" />

  <script src= "billetes.js"></script>
  <script src= "cajero.js"></script>
</body>
</html>

billetes.js

class Billete {
  constructor(valor, cantidad) {
    this.imagen = new Image();
    this.valor = valor;
    this.cantidad = cantidad;

    this.imagen.src = imagenes[this.valor];
  }

  mostrarBilletes()
  {
    imgB.innerHTML += "<br />" + this.cantidad + " billettes de " + this.valor + "$ <br />";
    for (var i = 0; i < this.cantidad; i++) {
      imgB.innerHTML += "   " + '<img src="' + this.imagen.src + '" width="140" height="60" />';
    }
  }

  calcularSaldo()
  {
    saldoCajero += this.valor * this.cantidad;
  }
}```

cajero.js

function entregarDinero()
{
var t = document.getElementById(“dinero”);
dinero = parseInt(t.value);
dineroPedido = dinero;
ini.innerHTML = “”;

//muestra el saldo del cajero y el total extraído
resultado.innerHTML = "<hr /><strong> Saldo en Cajero: $ " + saldoCajero + "</strong><hr />";
resultado.innerHTML += "Total extraido: $ " + dineroPedido + "<hr />";

//dibuja los billettes
imgB.innerHTML = "Retiró: ";
for (var e of entregado)
{
  if (e.cantidad > 0)
  {
    e.mostrarBilletes();
  }
}

//limpiar el contenedor de entregado
inicializarVar();

}
}

function extraerDinero()
{
for (var bi of caja) {
if (dinero > 0) {
div = Math.floor(dinero / bi.valor);
if(div > bi.cantidad)
{
papeles = bi.cantidad;
}
else {
papeles = div;
}

  entregado.push(new Billete(bi.valor, papeles));
  dinero = dinero - (bi.valor * papeles);
  bi.cantidad -= papeles;
}

}
saldoCajero -= dineroPedido;
}

function inicializarVar()
{
entregado = [];
dineroPedido = 0;
}

function recargarDinero()
{
document.location.reload();
}

var dinero;
var papeles = 0;
var div = 0;
var saldoCajero = 0;

var ini = document.getElementById(“inicio”);
var resultado = document.getElementById(“resultado”);
var imgB = document.getElementById(“imgBilletes”);

var b = document.getElementById(“extraer”);
b.addEventListener(“click”, entregarDinero);

var rec = document.getElementById(“recargar”);
rec.addEventListener(“click”, recargarDinero);

for (var sal of caja)
{
sal.calcularSaldo();
}

ini.innerHTML = “<hr /> Bienvenido! <br /> Ingrese el monto que quiere extraer <hr />”;

Gedo

Bueno le pude meter imagenes, me costo bastante por que tuve que buscar en google jaja ( no supe hacerlo con el resultado.innerHTML )

class Billete
{
  constructor(n, v, c)
  {
    this.nombre = n;
    this.imagen = new Image;
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = img[this.nombre];
  }
}

img = [];
img["$50"] = "Billete50.png";
img["$20"] = "Billete20.png";
img["$10"] = "Billete10.png";

caja = [];
caja.push(new Billete("$50", 50, 10) );
caja.push(new Billete("$20", 20, 30) );
caja.push(new Billete("$10", 10, 50) );

var dinero_requerido = document.getElementById("txt_dinero");
var button = document.getElementById("boton");
button.addEventListener("click", extraerDinero);

var dinero;
var div;
var papeles = 0;
var dinero_total = (caja[0].valor * caja[0].cantidad) + (caja[1].valor * caja[1].cantidad) + (caja[2].valor * caja[2].cantidad)
var resultado = document.getElementById("resultado");

entregado = [];


function extraerDinero()
{
  dinero = parseInt(dinero_requerido.value);

  for(var b of caja)
  {
    if(dinero > 0)
    {
      div = Math.floor(dinero / b.valor)
      if(div > b.cantidad)
      {
        papeles = b.cantidad;
        entregado.push(new Billete(b.nombre, b.valor, papeles))

      }
      else
      {
        papeles = div;
        entregado.push(new Billete(b.nombre, b.valor, papeles))
      }
      dinero = dinero - (papeles * b.valor);
    }
  }

  resultado.innerHTML = "Usted ha retirado: </br>";

  if(dinero > 0)
  {
    resultado.innerHTML = "Lo siento, no puedo darte esa cantidad.";
  }

  else
  {
    for(var e of entregado)
    {
      if(e.cantidad > 0)
      {
       for(var papel = 1; papel <= e.cantidad; papel++)
       {
         var nuevoPapel = document.createElement("IMG");
         nuevoPapel.setAttribute("src", img[e.nombre]);
         nuevoPapel.setAttribute("width", 100);
          nuevoPapel.setAttribute("length", 200);
         document.body.appendChild(nuevoPapel)
       }

      }
    }

  }
}```

Abril Darynka Tapia Sosa

Agrego mi resultado del desafio.
![]( Uso del cajero.png


var billete=document.getElementById("billete");
var totalCajero=document.getElementById("totalCajero");
var inputNombre = document.getElementById("numero0");
var dolar = [];
dolar["dolar1"]="img/dolar1.png";
dolar["dolar5"]="img/dolar5.png";
dolar["dolar20"]="img/dolar20.png";

var total=0;
class Billete{
	constructor(v, c, n){
		this.imagen= new Image();
		this.nombre=n;
		this.valor=v;
		this.cantidad=c;
		this.imagen.src=dolar[this.nombre];
	}

	mostrar(){
		billete.appendChild(this.imagen);
		billete.innerHTML += '<span id="cambiar"> Cantidad: '+this.cantidad+'</span><br>' ;
		total = total + (this.cantidad * this.valor);
		totalCajero.innerHTML= 'Dinero en Cajero: <strong>$' +total+'.00</strong>';
	}
}
	var cont=1;
	var  nuevo=0;
function entregarDinero(){
	var t = document.getElementById("dinero");
	dinero=parseInt(t.value);
	for (var bi of caja){
		if(dinero>0){
			div= Math.floor(dinero / bi.valor);
			if(div>bi.cantidad){
				papeles = bi.cantidad;
			}else{
				papeles=div;
			}
		entregado.push(new Billete(bi.valor, papeles));
		dinero = dinero - (bi.valor * papeles); 
		}
	}
	if(dinero>0){
		resultado.innerHTML = 'No puedo darte esa cantidad';
	}else{
		resultado.innerHTML += 'Solicitud #'+cont+'<br>';
		for(var e of entregado){
			if(e.cantidad>0){
				for (var bi of caja){
					if(e.valor==bi.valor){
						for (var i=0; i<e.cantidad; i++){
							// resultado.innerHTML += e.cantidad+' billetes de ';
							resultado.appendChild(bi.imagen);
							resultado.innerHTML += ' &nbsp ';
						}
						resultado.innerHTML += ' <br><br> ';
					}	
				}
			}
		}
		resultado.innerHTML += '<hr /><br>';
		cont++;


		for (var bi of caja){
			for (var en of entregado){
				if(en.valor== bi.valor){
					console.log(bi.valor+' Cantidad : '+bi.cantidad +' - '+ en.cantidad);
					bi.cantidad = bi.cantidad-en.cantidad;
				}
			}
		}
	}

	for (var bi of caja){
		for (var i = 0; i < 3; i++) {
			billete.removeChild(billete.firstChild);
		}	
		total=0;	
	}

	for (freddito of caja) {
		freddito.mostrar();
	}
	
	// console.log(nuevo);
	entregado = [];

}


var caja = [];
var entregado = [];
ca

Para ver esta clase abierta debes iniciar sesión

Curso Gratis de Programación Básica

Freddy Vega

Implementación del Cajero Automático24/36

LINK: facu2201.github.io

También dejo el código:

LINK: facu2201.github.io

También dejo el código: