2

estoy aprendiendo programación básica a través de un curso y un reto del mismo es un cajero en el cual el ususario ingresa una cifra y el cajero devuelve el numero de billetes de cada denominación cuya suma da igual a la cifra solicitada. El codigo da el resultado en texto, pero necesito que de el resultado en imagenes de los billetes, mostrando las cantidades de los mismos.

Aqui esta el html:

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

y el codigo js:

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

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

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

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

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

  }

  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 += e.cantidad + " billetes de $" + e.valor + "<br />";
        }

      }
    }
  }

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



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

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

He intentado hacerlo creando otro archivo .js con un array de las imagenes, pero no se como vincularlo para que muestre el billete segun el resultado del primer js o si puedo hacerlo en el mismo archivo. Por favor ayuda, soy un noob, Gracias :).

2 respuestas 2

3

Podrías tener un contenedor al cual vas a añadirle las imágenes.
Las imágenes, por supuesto, debes tenerlas junto con los assets de tu página o bien que sean URLs.
Vamos por partes.

El HTML no tiene apenas nada, sólo necesitamos un div donde poder contener las imágenes.

<body>
    <img src="cajero.gif" />
    <p>
        <input type="number" id="dinero" />
        <input type="button" value="Extraer" id="extraer"/>
    </p>

    <div id="container">
        <!-- Aquí se van a mostrar las imágenes -->
    </div>
</body>

La estructura que queremos para renderizar nuestras imágenes será esta. Se puede hacer de muchas formas, esta es la que me ha parecido conveniente.

<div id="container">
    <!-- El contenedor para cada imagen -->
    <div class="image-content">
        <div>4</div> <!-- Cantidad -->
        <img src="url_a_la_imagen"/> <!-- Imagen -->
    </div>

    <!-- Esta estructura se repite para cada 
        elemento del resultado -->
</div>

En el código de Javascript, crearemos un objeto que contenga todos los links a las imágenes. La clave del objeto será el tipo de billete y el valor su link a la imagen en cada caso.
También guardaremos nuestro contenedor.

const images = {
    10: `billete_10.png` ,
    20: `billete_20.png`
    // Todos los tipos de billete con sus imágenes
};

const container = document.querySelector(`#container`);

A continuación, necesitaremos todos los métodos para poder renderizar las imágenes, basándonos en el resultado del algoritmo.

La función display recorrerá el resultado y creará un elemento de HTML por cada elemento del resultado.

// Muestra todo el array de billetes
const display = result => {
    for (element of result)
        displayElement(element);
}

La función displayElement creará la estructura antes descrita para cada uno de los elementos.
Creará el contenedor del elemento, le añadirá la clase de estilos y, a ese contenedor, le añadirá el elemento para la cantidad y la imagen.
Una vez esté el contenedor creado, se añadirá al global.

// Muestra la imagen del billete
// con su cantidad
const displayElement = element => {
    const content = document.createElement(`div`);
    // Le añadimos una clase, para no tener que
    // añadir estilos en JS
    content.classList.add(`image-content`);

    // Creamos los dos elementos a mostrar
    const quantity = createQuantityTag(element);
    const img = createImage(element);

    // Añadimos los elementos al elemento principal
    content.appendChild(quantity);
    content.appendChild(img);

    // Añadimos el elemento principal al contenedor global
    container.appendChild(content);
}

Ahora, nos falta por definir las funciones createQuantityTag y createImage. Que crearán los elementos que vayan dentro del contenedor.

const createQuantityTag = element => {
    const tag = document.createElement(`div`);
    tag.innerHTML = element.cantidad;
    return tag;
}

const createImage = element => {
    const img = document.createElement(`img`);
    // Sacamos la URL/Link a la imagen
    // en función del valor del billete
    const url = images[element.valor];
    img.src = url;
    return img;
}

La función createQuantityTag sólo crea un div y le pone como texto el número con la cantidad.
La función createImage creará el elemento img y le añadirá el atributo src (source) con el link de la imagen que corresponda al tipo de billete.

Con todos estos elementos, ya tenemos la renderización de las imágenes en función del resultado del algoritmo.
Opcionalmente, se le podrá dar estilos tanto a los contenedores como a las imágenes, en un CSS.

Aquí dejo el ejemplo entero funcionando.

const images = {
    10: `https://upload.wikimedia.org/wikipedia/commons/a/a8/EUR_10_obverse_%282014_issue%29.png` ,
    20: `https://upload.wikimedia.org/wikipedia/commons/b/bb/The_Europa_series_20_%E2%82%AC_obverse_side.jpg`
};

const container = document.querySelector(`#container`);

// Aplicas tu lógica
// Como resultado tendremos un array de billete-cantidad
const result = [
    { valor: 10, cantidad: 8 },
    { valor: 20, cantidad: 3 }
];

const display = result => {
    for (element of result)
        displayElement(element);
}

const displayElement = element => {
    const content = document.createElement(`div`);
    content.classList.add(`image-content`);
    
    const quantity = createQuantityTag(element);
    const img = createImage(element);

    content.appendChild(quantity);
    content.appendChild(img);

    container.appendChild(content);
}

const createQuantityTag = element => {
    const tag = document.createElement(`div`);
    tag.innerHTML = element.cantidad;
    return tag;
}

const createImage = element => {
    const img = document.createElement(`img`);
    const url = images[element.valor];
    img.src = url;
    return img;
}

// La llamada a la función para emular el resultado
display(result);
#container {
    height: 100%;

    display: flex;
    flex-wrap: wrap;
}

#container .image-content {
    width: 250px;
    height: 150px;

    margin-right: 25px;

    position: relative;
}

#container .image-content div {
    position: absolute;
    width: 30px;
    height: 30px;

    font-size: 1.5em;
    text-align: center;

    color: rgb(255, 255, 255);
    background-color: rgb(0, 29, 39);
    border-radius: 50%;

    transform: translate(-25%, -25%);
}

#container .image-content img {
    width: 100%;
    height: 100%;
}
<p>
  <input type="number" id="dinero" />
  <input type="button" value="Extraer" id="extraer"/>
</p>

<div id="container">
</div>

Espero que sirva.

2

Para mostrar las imágenes en resultado puedes añadirlas desde el js igual que añades el texto con el valor de los billetes. En este caso necesitarías tener en tu proyecto en la carpeta de imágenes las imágenes de los billetes guardadas con un nombre relacionado con su valor, por ejemplo, para el billete de 100 sería billete100.jpg, y utilizamos ese valor para construir la ruta a la imagen.

Antes del bucle que rellena resultado he puesto esta línea para evitar que repita todos los resultados anteriores cada vez que se introduce un nuevo valor.

resultado.innerHTML = "";

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

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

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

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

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

  }

  if (dinero > 0)
  {
    resultado.innerHTML = "Soy un cajero malo, he sido malo y no puedo darte esa cantidad :(";
  }
  else
    {
    resultado.innerHTML = "";
      for(var e of entregado)
      {
        if(e.cantidad > 0)
        {
          resultado.innerHTML += e.cantidad + " billetes de $" + e.valor + "<br />";
          resultado.innerHTML += "<img src='ruta-a-img/billete" + e.valor + ".jpg'>" + "<br />";
          console.log("img added ruta-a-img/billete" + e.valor + ".jpg");
        }

      }
    }
  }

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



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

var resultado = document.getElementById("resultado");
var b = document.getElementById("extraer");
b.addEventListener("click", entregarDinero);
<p>
      <img src="cajero.gif" />
    </p>
    <p>
      <input type="number" id="dinero" />
      <input type="button" value="Extraer" id="extraer"/>
    </p>
    <p id="resultado"></p>

2
  • ya tengo las imagenes de los billetes en la misma carpeta, pero quiero que me muestre los billetes y ademas cuantos de esos billetes expulsa dependiendo de lo que le pide el usuario, osea que
    – kilex
    Commented el 13 may. 2020 a las 1:19
  • @kilex ahora mismo muestra el número de billetes en texto, si quieres el número en texto sólo hay que usar e.valor, si lo que quieres es tantas imágenes de cada tipo de billete como número de billetes hay, añade las imágenes dentro un bucle for(n=0; n<e.valor; n++) {...}
    – Carmen
    Commented el 13 may. 2020 a las 7:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.