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.