Primero copiamos el html y los estilos del menu principal de la clase 6.
Pero nos damos cuenta que hay mucho html repetido asi que lo haremos con JavaScript. Primero borraremos las card, solo dejaremos una comentada para hacer referencia.
En nuestro archivo de JavaScript crearemos una lista que simulen los elementos de una tienda por mientras, ya que despues lo ideal sería llamarlos desde una API.
const productList = [];
for (let i = 0; i < 20; i++) {
productList.push({
name: "Bike",
price: "120",
image:
"<https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940>",
});
}
Ahora crearemos una funcion para maquetar todos los productos que hayan en el array.
-
Nuestra función recibe un array e iterará por cada uno de los productos.
function renderProduct(arr) { for (product of arr) { const productCard = document.createElement("div"); } } -
Utilizando los métodos que aprendimos en clases anteriores iremos dandole forma al productCard.
function renderProduct(arr) { for (product of arr) { const productCard = document.createElement("div"); productCard.classList.add("product-card"); const img = document.createElement("img"); img.setAttribute("src", product.image); const productInfo = document.createElement("div"); productInfo.classList.add("product-info"); const divInfo = document.createElement("div"); const productPrice = document.createElement("p"); productPrice.innerText = "$" + product.price; const productName = document.createElement("p"); productName.innerText = product.name; const figureInfo = document.createElement("figure"); const iconCart = document.createElement("img"); iconCart.setAttribute("src", "../assets/icons/bt_add_to_cart.svg"); figureInfo.appendChild(iconCart); divInfo.append(productPrice, productName); productInfo.append(divInfo, figureInfo); productCard.append(img, productInfo); cardsContainer.appendChild(productCard); } }<aside> 💡 No olvidar traer al elemento cardsContainer.
</aside>
<aside> 💡 Si pensaste en usar innerHTML para ahorrarte trabajo debes saber que no es recomendable por razones de seguridad.
</aside>
-
Paraa finalizar ejecutamos la función pasandole la lista de productos.
renderProduct(productList);