Estoy intentando hacer las mismas cards con diferente información, pero para diferentes secciones html, no se si se entiende, logro crear las cards pero el problema es que cuando entro al for, se me agregan las todas las cards a las 2 secciones, lo que yo quiero es que las cards guardadas en cardsBurgasArray
se guarden en la sección cardBurgas
y las cards guaradas en cardsExtrasArray
se guarden en la sección cardExtras
.
Puedo hacerlo por separado pero sería repetir código.
El código js que tengo es este:
/* funcion para agregar la info a las cards dinamicamente */
function cardsInfo(img, nombre, descripcion) {
this.img = `img/${img}.webp`;
this.nombre = nombre;
this.descripcion = descripcion;
/* genero precios random: */
let precio = Math.round(Math.random() * 700 + 100);
this.precio = `$${precio}`;
/* asigno id random por ahora, para pruebas, esas id van a servir para agrgar el producto al carrito */
let id = Math.round(Math.random() * 1000);
this.id = `${id}`;
};
/* creamos el contenido de las cards: */
const papasFritas = new cardsInfo("papas", "Papas Fritas", "Papas fritas con salsa especial de la casa.");
const nachos = new cardsInfo("nachos", "Nachos", "Nachos con salsa acida, barbacoa, cheddar y verdeo.");
const chocloFrito = new cardsInfo("choclo", "Choclo Frito", "Choclo frito con salsa especial de la casa.");
const burga1 = new cardsInfo("burga", "Burga 1", "burga con salsa especial de la casa.");
const burga2 = new cardsInfo("burga", "Burga 2", "burga con salsa especial de la casa.");
const burga3 = new cardsInfo("burga", "Burga 3", "burga con salsa especial de la casa.");
/* guardamos el contenido de cada card en un array */
let cardsBurgasArray = [burga1, burga2, burga3];
let cardsExtrasArray = [papasFritas, nachos, chocloFrito];
/* guardamos en otro array los array anteriores por si tenemos mas secciones html
que contengan cards: */
let cardsContainer = [cardsBurgasArray, cardsExtrasArray];
/* guardamos en variables los contenedores padre de las cards: */
const cardBurgas = document.querySelector(".card__container-burgas");
const cardExtras = document.querySelector(".card__container-extras");
/* hasta acá funciona todo bien, el problema es cuando entro al for, se me agregan las todas las cards a las 2 secciones, lo que yo quiero es que las cards guardadas en cardsBurgasArray se guarden en la seccion cardBurgas y las ars guaradas rn arsxtrasArray se guarden en la seccion cardExtras
puedo hacerlo por separado pero seria repetir codigo.. aiuda! */
/* creamos dinamicamente las cards: */
let htmlCode = "";
for (i = 0; i <= cardsContainer.length; i++) {
for (cards in cardsContainer[i]) {
let card = cardsContainer[i][cards];
let img = card["img"];
let nombre = card["nombre"];
let descripcion = card["descripcion"];
let precio = card["precio"];
let id = card["id"];
htmlCode += `
<div class="card">
<img class="card__img" src="${img}" alt="">
<h3 class="card__h3">${nombre}</h3>
<p class="card__content">${descripcion}<span class="card__precio">${precio}</span></p>
<button class="card__button" id="${id}">Agregar al carrito</button>
</div>
`;
};
}
/* y por ultimo las agregamos al documento html: */
cardBurgas.innerHTML = htmlCode;
cardExtras.innerHTML = htmlCode;
Y este es el HTML:
<section class="burgas" id="lasBurgas">
<article>
<div>
<h2 class="neon">- Las Burgas -</h2>
<div class="card__container-burgas">
</div>
</article>
</section>
<section id="extras">
<article class="extras">
<h2 class="neon">- Extras -</h2>
<div class="card__container-extras">
</div>
</article>
</section>