Empieza por acá

1

Mi primera línea de código

Fundamentos de Programación

2

¿Qué es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

Cómo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qué son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matemáticas y números aleatorios en JavaScript

19

Uso y carga de imágenes en Canvas

Cuarto proyecto: Pakimanes

20

División, módulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero automático

22

Diagrama de Flujo del Cajero Automático

23

Implementación del Cajero Automático

Sexto proyecto: Cliente/Servidor

24

Primer servidor web con express

25

Modelo Cliente/Servidor

Programación de Hardware y Electrónica con Arduino

26

¿Cómo funciona un circuito electrónico?

27

¿Cómo programar un Arduino?

28

Programación de circuitos con C, Arduino y Sketch

29

Cómo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

¿Cuál lenguaje de programación aprender primero?

34

La Web con Visión Profesional

Contenido Bonus

35

Qué son tablas de verdad y compuertas lógicas

Recap Curso Gratis de Programación Básica

36

Recap Programación básica

37

Recap Programación básica ENG

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Implementación del Cajero Automático

23/37
Recursos

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

Primero, debemos generar nuestra estructura HTML, luego vamos a pasar nuestro algoritmo a código.

Siempre es importante ir probando el código a medida que se va escribiendo. Generar ese hábito es útil 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 más 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, más el resto de la operación.
  • Operador -= : Se aplica el mismo concepto que el operador “+=”, solo que en este caso el valor es restado.

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.

Aporte creado por: Gustavo Franco

Aportes 1292

Preguntas 379

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Bueno, después de, literalmente, todo un día logré terminarlo, decidí añadirle un billete de cien, utilicé un poco de Photoshop para crear los ** FREDDÓLARES** y un diseño mas completo para el cajero. También le añadí algunos sonidos para que sea mas real y varias repuestas distintas al colocar un cero, números negativos, etc… Investigué un poco mas en los cursos de CSS para poder hacer la disposición de los elementos como se ven.
Les dejo el link por si quieren verlo funcionando y algunas imágenes

LINK: facu2201.github.io

.


También dejo el código:

<HTML>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cajero Platzi</title>
    <style>
      body
      {
        background-color: #7e7e7e;
      }
      h1
      {
        color: #e0e0e0;
        font-family: inherit;
      }
      .texto
      {
        margin-left: 43px;
        background-color: black;
        height: 50px;
        width: 250px;
        color: green;
        font-size: 50px;
        text-align: center;
      }
      .Contenidos
      {
        padding-left: 370px;
        position: absolute;
        top: 200px;
      }
      .boton
      {
        margin-left: 70px;
        position: absolute;
        width: 205px;
        height: 45px;
        font-family: monospace;
        color: #67ed3e;
        font-size: 18px;
        font-weight: 900;
        background-color: #363636;
      }
      .display
      {
        position: absolute;
        padding-left: 400px;
        text-align: center;
        top: 491px;
        font-family: monospace;
        font-size: 20px;
        color: white;
      }
      .display2
      {
        position: absolute;
        padding-left: 10px;
        font-family: monospace;
        font-size: 20px;
        color: white;
      }
      .fondo
      {
        position: relative;
        margin: auto;
        width: 1060px;
      }
    </style>
  </head>
  <body>
    <audio src="sonido/tecla.mp3" id="tecla_id"></audio>
    <audio src="sonido/alerta.mp3" id="alerta_id"></audio>
    <audio src="sonido/entrega.mp3" id="entrega_id"></audio>

    <div class="fondo">
      <img class="fondoImg" src="imagen/142.png"></img>

      <div class="Contenidos">
        <p class= "datos">
          <h1><strong>Ingrese el monto deseado</strong></h1>
          <input class="texto" type="text" id="pantalla_texto" /><br />
          <br /><input type="button" value="REALIZAR EXTRACCIÓN" class="boton" id="botonExtraccion" />
        </p>
      </div>

      <div class="display">
        <p id="resultado">
        </p>
      </div>

      <div class="display2" >
        <p id="carga_id">
        </p>
      </div>
    </div>
    <script type="text/javascript" src="Cajero.js"></script>
  </body>
</html>

<JAVASCRIPT>

//DECLARACION DE VARIABLES
class Billete
{
  constructor (valor, cantidad)
  {
    this.valor = valor;
    this.cantidad = cantidad;
    this.imagen = new Image();
    this.imagen.src = imagenes[this.valor];
  }
  mostrar()
  {
    document.body.appendChild(this.imagen);
  }
}

var sonidos  =
{
  tecla: document.getElementById("tecla_id"),
  alerta: document.getElementById("alerta_id"),
  entrega: document.getElementById("entrega_id"),
}

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

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

var resultado = document.getElementById("resultado");
var carga = document.getElementById("carga_id");
var pantalla = document.getElementById("pantalla_texto");
var boton_extraccion = document.getElementById("botonExtraccion");
var papeles;
var div;
var dinero;
var dinero_disponible = 0;
var entregado = [];

// OTROS EVENTOS Y FUNCIONES
contador();

boton_extraccion.addEventListener("click", insertarDinero);
document.addEventListener("keydown", sonido_tecla);

//DECLARACION DE FUNCIONES
function sonido_tecla()
{
  sonidos.tecla.play();
}

function contador() //dinero total de  la caja
{
  for(v of caja)
  {
    dinero_disponible = dinero_disponible + (v.valor * v.cantidad);
  }
}

function insertarDinero()
{
  entregado.splice(0, entregado.length); //Reseteo el array entregado
  dinero = parseInt(pantalla.value);
  compatibilidad();
}

function compatibilidad() //solo tomará multiplos positivos de 10 y distintos de 0
{
  if (dinero > dinero_disponible) // SI NO HAY SUFICIENTE DINERO
  {
    sonidos.alerta.play();
    resultado.innerHTML = "No tenemos tantos Freddólares!";
  } else
  {
    if (dinero % 10 == 0 && dinero > 0)
    {
      entregarDinero();
    } else if (dinero == 0)
    {
      sonidos.alerta.play();
      resultado.innerHTML = "Para que vienes al cajero?";
    } else if (dinero % 10 !== 0 && dinero > 0)
    {
      sonidos.alerta.play();
      resultado.innerHTML = "Inserte solo múltiplos de 10!";
    } else if (dinero < 0)
    {
      sonidos.alerta.play();
      resultado.innerHTML = "No se pueden insertar valores negativos";
    }
  }
}

function entregarDinero()
{
  for(v of caja)
  {
    if (dinero > 0)
    {
      div = parseInt(dinero / v.valor) //NUMERO DE BILLETES NECESARIOS

      if (div > v.cantidad) //CUANDO NO ALCANZAN LOS BILLETES MAS GRANDES
      {
        papeles = v.cantidad;
        dinero_disponible = dinero_disponible - (v.valor * v.cantidad);
        dinero = dinero - (v.valor * v.cantidad);
        entregado.push(new Billete(v.valor, papeles));
        v.cantidad = 0//SE AGOTAN LOS BILLETES AL TERMINAR
        check();
      } else //CUANDO SI ALCANZAN LOS BILLETES MAS GRANDES
      {
        papeles = div;
        dinero_disponible = dinero_disponible - (v.valor * div);
        dinero = dinero - (v.valor * div);
        entregado.push(new Billete(v.valor, papeles));
        v.cantidad = v.cantidad - div;
        check();
      }
    }
  }
}

function check() //VERIFICA SI LA SUMA ES VÁLIDA RESPECTO A LOS BILLETES DISPONIBLES
{
  if (dinero == 0)//ENTREGA EL DINERO
  {
    sonidos.entrega.play();
    carga.innerHTML += "<br /> Usted retiró: <br />";
    for(e of entregado)
    {
      resultado.innerHTML = "Retire su dinero abajo ↓";
      for (var i = 0; i < e.cantidad; i++)
      {
        carga.innerHTML += "<img src=" + e.imagen.src + " />";
      }
    }
  } else
  {
    sonidos.alerta.play();
    resultado.innerHTML = "No tenemos los billetes para esa suma";
  }
}

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

Casi los mismo.

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]);
  }
}

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


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

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

Espero que les sea util. Saludos!

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

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

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.

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

}```

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>

JS

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

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

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

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)

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

1 mes me tardé. Desde que comencé la implementación del cajero en JS me prometí 1 cosa: Hacerlo sin mirar el video de Freddy. Y lo hice, incluso resolví los desafíos sin mirar el código de nadie más. Quizá para los expertos les puede parecer algo simple, pero para alguien que nunca en la vida había programado es un gran logro. Dice por ahí que no se necesita ser un genio para progamar; pues bien, quizá no debes ser un genio, pero si necesitas un mínimo de inteligencia por arriba del promedio. Pensamiento lógico, pero sobre todo inteligencia emocional (para nunca rendirte).

Habrá momentos en los que te frustrarás, habrá momentos en los que quieras tirar la toalla, pero creeme, cuando Freddy dice que esto es altamente recompenzante SI QUE LO ES. Ya me siento listo para construir un cohete en SpaceX jajajajaja ok no.

Nunca te rindas, no importa lo que te tardes. Eres más fuerte y valiente que un simple código.

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

    this.imagen.src = imagenes[this.valor];
  }
  mostrar()
  {
    resultado.innerHTML += "<br />" + "<strong>" + this.cantidad + " Billetes de " + "</strong><br />";
    resultado.appendChild(this.imagen);
  }
}

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

// Variables huérfanas

var dinerito, papeles, div;
var entregado = [];

var lookthebox = document.getElementById("lookthebox");
var resultado = document.getElementById("resultado");
var moneyasked = document.getElementById("dinero");
var boton = document.getElementById("boton");
boton.addEventListener("click", entregarDinero,);

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

function entregarDinero()
{
  var dinerito = parseInt(moneyasked.value);
  var dinerorestante = 0

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

      if (div > b.cantidad)
      {
        papeles = b.cantidad;
      }
      else if (div <= b.cantidad)
      {
        papeles = div;
      }
      entregado.push(new Billete(b.valor, papeles));
      dinerito = dinerito - (b.valor *  papeles);
      b.cantidad = b.cantidad - papeles;
      }
    // Malditasea por FIN LO HICE!!!
    dinerorestante += (b.valor * b.cantidad);
    console.log(dinerorestante);
    lookthebox.innerHTML = "Dinero Disponible = " + "<strong>" + dinerorestante + " MXN" + "</strong>";
  }

  console.log(caja);

  if (dinerito > 0)
  {
    resultado.innerHTML = "=( En esta ocasión solo puedo darte: <br />"
    for (var bgiven of entregado)
    {
      bgiven.mostrar();
    }
  }

  else
  {
    resultado.innerHTML = "Take Your Money MF: <br />"
    for (var bgiven of entregado)
    {
      if (bgiven.cantidad > 0)
      {
        bgiven.mostrar();
      }
    }
  }
}


Me tardé pero me siento orgulloso jajaja

Envés de billetes son dogecoins.

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);



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

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

Cualquier sugerencia para perfeccionarlo o mejorarlo será bien recibida…











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.

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```

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);```

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

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



Aquí les dejo mi cajero
https://fer80.github.io/Cajero/

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

  1. Muestra el monto actual en cajero.
  2. Muestra lista de operaciones realizadas incluyendo las no exitosas.
  3. Muestra tantas imágenes como billetes entregados, no sé si lo hice bien pero fue como funcionó.
  4. 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>";
  }
}

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.

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


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 = ""
}








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:

  1. 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”
  2. Ingresar las cantidades en caja, por medio del usuario.
  3. Llenar el arreglo de entregado, solo cuando la cantidad de billetes es mayor a cero.
  4. 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
>

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

Código HTML

<!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>
        <p id="estadoCaja"></p>
        <p id="historialRetiros"></p>
        <script src="cajero3.js">       
        </script>
    </body>
</html>

Código JavaScript

var imagenBilletes = [];
imagenBilletes[100] = "billete_100s.jpg";
imagenBilletes[50] = "billete_50s.jpg";
imagenBilletes[20] = "billete_20s.jpg";
imagenBilletes[10] = "billete_10s.jpg";

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

function entregarDinero()
{
    var t = document.getElementById("dinero");
    dinero = parseInt(t.value);
    dinero_entregado = dinero; // Copio el valor del dinero que se quiere retirar en otra variable, ya que dinero será manipulada.
    entregado.splice(0,entregado.length); // Reseteo del array entregado.
    resultado.innerHTML = ""; // Limpio el espacio asignado al resultado, donde se mostrarán los billetes entregados.
    
    for(var bi of caja)
    {
        if(dinero > 0 && dinero<=saldoCaja) // Restaré el dinero solicitado siempre que éste sea menor al saldo del cajero.
        {
            div = Math.floor(dinero/bi.valor);
            if(div > bi.cantidad)
            {
                papeles = bi.cantidad;                
            }
            else
            {
                papeles = div;             
            }
            bi.cantidad = bi.cantidad - papeles;
            entregado.push( new Billete(bi.valor, papeles) );
            dinero = dinero - (bi.valor * papeles);                     
        }        
    }
    
    if(dinero>0)
    {   
        resultado.innerHTML = "No hay dinero suficiente para entregar esa cantidad de dinero <br /><hr />";
    }
    else
    {
        resultado.innerHTML += "<strong> Retiraste: s/." + dinero_entregado + "</strong><br />";
        for(var e of entregado)
        {        
            if(e.cantidad>0)
            {                          
                resultado.innerHTML += e.cantidad + " billetes de s/." + e.valor+ "<br />";
                for(var i = 0; i< e.cantidad; i++)
                {                    
                    resultado.appendChild(e.imagen);
                    resultado.innerHTML += " "; // Para que los billetes salgan en la misma fila
                }
                resultado.innerHTML += "<br />";                
            }                        
        }
        resultado.innerHTML += "<hr />"; // Línea para separar los billetes mostrados del saldo ATM.
        saldoCaja = saldoCaja - dinero_entregado; // Actualizo el saldo ATM siempre que sí se haya retirado dinero.
        histoRetiros.push(dinero_entregado);  // Agrego el valor del dinero solicitado siempre que sí se haya retirado dinero.
        // Cuando el dinero solicitado es mayor al saldo ATM, no se descontará nada en el ATM ni se registrará en el historial de retiros.       
    }  
    
    console.log(caja); // Verifico los valores de caja y saldo ATM mediante la consola de la página.
    console.log("Saldo ATM: s/." + saldoCaja);

    estado.innerHTML = "<strong> Saldo ATM: </strong> s/." + saldoCaja + ". <br /> Quedan: <br />"; // Muestro el saldo ATM y la cantidad de billetes restantes.
    for(var i of caja)
    {
        estado.innerHTML += i.cantidad + " billetes de s/." + i.valor + "<br />";
    }
    estado.innerHTML += "<hr />"; // Línea para separar el saldo ATM del historial de retiros.

    console.log(histoRetiros); // Verifico los valores registrados en histoRetiros mediante la consola de la página.
    retiros.innerHTML = "<strong> Historial retiros: </strong><br/>";
    var indice = 1; // Variable auxiliar para el índice de cada retiro.
    for(var i in histoRetiros)
    {
        retiros.innerHTML += indice + ". s/." + histoRetiros[i] + "<br />";
        indice += 1;
    }     
}

var caja = [];
var entregado = [];
var saldoCaja = 0;
var histoRetiros = [];

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

for(var i of caja)
{
    saldoCaja += i.cantidad * i.valor; // Calculo el saldo ATM con la suma de billetes ingresados.
}

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

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

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 />”;

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.
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;
}

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);

>
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);

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);
    }

}

Mi aporte 😄

Al cargar sin realizar ningún retiro:

Primer retiro:

Segundo retiro:

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();

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);

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.

Aquí pueden ver mi Cajero
COLOMBIA

(

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 = "";

}

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 ! 😃

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>

¿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));

Todo el dia peleando con este codigo jaja al final lo pude hacer, Aunque me quedaron algunas cosas pendientes:

  1. ¿Como colocar algo a la derecha de la imagen del cajero? queria colocar un cuadro que diga cuanto dinero hay, cuanto se entrego y cuanto queda, algo por el estilo.

  2. No se si les pasara pero si colocaba 399 teoricamente el cajero me daba lo que tenia menos el resto. La unica forma que encontre es una condicionante usando el modulo del billete de menor valor en caja, el problema es que si agrego otro billete de menor valor tengo que cambiar el if. ¿Como hacerlo automatico?

Tengo el cerebro quemado.



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)
       }

      }
    }

  }
}```

Así quedó el mío :3

yo no entendí ni madres, asi que lo hice asi XD
//
//
//
var texto=document.getElementById(“dinero”);
var boton=document.getElementById(“boton”);
boton.addEventListener(“click”,definitiva)

var billetes={
frida:1000,
diego: 500,
sor: 200,
indio:100,
morelos:50,
benito:20
}

function definitiva(){
var sacar = texto.value;
var z;
var z1;
if(sacar>=billetes.frida){
z=Math.floor(sacar/billetes.frida);
z1=(billetes.frida*z-sacar) *-1;

    for(var i=0;i<z;i++){
        document.write("Frida Khalo<br>")
    }}
    else {
        z=Math.floor(sacar/billetes.frida);
    z1=(billetes.frida*z-sacar)*-1;
    }
var a;
var a1;
if(z1>=billetes.diego){
    a=Math.floor(z1/billetes.diego);
    a1=(billetes.diego*a-z1)*-1;
    
    for(var i=0;i<a;i++){
        document.write("Diego Rivera<br>")
    }}
    else {
        a=Math.floor(z1/billetes.diego);
    a1=(billetes.diego*a-z1)*-1;
    }

var b;
var b1;
if(a1>=billetes.sor){
    b=Math.floor(a1/billetes.sor);
    b1=(billetes.sor*b-a1)*-1;

    for(var i=0;i<b;i++){
        document.write("Sor Juana<br>")
    }}
    else{
        b=Math.floor(a1/billetes.sor);
        b1=(billetes.sor*b-a1)*-1;
    }

var c;
var c1;
if(b1>=billetes.indio){
    c=Math.floor(b1/billetes.indio);
    c1=(billetes.indio*c-b1)*-1;
    for(var i=0;i<c;i++){
        document.write("un indito<br>")
    }}
    else{
        c=Math.floor(b1/billetes.indio);
    c1=(billetes.indio*c-b1)*-1;
    }


var d;
var d1;
if(c1>=billetes.morelos){
    d=Math.floor(c1/billetes.morelos);
    d1=(billetes.morelos*d-c1)*-1;
    for(var i=0;i<d;i++){
        document.write("morelos<br>")
        console.log(a1)
    }}
    else{
        d=Math.floor(c1/billetes.morelos);
        d1=(billetes.morelos*d-c1)*-1;
    }

var e;
var e1;
if(d1>=billetes.benito){
    e=Math.floor(d1/billetes.benito);
    e1=(billetes.benito*e-d1)*-1;
    for(var i=0;i<e;i++){
        document.write("Benito Juarez<br>")
    }}
    else{
        e=Math.floor(d1/billetes.benito);
        e1=(billetes.benito*e-d1)*-1;
    }
    
    if(e1<billetes.benito){
        document.write("faltan "+e1+" pesos")
    }
}

definitiva()

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);

![](

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 😊

  1. 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.
  2. 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.
  3. Si no se ingresa cantidad en el “input”, se lanza el mensaje del dato necesario.
  4. 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.
  5. Se agrega el monto entregado.
  6. Se agrega la lista de dinero entregado, junto a la cantidad y sus imágenes
  7. 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.
  8. Al entregarse moneda(s) se especifica el término “Billete” por “moneda”, con una condicional.
  9. 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));```

Que beestiaaa!!! despues de varios dias lo logre, aunque todavia esta de optimizar bastante el codigo ya que una parte hize a mi manera como entendi por lo que se alargo bastante , pero por el momento funciona faltan detalles como los saltos entre los billetes y el boton limpiar, si bien borra los elementos en la memoria queda guardada

Aqui el codigo


var entregados = [] ;
var div = 0;
var boton1;


var limp = document.getElementById("limpiar");
limp.addEventListener("click", limpio);
boton1 = document.getElementById("bretiro");
boton1.addEventListener("click", realizar);
var r = document.getElementById("resultado");
var resultado = document.getElementById ("disponible");
var s = document.getElementById("salto");


function realizar ()
{
  d = document.getElementById("retiro");  //valor ingresado por usuario
  dretiro = parseInt(d.value);
  var total = 0;
  for (x of caja) //Ciclo para calcular el total del dinero en el cajero
  {
    var total1 = (x.valor * x.cantidad);
    total = total + total1; //Se almacena cada valor en la variable "total"
  }
  var t = total - dretiro; // vriable mostrara el saldo del cajero

  if (dretiro > total ){ // comprueba que haya el dinero correspondiente
    r.innerHTML ="NO TENGO ESA CANTIDAD DE DINERO";
  }
  else
  {
    for (var b of caja)
    {
      if (dretiro >= 0)
        div = Math.floor(dretiro / b.valor);
        if (div > b.cantidad)
        {
          var papeles = b.cantidad;
        }
        else  {
           papeles = div;
         }
        entregados.push(new dolares(b.nombre, b.valor, papeles));
        dretiro = dretiro - (b.valor * papeles);
    }
    for (e of entregados)
    {

      if (e.cantidad > 0 )
      r.innerHTML = r.innerHTML + e.cantidad + " billetes de $ "
      + e.valor + "<br />";
      for (w of entregados)
      if (w.entregados = e.cantidad)
      {
        r.appendChild(e.imagen) + "<br >";
      }
      resultado.innerHTML = ("DINERO ACTUAL DISPONIBLE EN EL CAJERO $ "
      + t + ".00").bold();
    }
  }
}

function limpio ()
{
  r.innerHTML =  " ";
  entregado = [];

}

//CLASE PARA LOS BILLETES

class dolares
{
  constructor (n, v, c,)
  {

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

}

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

var caja = [];
caja.push (new dolares ("50", 50, 10));
caja.push (new dolares ("20", 20, 10));
caja.push (new dolares ("10", 10, 10));

var t1 = 0;
for (y of caja) //Ciclo para calcular el total del dinero en el cajero
{
  var total2 = (y.valor * y.cantidad);
  t1 = t1 + total2; //Se almacena cada valor en la variable "total"
}

d = document.getElementById("disponibilidad");
d.innerHTML =  ("El cajero dispone de $ "+ t1 + ",00");

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

Me puse el reto de hacer esta práctica lo más completa posible, no sólo quedandome con HTML y JavaScript, sino también utilizar CSS, me tomó varios días, pero estoy orgulloso del resultado, les comparto mi aporte esperando que le sea de ayuda a alguien, Saludos.

https://atm-01-7layf.ondigitalocean.app/

https://github.com/JorgeR-Code/ATM-01.git

Así quedó el mío:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cajero</title>
    <link rel="stylesheet" href="cajero.css">
</head>
<body>
    <h1>Cajero automático</h1>
    <img src="cajero.gif">

    <div class="inputs">
        <label for="dinero">¿Cuánto dinero quieres?</label>
        <span class="signo_dinero">$</span>
        <input type="number" id="dinero">
    </div>
    <div class="contenedor_boton">
        <input type="button" value="Extraer" id="boton" class="boton">
    </div>
    <div class="contenedor_billetes" id="contenedor_billetes">

    </div>

    <p class="error" id="error"></p>

    <p class="p_dinero_total" id="p_dinero_total">
        
    </p>

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

Código JS:

//   1. Clase Billete

class Billete
{
    constructor (val, cant, url)
    {
        this.valor = val;
        this.cantidad = cant;
        this.img = new Image();
        this.img.src = url;
    }
    
    mostrar()
    {
        document.getElementById("contenedor_billetes").appendChild(this.img);
    }
}


//   2. Creamos la caja

var caja = [];
caja.push( new Billete (500, 5, "billete500.png") );
caja.push( new Billete (200, 5, "billete200.png") );
caja.push( new Billete (100, 5, "billete100.png") );
caja.push( new Billete (50, 5, "billete50.png") );
caja.push( new Billete (20, 5, "billete20.png") );
caja.push( new Billete (10, 5, "billete10.png") );
caja.push( new Billete (5, 5, "billete5.png") );


//   3. Calculamos el total de la caja

var total_caja = 0;

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


//   4. Creamos el array de la entrega y de lo acumulado

var entrega = [];
var acumulado = [];
var suma_acumulado;
var suma_entregada;


//   5. Variables para ecuaciones

var solicitado;   //El dinero que solicita el usuario
var dinero;   //El dinero que solicita el usuario, pero que va disminuyendo conforme se va entregando
var div;
var acumulado;   //Suma total de lo extraído
var papeles;   //Cuántos papeles de cada billete se entregan


//   6. Variables de los párrafos a rellenar

var p_error = document.getElementById("error");
var p_total = document.getElementById("p_dinero_total");


//   7. Evento

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


//   8. Función

function entregarDinero()
{
    
    //   1. Variables que toman valor ahora para que se reinicien con cada click

    solicitado = parseInt( document.getElementById("dinero").value );   //Este no disminuye con el paso del ciclo
    dinero = parseInt( document.getElementById("dinero").value );   //Este sí

    suma_acumulado = 0;
    suma_entregada = 0;

    p_error.innerHTML = "";   //Se limpia el párrafo de error


    //   2. Repasamos cada grupo de billetes de la caja para ir haciendo cálculos y asignando cada cosa en su lugar

    for (b of caja)
    {

        if (dinero > 0)   //El código se ejecutará hasta que dinero disminuya hasta 0
        {

            //   2.1 Vamos definiendo cuántos papeles entregamos de cada valor, empezando por los billetes más caros hasta los más baratos

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


            //   2.2. Definimos cuántos son los papeles a entregar por cada billete. Si div es mayor que la cantidad disponible, los papeles serán toda la cantidad disponible. Si div es menor, los papeles serán div.

            if (div <= b.cantidad)
            {
                papeles = div;
            }
            else
            {
                papeles = b.cantidad;
            }


            //   2.3. Empezamos a rellenar el array de Entrega, definiendo cuántos papeles entregaremos: 1 cada vez que iteremos hasta llegar a la cantidad de papeles que corresponden

            for (var i_entrega = 0; i_entrega < papeles; i_entrega++)
            {
                entrega.push( new Billete (b.valor, 1, b.img.src) );
            }


            //   2.4. Hacemos el descuento de la caja

            b.cantidad = b.cantidad - papeles;


            //   2.5. Recalculamos el dinero previo a la próxima iteración

            dinero = dinero - (b.valor * papeles);


            //   2.6. Guardamos lo que se va generando en 2 lugares: el array de acumulado y la var de suma_entregada

            acumulado.push( b.valor * papeles );
            suma_entregada = suma_entregada + ( b.valor * papeles )

        }
    

    //   3. Vamos mostrando los billetes del array Entrega

        for (var eb of entrega)
        {
            eb.mostrar();
        }

    }


    //   4. Error del dinero no extraible (cuando nos piden un número que no es múltiplo de 5)

    let sobrante_NoExtraible = solicitado - suma_entregada;  //Calculamos el sobrante no extraible

    if ( sobrante_NoExtraible !== 0 )
    {
        p_error.innerHTML = 
        "No podemos darte exactamente el dinero total que solicitas.<br/> <strong>Faltan entregarte $" + sobrante_NoExtraible + ", que no podemos darte porque no existen los billetes de $" + sobrante_NoExtraible + ". </strong><br/> Así que debes solicitar un importe que sea múltiplo de 5.";
    }


    //   5. Sumamos todo el acumulado
    
    for (var a of acumulado)
    {
        suma_acumulado = suma_acumulado + a;
    }


    //   6. Mostramos el total sacado

    p_total.innerHTML = "Dinero extraido: <span><strong>$" + suma_acumulado + "</strong></span>";

    if (suma_acumulado >= total_caja)   //Cuando llegamos al máximo
    {
        p_total.innerHTML = "Dinero extraido: <span><strong>$" + total_caja + "</strong></span> <br/> Has vaciado el cajero";
        p_error.innerHTML = "";
    }

}

Código CSS:

body
{
    background: rgb(33,33,33);
    background: radial-gradient(circle, rgba(33,33,33,1) 35%, rgba(0,0,0,1) 100%); 
    color: #fff;
    font-family: gotham;
    text-align: center;
}

h1
{
    color: #25c143;
    font-size: 45px;
    margin-bottom: 50px;
}

.inputs
{
    font-weight: lighter;
    margin: 30px 0;
    font-size: 20px;
}

.inputs input
{
    padding: 15px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #25c143;
    color: #25c143;
    font-size: 30px;
    text-align: center;
    width: 150px;
}

.inputs input:focus{
    border: none;
}

/* Chrome, Safari, Edge, Opera */
.inputs input::-webkit-outer-spin-button,
.inputs input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.inputs input[type=number] {
  -moz-appearance: textfield;
}

.signo_dinero
{
    color: #25c143;
    font-size: 30px;
    margin-left: 20px;
    font-weight: normal;
}

.boton
{
    background: #25c143;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 20px;
    margin-bottom: 20px;
}

.boton:hover
{
    cursor: pointer;
    font-size: 15px;
    background: #58dd72;
    transition: 1s all ease;
}

.contenedor_billetes
{
    max-width: 80%;
    display: flex;
    justify-content: center;
    margin: 30px auto;
    flex-wrap: wrap;
}

.contenedor_billetes img
{
    max-width: 125px;
    margin: 10px;
}

.error
{
    font-weight: lighter;
    color: #ff5454;
    font-size: 20px;
    line-height: 40px;
    width: 100%;
}

.p_dinero_total
{
    font-size: 30px;
}

.p_dinero_total span
{
    color: #58dd72;
}

Los billetes que dibujé:







El desafió estuvo chevre




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);

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 += "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);
}

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();
<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="Borrar" id="borrar"/>
    </p>
    <p id="resultado">
    </p>
    <script src ="cajero.js">
    </script>
</body>
</html>> 
<class Billete
{
    constructor(v, c, d)
    {
        this.imagen = new Image();
        this.denominacion = d;
        this.valor = v;
        this.cantidad = c;
        this.imagen.src = imagenes[this.denominacion];
    }
}

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;
                if (bi.valor == 100)
                {
                    caja[0].cantidad -=  papeles;
                }
                if (bi.valor == 50)
                {
                    caja[1].cantidad -=  papeles;
                }
                if (bi.valor == 20)
                {
                    caja[2].cantidad -=  papeles;
                }
                if (bi.valor == 10)
                {
                    caja[3].cantidad -=  papeles;
                }
            }
            else
            {
                papeles = div;
                if (bi.valor == 100)
                {
                    caja[0].cantidad -=  papeles;
                }
                if (bi.valor == 50)
                {
                    caja[1].cantidad -=  papeles;
                }
                if (bi.valor == 20)
                {
                    caja[2].cantidad -=  papeles;
                }
                if (bi.valor == 10)
                {
                    caja[3].cantidad -=  papeles;
                }
            }
            entregado.push(new Billete(bi.valor, papeles,bi.denominacion));
            dinero -= (bi.valor * papeles);
            
        }
        
    }
    if (dinero > 0)
    {       
        resultado.innerHTML = "No te puedo dar esa cantidad :(";
    }
    else
    {
        for(var e of entregado)
        {
            if(e.cantidad > 0)
            {
                resultado.appendChild(e.imagen);
                resultado.innerHTML += "<br />" + e.cantidad + "billetes de $" + e.valor + "<br />";
            }
        }
    }
}
function limpiar()
{
    resultado.innerHTML = "";
}
var imagenes = [];
imagenes["Cien"] = "billete100.png";
imagenes["Cincuenta"] = "billete50.png";
imagenes["Veinte"] = "billete20.png";
imagenes["Diez"] = "billete10.png";

var caja = [];
var entregado = [];
caja.push(new Billete(100, 10, "Cien"));
caja.push(new Billete(50, 10, "Cincuenta"));
caja.push(new Billete(20, 5, "Veinte"));
caja.push(new Billete(10, 10, "Diez"));

//console.log(caja);

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

var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener ("click", entregarDinero);
var l = document.getElementById("borrar");
l.addEventListener("click", limpiar);> 
<ar imagenes =[];
imagenes[50]='vaca.png';
imagenes[20]='pollo.png';
imagenes[10]='cerdo.png';

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

  }
}

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);
    }else{
      entregado.push(new Billete(bi.valor,0));
    }
  }

  if(caja[0].valor ==50)
  {
    caja[0].cantidad = caja[0].cantidad - entregado[0].cantidad;
  }
  console.log ("DISP 50: "+caja[0].cantidad);

  if(caja[1].valor ==20)
  {
    caja[1].cantidad = caja[1].cantidad - entregado[1].cantidad;
  }
  console.log ("DISP 20: "+caja[1].cantidad);

  if(caja[2].valor ==10)
  {
    caja[2].cantidad = caja[2].cantidad - entregado[2].cantidad;
  }
  console.log ("DISP 10: "+caja[2].cantidad);

  if (dinero>0)
  {

    resultado.innerHTML='intente otro monto';
  }
  else
  {
    for (var e of entregado)
    {
      if (e.cantidad > 0)
      {

      resultado.innerHTML=resultado.innerHTML + e.cantidad + ' billetes de $ '+ e.valor +'<img src='+imagenes[e.valor]+'>'+ '<br />';
      }
    }
  }

  console.log(entregado);
  entregado=[];
}

var cantidad50 = 30;
var cantidad20 = 20;
var cantidad10 = 20;

var caja = [];
var entregado =[];
caja.push(new Billete(50, cantidad50) );
caja.push(new Billete(20, cantidad20) );
caja.push(new Billete(10, cantidad10) );

var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById('resultado');
var b = document.getElementById('extraer');
b.addEventListener('click',entregarDinero)
ar imagenes =[];
imagenes[50]='vaca.png';
imagenes[20]='pollo.png';
imagenes[10]='cerdo.png';

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

  }
}

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);
    }else{
      entregado.push(new Billete(bi.valor,0));
    }
  }

  if(caja[0].valor ==50)
  {
    caja[0].cantidad = caja[0].cantidad - entregado[0].cantidad;
  }
  console.log ("DISP 50: "+caja[0].cantidad);

  if(caja[1].valor ==20)
  {
    caja[1].cantidad = caja[1].cantidad - entregado[1].cantidad;
  }
  console.log ("DISP 20: "+caja[1].cantidad);

  if(caja[2].valor ==10)
  {
    caja[2].cantidad = caja[2].cantidad - entregado[2].cantidad;
  }
  console.log ("DISP 10: "+caja[2].cantidad);

  if (dinero>0)
  {

    resultado.innerHTML='intente otro monto';
  }
  else
  {
    for (var e of entregado)
    {
      if (e.cantidad > 0)
      {

      resultado.innerHTML=resultado.innerHTML + e.cantidad + ' billetes de $ '+ e.valor +'<img src='+imagenes[e.valor]+'>'+ '<br />';
      }
    }
  }

  console.log(entregado);
  entregado=[];
}

var cantidad50 = 30;
var cantidad20 = 20;
var cantidad10 = 20;

var caja = [];
var entregado =[];
caja.push(new Billete(50, cantidad50) );
caja.push(new Billete(20, cantidad20) );
caja.push(new Billete(10, cantidad10) );

var dinero = 0;
var div = 0;
var papeles = 0;
var resultado = document.getElementById('resultado');
var b = document.getElementById('extraer');
b.addEventListener('click',entregarDinero)
> 

Buenas tardes, no he podido relalizar el cargue de las imagenes, me aparece este error:
![](

el que me pueda guiar un poco genial.

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

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

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

Les dejo estas imágenes que hice de billetes.






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);

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

Este proyecto si me volara la cabeza

Es difícil a veces, siempre me molesta cuando debo tomar el código de alguien más porque siento que no aprendí y no di lo suficiente de mí, ni siquiera pude ser algo tan sencillo como lo de las imágenes, simplemente no pude y lo intenté, espero poder avanzar mucho, me siento muy emocionado con esto pero se me van los ánimos cada vez que no puedo hacer el código por mi propia cuenta y debo acudir a otros, sin embargo son de muy gran ayuda, le deseo éxito a los demás…

Capturas de varias situaciones en el programa

Me costo un poco y tuve alguito de ayuda pero creo que la programación me gusta demasiado :3

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cajero automatico</title>
</head>
<body>
    <p>
        <img src="cajero.png.gif"/>
    </p>
    <p>
        <input type="number" id="dinero" />
        <input type="button" value="Extraer" id="extraer" />
    </p>
    <!-- MUESTRA LO QUE TIENE EL CAJERO INICIALMENTE -->
    <div style="display: flex;">
        <div class="saldo-inicial-contenedor" style="margin-right: 15px;">
            <h4>Saldo Inicial</h4>
            <p id="saldoInicial"></p>
        </div>
        <div class="dinero-disponible-contenedor">
            <h4>Dinero disponible</h4>
            <!-- MUESTRA EL SALDO DEL CAJERO DESPUÉS DE X TRANSACCIONES -->
            <p id="dineroDisponible"></p>
        </div>
    </div>
    <p id="resultado">

    </p>
    <script src="dinero.js">

    </script>
</body>
</html>> 



<var imagenes = [];
//nombre[posicion]
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];
}
}

/**

  • Esta función se encarga de devolver la cantidad y valor de los billetes.
    */
    function entregarDinero() {
    entregados =[];
    resultado.innerHTML = “”;
    var t = document.getElementById(“dinero”);
    dinero = parseInt(t.value);
    for (var bi of cajas) {
    if (dinero > 0) {
    div = Math.floor(dinero / bi.valor);

         if (div > bi.cantidad) {
             papeles = bi.cantidad;
         }
         else {
             papeles = div;
         }
         var billetesEntregar = new Billete(bi.valor, papeles);
         entregados.push(billetesEntregar); //inserto los billetes que voy a entregar
         dinero = dinero - (bi.valor * papeles);
     }
    

    }
    if (dinero > 0) {
    resultado.innerHTML = “soy un cajero pobre”;
    }
    else { //100 -> 2 billetes de 50.
    resultado.innerHTML=" "
    for (var e of entregados) {
    if (e.cantidad > 0) {
    resultado.innerHTML += e.cantidad + “billetes de $” + e.valor + “<br />”;
    for (var i = 0; i < e.cantidad; i++) {
    resultado.innerHTML += “<img src=” + e.imagen.src + “><br/>”;
    }
    var posicionCajero = cajas.findIndex(nuevaVariable => nuevaVariable.valor == e.valor); //permite buscar una posición en base a una condición
    var total = cajas[posicionCajero].cantidad - e.cantidad;

             cajas[posicionCajero].cantidad = total;
         }
     }
     obtenerDineroDisponible();
    

    }
    }

function obtenerDineroDisponible() {
dineroDisponible.innerHTML = “”;
for (var t of cajas) {
dineroDisponible.innerHTML += t.cantidad + “Billetes de $” + t.valor + “<br/>”;
}
}

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

/**

  • Cajas =
    1. valor = 50 , cant = 30
    1. valor = 20 , cant = 200
    1. valor = 10 , cant = 200
      */
      console.log(“dinero en cajero”, cajas)

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

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

var saldoInicial = document.getElementById(“saldoInicial”);
var dineroDisponible = document.getElementById(“dineroDisponible”);

for (var t of cajas) {
saldoInicial.innerHTML += t.cantidad + “Billetes de $” + t.valor + “<br/>”;
}


Buen día. Aquí les dejo mi aporte. Espero les sirva como guía y agradecería sus comentarios y aportes. 😃
.

Código Javascript

//archivo cajero.js-------------------------------------------------------
//CLASE BILLETE-----------------------------------------------------------
class Billete
{
	constructor(v, c)
	{
		this.bImg = new Image();
		this.valor = v;
		this.cantidad = c;
		this.bImg.src = denominaciones[this.valor];
	}
}
//------------------------------------------------------------------------

//VARIABLES NECESARIAS----------------------------------------------------
var caja = [], entregado = [], denominaciones = [];
var dinero, div, papeles, cuantoSacar, plataEnCajero = 0, yaRetirado = 0;
//------------------------------------------------------------------------

//TRAER ELEMENTOS DEL HTML AL JAVASCRIPT----------------------------------
var res = document.getElementById("resultado");
var boton = document.getElementById("retirar");
var cajaTexto = document.getElementById("dinero");
var plataLabel = document.getElementById("platadelcajero");
var retiradoLabel = document.getElementById("yaretiradodelcajero");
var transacciones = document.getElementById("Columna2");
//------------------------------------------------------------------------

//EVENTOS LISTENER--------------------------------------------------------
window.addEventListener("load", actualizarCajero);
boton.addEventListener("click", procesarTransaccion);
cajaTexto.addEventListener("change", leerCajaDeTexto);
//------------------------------------------------------------------------

//ESTABLECIENDO LOS BILLETES QUE UTILIZAREMOS-----------------------------
denominaciones["100"] = "100.png";
denominaciones["50"] = "50.png";
denominaciones["20"] = "20.png";
denominaciones["10"] = "10.png";
//------------------------------------------------------------------------

//AGREGANDO A LA CAJA LOS BILLETES Y SUS CANTIDADES-----------------------
caja.push(new Billete(100, 20));
caja.push(new Billete(50, 20));
caja.push(new Billete(20, 20));
caja.push(new Billete(10, 20));
//------------------------------------------------------------------------

//DETERMINA CUANTO DINERO TIENE EL CAJERO---------------------------------
for (var billete of caja)
{
	plataEnCajero += billete.valor * billete.cantidad;
}
//------------------------------------------------------------------------

//REEMPLAZA LOS VALORES EN EL HTML DEL DINERO DISPONIBLE Y RETIRADO-------
function actualizarCajero()
{
	plataLabel.innerHTML = "<h1>" + plataEnCajero + "</h1>";
	retiradoLabel.innerHTML = "<h1>" + yaRetirado + "</h1>";
}
//------------------------------------------------------------------------

//GUARDA EN UNA VARIABLE EL CONTENIDO DE LA CAJA DE TEXTO-----------------
function leerCajaDeTexto()
{
	cuantoSacar = parseInt(cajaTexto.value);
	return cuantoSacar;
}
//------------------------------------------------------------------------

//ENTRA A LA FUNCIÓN AL PRESIONAR EL BOTÓN "RETIRAR"---------------------
function procesarTransaccion()
{
	entregado = [];
	res.innerHTML = "";
	dinero = leerCajaDeTexto();

	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));
		dinero -= (bi.valor * papeles);
	}

	if (dinero == 0)
	{
		entregarDinero(cuantoSacar);
	}
	else
	{
		if (cuantoSacar > plataEnCajero)
		{
			res.innerHTML = "Fondos insuficientes para retirar <strong>" + cuantoSacar + "</strong> euros.";
		}
		else if(cuantoSacar < plataEnCajero)
		{
			res.innerHTML = "No podemos entregarte <strong>" + cuantoSacar +"</strong> euros por falta de algunas denominaciones.";
		}
		else
		{
			res.innerHTML = "Por favor ingresa cuánto dinero deseas retirar.";
		}
	}
	cajaTexto.value = "";
}
//------------------------------------------------------------------------

//ENTRA A LA FUNCIÓN SOLO SI HAY DINERO PARA ENTREGAR---------------------
function entregarDinero(cant)
{
	res.innerHTML += "Haz retirado <strong>" + cant + "</strong> euros <br /><br />";
	transacciones.innerHTML += "<label>Retiro por: <strong>" + cant + " euros.</strong></label><br />"

	for (var e of entregado)
	{
		if(e.cantidad != 0)
		{
			for (var i = 0 ; i < e.cantidad ; i++)
			{
				res.innerHTML += "<img src=" + e.bImg.src + " />";
			}
			//res.innerHTML += "(" + e.cantidad +"x" + e.valor +")<br/>";
		}
		plataEnCajero -= e.valor * e.cantidad;
		yaRetirado += e.valor * e.cantidad;
	}

	for(var i = 0 ; i < caja.length ; i++)
	{
		caja[i].cantidad -= entregado[i].cantidad;
	}
	actualizarCajero();
}
//------------------------------------------------------------------------

Código HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cajero Automátio</title>
</head>
<body>

	<!--Contenido del body-->
	<table cellpadding="20,0">
	  <tr>
	    <td id="Columna1">
	    	<img src="cajero.gif"/>
			<p align="center">
				<input type="number" id="dinero" placeholder="cantidad a retirar..." />
				<input type="button" value="Retirar" id="retirar" />
			</p>
	    </td>
	    <td>
	    	Dinero disponible:
	    	<p id="platadelcajero"></p>
			Retirado hasta ahora:
			<p id="yaretiradodelcajero"></p>
	    </td>
	    <td id="Columna2" padding="20">
	    	<p id="retirado"><strong>Transacciones: </strong></p>
	    </td>
	  </tr>
	</table>
	<p id="resultado"></p>

	<!--Javascript-->
	<script type="text/javascript" src="cajero.js"></script>
	
</body>
</html> 

javascript

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

var caja = [new Billetes(50, 5), new Billetes(20, 10), new Billetes(10, 8)];
var ruta_imagenes_billetes = ["img_50.png","img_20.png","img_10.png"]

var dinero, papeles, div;
var entregado = [];
var dinero_entregado = document.getElementById('entregado_id');

document.querySelector('input[type=button]').addEventListener('click', function () {
    dinero = document.getElementById("dinero").value;
    entregar();
})

function entregar() {
    for (const 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 Billetes(b.valor, papeles));
            dinero -= b.valor * papeles;
            b.cantidad -= papeles;
            console.log(caja);
        }
    }
    if(dinero > 0)
    {
        dinero_entregado.innerText = 'no tengo esa cantidad'
    } else {
        
        for (const d in entregado) {
            if (entregado[d].cantidad) {
                debugger;
                var img_billete = document.createElement('img');
                img_billete.src = ruta_imagenes_billetes[d];
                img_billete.width = '150';
                dinero_entregado.appendChild(img_billete);
                dinero_entregado.innerHTML += ' Cantidad: ' + entregado[d].cantidad +'<br/>';
            }

        }
        entregado = [];
        dinero_entregado.appendChild(document.createElement('hr'));
    }




}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>ATM</title>
</head>
<body>
    <p><img src="./cajero.webp" alt="cajero"></p>
    <p><input type="number" id="dinero">
    <input type="button"  value="Extraer">
    </p>

    <div id="entregado_id"></div>


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

🚀 Ya que estoy haciendo el curso de Git y GitHub y este a la vez, decidi poner todo lo aprendido en práctica y ademas de terminar este proyecto, subirlo a GitHub… Aqui les dejo el link al repositorio 👇
.
🔺 https://github.com/gabrielsouki/Cajero_Automatico 🔻
.
Cualquier feedback se agradece bastante!! 😉

Llevo aproximadamente 12 horas en esta parte del curso, desarrollando el codigo e implementando los desafios propuestos; no pude detener mi necesidad de ver los aportes de mis otros compañeros, ya que me estaba frustrando significativamente, porque aun no comprendo algunos factores lógicos de la programación, por ejemplo, no tenía muy claro en qué momento afectaba declarar una variable por fuera o no de una función, ahora, después de mucho mover ciertas variables que me generaban errores, logro entenderlo un poco más, creando una estructura mental de este lenguaje, aún me encuentro implementando el estado actual y restante de los billetes después de un extracto… el punto es que, Freddy todo el tiempo dice “el 90 % del tiempo lo pasarás leyendo código de otros programadores y el 10 % restante escribiéndolo” y es muy real, creo que no tardé ni 30 minutos escribiendo el código que me permitió imprimir el dibujo de mis billetes después de que comprendí cómo la función “for( var _ of _ )” y su ubicación en el código cumplía un papel importante.
Ahora solo me resta seguir leyendo y leyendo, tal vez alguien en mi misma situación lea esto, tal vez creías que lo mejor era no leer los aportes, pero para algunas personas el conocimiento mejor desarrollado no son solo nuestras experiencia sino las de aquellos que nos rodean también.

Después de estar todo un día programando, puedo decir que si valió la pena el terminarlo. Todavía le faltan ajustes, pero eso lo perfeccionarlo después con el paso del tiempo para implementarle mas cosas. Aquí les dejo mi humilde aporte :


Pagina del cajero

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">

    <title>Cajero Automatico</title>

    <link href="diseño.css" rel="stylesheet" />

  </head>

  <body>

    <div class="titulo">

      <h1><strong>Bienvenido Usuario..</strong></h1>

    </div>

    <div class="texto_Indicaciones">

      <h2>Favor ingresa la cantidad que deseas retirar</h2>

    </div>

    <p>

      <img src="Cajero.png"/>

    </p>

    <div class="boton_retirar">

       <input type="image" src="boton_retirar.png" id="botonRetirar" />

    </div>

    <div class="Ingresar_cantidad">

      <input type="num" id="Ingreso_de_valor" size="60"/>

    </div>

     <div class="boton_borrar">

       <input type="image" src="boton_borrar.png" id="botonBorrar" />

     </div>

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

    </body>

  </body>

</html>

diseño en css

body{

   background-color: #686868;

}

.boton_retirar {

  position: relative;
  top: -450px;
  right: -880px;
}

.boton_borrar {

  position: relative;
  top: -700px;
  right: -1109px;

}

.titulo {

  position: relative;
  top: 465px;
  right: -820px;


}

.Ingresar_cantidad {

  position:relative;
  top: -665px;
  right: -650px;


}

.texto_Indicaciones {

  position:relative;
  top: 608px;
  right: -745px;

}

Archivo java script

var recibir_Nombre = prompt ("Cual es tu nombre");

class FuncionamientosdelosArrays {

  constructor(valor,cantidad) {

   this.valorMonetario = valor;
   this.cantidad_de_billetes = cantidad;

  }

}

function estructura_del_cajero () {

  var registro_de_ingreso_deseado = document.getElementById("Ingreso_de_valor");

  dinero_deseado_por_usuario = parseInt(registro_de_ingreso_deseado.value);

  var resultado = dinero_deseado_por_usuario;

  for  (var contador of almacen_de_ingresos) {

    if (dinero_deseado_por_usuario>0) {

      division = Math.floor (dinero_deseado_por_usuario/contador.valorMonetario);

      if (division>contador.cantidad_de_billetes) {

      ingreso_de_billetes = contador.cantidad_de_billetes;

    }else {

    ingreso_de_billetes = division;

    }

    imprimir_dinero.push(new FuncionamientosdelosArrays (contador.valorMonetario,ingreso_de_billetes));
    dinero_deseado_por_usuario = dinero_deseado_por_usuario- (contador.valorMonetario*ingreso_de_billetes);
    contador.cantidad_de_billetes -= ingreso_de_billetes;

   }

  }

  if(dinero_deseado_por_usuario>0) {

    alert("Lo sentimos este cajero no cuenta con el capital deseado para el retiro solictado " +
    "favor de ingresar una nueva cantidad o de lo contrario vuelve despues para verificar si el dinero deseado se encuentra disponible \n"+
    " !gracias¡");

  }else {

    document.write ("Banco BBBAA <br />"+"Transaccion *****-***-***-08  <br /> "+"Nombre: "+recibir_Nombre+"<br />"+"Cajero : CE9 <br /> "+
    "Tarjeta: xxxx-xxx-xx-08 <br />"+"Fecha: 7/noviembre/2021 <br /> "+ "RFC: MELM8305281H0 <br /> "+"Retiro de capital : <br /><br />");

    for (var contar of imprimir_dinero) {

      if (contar.cantidad_de_billetes>0) {

        document.write( contar.cantidad_de_billetes+"billetes de $"+contar.valorMonetario+"<br />");

      }



   }

     document.write("<br /> ------------------------ <br />"+"Total: "+"$"+resultado);
}

}

var almacen_de_ingresos = [];
var imprimir_dinero = [];
var division,ingreso_de_billetes, dinero_deseado_por_usuario;

almacen_de_ingresos.push(new FuncionamientosdelosArrays (50,30));
almacen_de_ingresos.push(new FuncionamientosdelosArrays (20,20));
almacen_de_ingresos.push(new FuncionamientosdelosArrays (10,20));

var boton = document.getElementById("botonRetirar");

boton.addEventListener("click", estructura_del_cajero);

Espero y pueda ser útil a alguien un saludo 😃

Fue muy entretenido, aunque un poco complejo realizar este programa.
Mi problema principal fue lograr que pudieran aparecer las imágenes de forma ordenada, una sobre otra, y si repetían denominación, que saliera la cantidad de billetes necesarios, puesto que, con el edit aprendido en clase, no pude, así que, apliqué en el JS, el llamado de una imágen en HTML, así solucioné este problema. Por otro lado, estaba el saber el dinero que le quedaba al cajero, lo cuál realicé con una función interna en la clase, así podía saber cuanto se retiraba y restarlo, para obtener un nuevo valor de dinero disponible en el banco: Lo anterior, con el fin de poder retirar nuevamente dinero hasta vaciar el cajero, es decir, para que el mismo usuario pudiera retirar más de una vez dinero. Por último un valor de reset, para que un nuevo usuario haga su retiro, reiniciando el valor inicial de dinero en caja. Si alguien tiene una duda (Yo tuve muchas), me escribe para poder colaborarles.

Código en HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> ATM </title>
    <style type="text/css">
      body /* comentarios en ccs con /* apertura y en orden inverso para el cierre*/
      {
        background-color: black; /* color del fundo */
        text-align: center; /* alineacion del texto: centro*/
      }
      p
      {
        color: white; /* color de las letras de los párrafos*/
        background-color: gray; /* color del fondo de los párrafos*/
        font-size: 16px; /* tamaño de las letras*/
        font-family: monospace; /* tipo de fuente */
        border: 0.5px solid #0019FF; /* tamaño estilo y color del borde del párrafo*/
      }
    </style>
  </head>
  <body>
    <p id="encabezado"></p>
    <p>  This ATM only handles bills of: <p/>
    <p id="billetes"></p>
    <p> <!-- una imagen por si sola es como si fuera un texto, una buena práctica es ponerla en un contenedor, tal cuál, como un párrafo -->
      <img src="cajero.gif" /> <!-- insertar una imágen en el HTML -->
    </p>
    <p>
      <input type="number" id="dinero"/> <!-- inserta la caja de texto-->
      <input type="button" value="Extraer" id="extraer"/> <!-- inserta el botón -->

    </p>
    <p id ="resultado"> </p>
    <input type="button" value="Reload" id="recargar"/>
    <script src="atmClass.js"> </script>
    <script src="atm.js"> </script>
  </body>
</html>

Código JS (clase):

class Bills
{
  constructor(b, a, d) // valor billete, candidad de billetes y nombre del billete.
  {
    this.value = b; // valor
    this.amount = a; // cantidad de billetes de este valor.
    this.image = new Image();
    this.image.src = d;
  }
  show() // muesta los billetes entregados en forma de imágen, además del valor de cada billete.
  {
    result.innerHTML += "<br/>"  + this.amount + " bills  of  $" +  this.value + "<br />";
    for (var i=0; i<this.amount; i++) // dibuja billetes hasta que i sea igual a la cantidad de billetes en la clase, almacenada en e,
    {
      result.innerHTML +=  "   " + '<img src="' + this.image.src + '" width="140" height="60" />';
    }
  }
  sum() // suma el valor de los billetes entregados, para que sean restados afuera y hallar el valor restante de dinero en el banco.
  {
    var s = this.value * this.amount;
    return s;
    console.log(s);
  }
}

Código en JS(Main):

var money;
var box = []; // dónde se almacenaran los billetes y sus características.
var moneyDelivered = []; // almacenará el dinero entregado.
var totalMoney = 0; // variable reservada para el conteo total de dinero en caja.

box.push(new Bills(100,1,"cienD.jpg"));
box.push(new Bills(50,3,"cincuentaD.jpg"));
box.push(new Bills(20,2,"veinteD.jpg"));
box.push(new Bills(10,2,"diezD.jpg"));
box.push(new Bills(5,4,"cincoD.jpg"));

var textBills = document.getElementById("billetes"); // trae el elemento parrafo por el ID billetes.
var headText = document.getElementById("encabezado");
var result = document.getElementById("resultado"); // trae caja de texto.
var butt = document.getElementById("extraer"); // trae el boton.
var reloadButton = document.getElementById("recargar");

var totalDelivered = 0; // almacenará la suatoria de los billetes entregados.

butt.addEventListener("click", getMoney); // escucha al boton.
reloadButton.addEventListener("click", reloadf);

moneyInBox(totalMoney);

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

function moneyInBox(totalMoney) // MUestra la cantidad de dinero en el cajero y que billetes maneja el mismo.
{
  var addBills = totalMoney; // dinero total.
  var whatbills = []; // que billetes hay ?
  for (m of box)
  {
    addBills = addBills + (m.value * m.amount);
    whatbills.push(m.value);
  }
  textBills.innerHTML = whatbills;
  headText.innerHTML = "The total money of the ATM is: $" + addBills + "<br/> Please, enter a smaller amount.";
  /* la etiqueta: objeto.innerHTML permite escribir en un párrafo del html, sin interponerse sobre algun otro
  objeto del código, es como una nueva ramificación del código, independizar el texto del resto.*/
  return addBills; // retorna el total del dinero, sumando el producto de los atributos en cada posicion del array
}

function getMoney() // genera el proceso de retiro del dinero.
{
  textBox = document.getElementById("dinero"); //recibe el valor de la caja de texto

  if(textBox.value == 0) // si este valor es 0, no es valido.
  {
    result.innerHTML = ("<strong> The entered value is incorrect </strong>");
  }
  if (textBox.value > moneyInBox(totalMoney)) // si el valor es mayor al dinero que hay en caja, no es valido.
  {
    result.innerHTML = "<strong> The entered value is higher than allowed </strong>";
  }
  else
  {
    money = parseInt(textBox.value);
    for (b of box) // para todas los objetos de box, " un arreglo con b objetos internos":
    {

      if (money > 0)
      {
        div = Math.floor(money/b.value); // bill's amount of the value(50,20,10,...) that money is divided

        if(div <= b.amount)
        {
          var amountBill = div; // bill's amount used.
        }
        else {
          amountBill = b.amount;
        }
        moneyDelivered.push(new Bills(b.value, amountBill, b.image.src)); // ingresa valores al arreglo que entregará
        money = money - (b.value * amountBill); // resta el valor de los billetes extraidos, este es el nuevo dinero a entregar.

      }
    }
    if (money > 0) // luego de iterar en todos los billetes, si falta dinero por cubrir, quiere decir que el valor escogido, no puede ser cubierto po denominación de los billetes.
    {
      result.innerHTML = ("<br/><strong> The entered value is invalid </strong>");
    }
    else
    { // si no es así, simplemente muestra todos los billetes que entregará.
      for (var e of moneyDelivered)
      {
        if (e.amount!=0) // con esto, se omite que aparezca algun billete en 0, de alguna denominación que no fue usada.
        {
          e.show(); // ejecuta show, de la clase Bill(); mostrando una imágenes del billete contenido en la clase.
          var suma = e.sum();
          totalDelivered = suma + totalDelivered; // suma la cantidad y el valor de los billetes entregados.
        }
      }
    }
      moneyRest = moneyInBox(totalMoney) - totalDelivered; // calcula el dinero restante en el cajero.
      headText.innerHTML = "The total money of the ATM is: $" + moneyRest + "<br/> Please, enter a smaller amount.";
      moneyDelivered = []; // reinicia los valores de dinero entregado, para hacer un nuevo retiro.
      if (moneyRest == 0)
      {
        alert("¡Atm empty!. \n No more transactions");
        headText.innerHTML = "Funds depleted";
      }
  }
}
 

Esta es la forma más compacta que logré hacer, sin imágenes pero funcionando como debe y de forma sencilla, espero le sirva a alguien :3

class Billete
{
  constructor(v,c)
  {
    this.imagen = new Image();
    this.valor = v;
    this.cantidad = c;
    this.imagen.src = imagenes[this.valor];
  }
}
function limpiarcuadro() {
  resultado.innerHTML = "";
}
function entregarDinero()
{
  var entregado = [];
  resultado.innerHTML = "";
  var t = document.getElementById("dinero");
  dinero = parseInt(t.value);
  for (var bi in caja)
  {
    if (dinero > 0)
    {
      div = Math.floor(dinero / caja[bi].valor);
      if (div> caja[bi].cantidad)
      {
        papeles = caja[bi].cantidad;
      }
      else
      {
        papeles = div;
      }
      entregado.push(new Billete(caja[bi].valor, papeles));
      dinero -= (caja[bi].valor * papeles);
    }
  }
  if (dinero > 0)
  {
    //resultado.innerHTML = "";
    resultado.innerHTML = "Soy un cajero malo, no puedo darte esa cantidad";
  }
  if (dinero == 0)
  {
    resultado.innerHTML = "";
    for (var e of entregado)
    {
      if (e.cantidad > 0)
      {
        //resultado.innerHTML = "<hr />";
        resultado.innerHTML += "<br />" + e.cantidad + " billete de $ " + e.valor +"<br />";
        for (var i = 1; i <= e.cantidad; i++)
        {
        resultado.appendChild(e.imagen)
        resultado.innerHTML += "<br />"
        }
        for (ca in caja)
        {
          if (e.valor == caja[ca].valor)
          {
            caja[ca].cantidad = caja[ca].cantidad - e.cantidad;
            console.log("indiceCAJA: "+ca);
            console.log("Valor: "+e.valor);
            console.log("cantidad: "+e.cantidad);
            console.log("Nueva Caja: billete de "+caja[ca].valor+ " saldo: "+ caja[ca].cantidad);
          }
        }
      }
    }
    resultado.innerHTML += "<hr />";

  }

}
var imagenes = [];
imagenes[100] = "quetz100.bmp";
imagenes[50] = "quetz50.bmp";
imagenes[20] = "quetz20.bmp";
imagenes[10] = "quetz10.bmp";
imagenes[5] = "quetz5.bmp";
var caja = [];

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,5));

console.log(caja);


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

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

Mi código de JavaScript es:

var imagenes = [];
imagenes["5"] = "5.webp";
imagenes["10"] = "10.webp";
imagenes["20"] = "20.webp";
imagenes["50"] = "50.webp";
imagenes["100"] = "100.webp";

var cantidad = document.getElementById("cantidad");
cantidad.addEventListener("click", sobrante)

class Billete{
    constructor(v,c){
        this.valor = v;
        this.cantidad = c;
        this.imagen = new Image();
        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 -= (bi.valor * papeles);
        }
    }

    if(dinero > 0){
        resultado.innerHTML = "Soy un cajero muy malo y no puedo darte eso porque no se me da la gana güarro"
    }else{
        for(var e of entregado){
            if(e.cantidad > 0){
                resultado.innerHTML += e.cantidad + " billetes de $" + e.valor + "<img src=" + e.imagen.src + " />" + "<br>"
            }
        }
    }
}

var caja = [];
var entregado = [];
caja.push(new Billete(100, 5));
caja.push(new Billete(50, 20));
caja.push(new Billete(20, 30));
caja.push(new Billete(10, 10));
caja.push(new Billete(5, 3));
var dinero;
var div = 0;
var papeles = 0;

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

function sobrante(){
    var total = 0;
    for(var bi of caja){
        total += bi.valor * bi.cantidad;
    }
    alert("La cantidad sobrante es: " + total)
}

Creo que soy el único que entro virgen virgen a este curso, por lo visto la mayoria ya tienen idea de programar. Que divertido saber que estoy empezando con el mejor.

<img src = “cajero.gif” />

Luego de casi una semana y media, logre terminar el cajero con todos los requerimientos y añadiendole cositas como billetes que se mueven, una barra de navegación para un futuro y otras cositas

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ó


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”;
}

}

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>

JS

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

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

Que dificil ! 😦


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);

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);

![](

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.

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

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

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