Lista de productos: HTML a partir de arrays

Con Element.append() podemos agregar varios nodos y texto mientras que con Element.appendChild() solo podemos agregar un nodo.

productInfoDiv.append(productPrice, productName)

Intente hacer un poco el código más reducido y llegó a esta conclusión, espero que les sirva:

Termino quedando asi:

Bueno, a rogarle a los dioses del internet… 😂😂😂

Si les da flojera buscar mas productos aquí les dejo la mía.

productList.push ({
    name:'Bike',
    price: 12700,
    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
});
productList.push ({
    name:'Bicycle helmet',
    price: 1200,
    image: 'https://assets.specialized.com/i/specialized/60821-104_HLMT_ALIGN-II-HLMT-MIPS-CE-BLK-BLKREFL-S-M_HERO?bg=rgb(241,241,241)&w=1600&h=900&fmt=auto'
});
productList.push ({
    name:'Bicycle helmet',
    price: 1600,
    image: 'https://m.media-amazon.com/images/I/61eExL-rIAL._AC_SL1001_.jpg'
});
productList.push ({
    name:'Bicycle helmet',
    price: 1500,
    image: 'https://assets.specialized.com/i/specialized/60822-140_HLMT_CHAMONIX-HLMT-MIPS-CE-MRN-M-L_HERO?bg=rgb(241,241,241)&w=1600&h=900&fmt=auto'
});
productList.push ({
    name:'Seat',
    price: 300,
    image: 'https://m.media-amazon.com/images/I/61e+sZ9rgNL._AC_SL1500_.jpg'
});
productList.push ({
    name:'Tennis Montain Bike',
    price: 2200,
    image: 'https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/8ea578f6c07847fca2d0ac85011d7f1f_9366/Tenis_para_Mountain_Bike_Five_Ten_Freerider_Negro_FW2835_01_standard.jpg'
});
productList.push ({
    name:'Sunglasses',
    price: 800,
    image: 'https://cdn.siroko.com/s/files/1/1220/6874/products/gafas-siroko-tech-k3s-london-lateral/1200x/crop_center.jpg?v=1635209602'
});
productList.push ({
    name:'Sunglasses',
    price: 600,
    image: 'https://cdn.siroko.com/s/files/1/1220/6874/products/siroko-tech-k3s-clearfog-lente-antiniebla-frontal/1200x/crop_center.jpg?v=1635209603'
});
productList.push ({
    name:'Bicycle seat bag',
    price: 876,
    image: 'https://m.media-amazon.com/images/I/81k2Gmal+VL._AC_SL1500_.jpg'
}); 

Bato, cuando aprendi HTML y CSS me sentia un crack. Ya casi listo para empezar a trabajar. En estas clases de JS tengo que poner muchisima atención y aún no le entiendo del todo jaja, pero confío en que Platzi me convierta en un experto.

Todo pinta bien por ahora 🙋🏻‍♂️

Les comparto esto, a mi me ayuda pensarlo así y quizás a alguno que le guste mantener el orden para organizar el maquetado también.

Lo que hago aquí es desglosar el elemento que será maquetado por JS en distintos niveles, el ejemplo de la clase tiene pocos elementos, pero la real utilidad sería para elementos más grandes.

Lo siguiente es comenzar desde los bloques amarillos de la derecha hacia la izquierda.

Es decir: La 4ta columna que trae los 2 P y 1 IMG

const productPrice = document.createElement('p');
productPrice.innerText = '$' + product.price;
const productName = document.createElement('p');
productName.innerText = product.name;
    
const productImgAddToCart = document.createElement('img');
productImgAddToCart.setAttribute('src','./icons/bt_add_to_cart.svg');

Después paso a la 3era columna (DIV que contiene los 2 P y FIGURE que contiene IMG)
(Nótese que aquí los incluyo en orden correspondiente, DIV encima de los 2 P y FIGURE encima de IMG. Además ya aparecen los APPEND, en el gráfico inicial son las flechas)

const productInfoDiv = document.createElement('div');
const productPrice = document.createElement('p');
productPrice.innerText = '$' + product.price;
const productName = document.createElement('p');
productName.innerText = product.name;
productInfoDiv.append(productPrice,productName);
    
const productFigure = document.createElement('figure');
const productImgAddToCart = document.createElement('img');
productImgAddToCart.setAttribute('src','./icons/bt_add_to_cart.svg');
productFigure.appendChild(productImgAddToCart);

De la misma forma continúo con la 2da y 1era columna, además del enlace final a cards-container
Y resulta lo siguiente:

const productCard = document.createElement('div');
productCard.classList.add('product-card');
productCard.append(productImage,productInfo);
    
const productImage = document.createElement('img');
productImage.setAttribute('src',product.image);
    
const productInfo = document.createElement('div');
productInfo.classList.add('product-info');
productInfo.append(productInfoDiv,productFigure);
    
const productInfoDiv = document.createElement('div');
const productPrice = document.createElement('p');
productPrice.innerText = '$' + product.price;
const productName = document.createElement('p');
productName.innerText = product.name;
productInfoDiv.append(productPrice,productName);
    
const productFigure = document.createElement('figure');
const productImgAddToCart = document.createElement('img');
productImgAddToCart.setAttribute('src','./icons/bt_add_to_cart.svg');
productFigure.appendChild(productImgAddToCart);

cards.appendChild(productCard);

El último paso es modificar el orden de los APPEND ya que deben estar luego de la inicialización del elemento, es decir productCard.append(productImage,productInfo); debe estar después de inicializar productInfo

Y con eso, listo: Una construcción fácil y sin errores

Un pequeno aporte ya que no sabia como comentar lineas seleccionadas les dejo una captura para los que usan VSCODE

“Mucha suerte la vas a necesitar XD”. El profe es muy epico.

que buena clase, que bueno que se dieron cuenta de que faltaba este curso

Aquí está mi código, cambié el for of, por un argumento de array, se llama .map, también recorre todos los objetos de un array. Aunque no estoy segura de si necesita estar dentro de una función se los dejo también :3

productList.map(function (product){ 
  const productCard = document.createElement('div');
  productCard.classList.add('product-card');

  const productImg = document.createElement('img');
  productImg.setAttribute('src', product.image);

  const productInfo = document.createElement('div');
  productInfo.classList.add('product-info');  

  const productInfoDiv = document.createElement('div');

  const productPrice = document.createElement('p');
  productPrice.innerText = '$' + product.price;
  const productName = document.createElement('p');
  productName.innerText = product.name;

  productInfoDiv.appendChild(productPrice);
  productInfoDiv.appendChild(productName);

  const productInfoFigure = document.createElement('figure');
  const productImgCart = document.createElement('img');
  productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');

  productInfoFigure.appendChild(productImgCart);

  productInfo.appendChild(productInfoDiv);
  productInfo.appendChild(productInfoFigure);

  productCard.appendChild(productImg);
  productCard.appendChild(productInfo);

  cardsContainer.appendChild(productCard);
});

Les comparto mis apuntes con comentarios, creo que solo le falta a estos cursos que cada linea sea comentada para que sea mas chido
Comentar las lineas de código para saber que hace cada cosa es una buena practica para los desarrolladores nuevos

QUE CLASEE QUE CLASEEEE LA VI COMO 3 VECES PERO QUE CLASEE

Esta clase vale cada segundo en oro. Brutal!

Es intenso maquetar desde JS, igual forma pienso que esta práctica fue genial. Hay muchas formas de hacer lo mismo!

Pueden crear una clase y crear un metodo deploy(), lo que hara este metodo es es que cada vez que creen un producto y le apliquen el metodo deploy(), este mismo producto se añadira a nuestro contenedor de las cards en html.

class product {
    constructor({
        name,
        id,
        price,
        img
    }){
        this.name = name,
        this.id= id,
        this.price= price,
        this.img= img
    }
 ///metodo deploy()
    deploy(){
        let cardHtml=`
        <img src="${this.img}" alt="">
            <div class="product-info">
            <div>
                <p>$${this.price}</p>
                <p>${this.name}</p>
            </div>
            <figure>
                <img src="./icons/bt_add_to_cart.svg"   alt="">
            </figure>
            </div>
        `
        const parentChildsCards= document.querySelector('.cards-container');
        let cardInfoProduct= document.createElement('div');
        cardInfoProduct.classList.add('product-card');
        cardInfoProduct.innerHTML= cardHtml;
        parentChildsCards.insertAdjacentElement('beforeend',cardInfoProduct);
    }
}

crean cualquier producto con la clase y una vez creado se le aplica el metodo.

// creamos un nuevo producto de la instancia product
const portatil= new product({
        name:'Portatil Hp Pavilion',
        id: 6841563,
        price: 1200,
        img: 'https://th.bing.com/th/id/R.64e3e17f84c592313289c38103125892?rik=F26je4v5XKOAPA&pid=ImgRaw&r=0'
    });

  portatil.deploy();
///producto subido a nuestra pagina

Lo que hice fue crear una clase

las clases son como plantillas, por lo que nos podrían ayudar con los productos

ya que tiene muchos beneficios, como:

• reutilizar código
• código más legible
• mayor escalado
• modularizamos mejor
• podemos agregarle funcionalidades únicas, dependiendo de lo que queremos que haga, como su propio renderizado

class productGenerator{
    constructor({
        src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        name ='Productaso',
        price=69,
    }){
        this.name=name;
        this.price=price;
        this.src=src;
    }
    render(place){
        const cardsContainer = document.createElement('div');
        cardsContainer.setAttribute('class', 'cards-container');
        const productCard = document.createElement("div");
        productCard.setAttribute('class', 'product-card');
        const productImg = document.createElement('img');
        productImg.setAttribute('src',this.src);
        productImg.setAttribute('alt',`${this.name}!!, que buen producto`);
        const productInfo = document.createElement('div');
        productInfo.setAttribute('class', 'product-info');
        const productInfoDetail = document.createElement('div');
        const productPrice = document.createElement('p');
        productPrice.innerText=`$${this.price}.00`
        const productName = document.createElement('p');
        productName.innerText=`${this.name}`
        const productIconContainer= document.createElement('figure');
        const productIcon = document.createElement('img');
        productIcon.setAttribute('src', "./icons/bt_add_to_cart.svg");
        // empaquetando todos los elementos
        productIconContainer.appendChild(productIcon);
        productInfoDetail.append(productPrice, productName);
        //...
        productInfo.append(productInfoDetail,productIconContainer);
        //..
        productCard.append(productImg,productInfo);
        place.appendChild(productCard);
    }
}

• podemos crearlo con valores por default o agregar los valores que queramos

En este caso cree una funcion para que se renderice cuando la ejecutamos

• Esta función también tiene un parámetro, que es, el lugar donde queremos renderizar, para asi poder reutilizarlo aun más
• podemos llamarlo con o sin valores

const firstProduct=new productGenerator({});
const lastProduct=new productGenerator({name:'Ultimo',price:1000});
firstProduct.render(productsContainer)
lastProduct.render(productsContainer)

De igual manera, podríamos guardar cada uno de esos objetos que creamos en un array, como vimos en la clase

también podríamos haber hecho el push directo

products.push(new productGenerator({})
products.push(new productGenerator({name:'Ultimo',price:1000}))

Y obtendríamos el mismo resultado en pantalla

Tip 2. El método append() recibe no solo un nodo, sino todos los nodos que necesitemos. Lo usamos así:

element.append(node, node, node);

Que clase tan increíble!

Estaba a punto de morirme de un derrame de enojo cuando me dí cuenta que en lugar de:

“for (product of productList)”

decía:

“for (product in productList)”

me aparecía todo undefined.

Antes del error:

después de arreglar el error:

🚀 For of devuelve el elemento de la lista que se esté iterando
For in devuelve el index del cada elemento (de 0 a n)

🚀 Si usamos innerHTML es más directo el proceso, pero no se recomienda hacerlo así, por razones de seguridad y buenas prácticas. 💚

Fuentes:

• Curso de manipulación del DOM
• developer.mozilla

Yo separé el código del array en otro archivo y lo llame desdeel html para que el archivo anterior lo pueda ver o escuchar
Yo separé el código del array

const productList = [
    {
        name: 'Bike',
        price: 120,
        image:'url-imsge',
    },
    {
        name: 'Pantalla',
        price: 220,
        image: 'url-imsge',
      },
      {
        name: 'Compu',
        price: 620,
        image: 'url-imsge',
      }
];

    <script src="./product.js"></script>
    <script src="./main.js"></script>

yo lo hice de otra manera insertando directamente el html desde javascript y queda mas corto y facil de entender

/* aqui llamamos la funcion */

mostrar_productos(list_productos);



function mostrar_productos(productos){

    let html_code = '';


    for (producto of productos){

        html_code += `

        <div class="card-product">
            <img src="${producto.image}" alt="${producto.nombre}">
                        
            <div class="product-info">
            
                <div>
                
                    <p>$${producto.precio}</p>
                    <p>${producto.nombre}</p>
                    
                </div>
                <figure>
                    <img src="icons/bt_add_to_cart.svg" alt="">
                </figure>
                </div>
        </div>
        `;

    }

      document.querySelector('.container-products').innerHTML = html_code;
}

Hice mi codigo usando un api publica y gratis, no es de productos pero sirve para el ejercicio, a la funcion GetLoadProducts recibe como parametro una funcion que en mi caso es la que se encargara de recibir los datos y pintar en el dom las tarjetas dentro del contenedor .cards-container

Wow! Para mí que soy un completo novato en manipular el DOM, esta clase vale oro! Estoy muy contento por lo que he aprendido, Juan lo ha explicado súper bien.
Puede parecer algo engorroso todo ese código, pero después vale la pena ver todo cargado dinámicamente!

Pueden utilizar https://picsum/photos/width/height para tener imágenes random.
Ejemplo: https://picsum.photos/300/200 -> Esto generará una imagen de 300x200. Espero les sirva.

En el curso de manipulación del DOM no recomiendan modificar mucho la página por temas de recursos, una mejor manera que creo, sería crear un nuevo array y agregarle los elementos HTML ya creados y luego agregarlos ala página todos a la vez

function renderProducts() {
const cardsContainer = document.querySelector('.cards-container');
let toRender = []

for (product of arr) {
  /* 
  ...
  Todo el ciclo for
  */
  productCard.append(productImg, productInfo);

  // Agrego las cards al nuevo array creado al principio.
  toRender.push(productCard);
  } // Fin del for
 
cardsContainer.append(...toRender);
/* Con esta instrucción pasamos todo el array a la vez modificando una sola vez en el DOM */

} // Fin función

Yo al ver que nuevamente eliminamos y agregamos y volvimos a eliminar las cards-container.

Para quienes quieren un reto un poco mas interesante, intente realizarlo consumiento la APi de Platzi, lo hice de la siguiente manera usando fetch: (acepto sugerencias ❤️)

let container = document.querySelector('.cards-container');
const API = 'https://api.escuelajs.co/api/v1';

function fetchData(url) {
    return fetch(url);
}

fetchData(`${API}/products`)
    .then(response => response.json())
    .then(productos => {
        const fragment = document.createDocumentFragment();
        let card = '';
        for (let i = 0; i < 150; i++) {
            card += `<div class="product-card">
            <img src="${productos[i].images[0]}" alt="">
                <div class="product-info">
                        <div>
                            <p>$ ${productos[i].price}</p>
                            <p>${productos[i].title}</p>
                        </div>
                    <figure>
                        <img src="../icons/bt_add_to_cart.svg" alt="">
                    </figure>
                </div>
            </div>`
        }
        fragment.append(card);
        container.innerHTML = fragment.textContent
    })
    .catch(error => console.error(error))
    .finally(() => console.log('Finalizado'))

El fragment es para insertar los elementos de un solo golpe para evitar que el navegador este sobreescribiendo todo.

Muy buena clase Profe!!!

¿Qué tal se ve? Modifique un poco el ancho de los contenedores para que se viera la imagen completa
![](

)

Me encantó el resultado 😄

Hola!! Para quienes deseen contar con la lista de productos como se ve acontinuación… aquí se las dejo:

let productList = [];
productList.push({
    name: "Computer",
    img: "https://images.pexels.com/photos/930530/pexels-photo-930530.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 750,
})
productList.push({
    name: "Headphones",
    img: "https://images.pexels.com/photos/610945/pexels-photo-610945.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 150,
})
productList.push({
    name: "Phone",
    img: "https://images.pexels.com/photos/4195325/pexels-photo-4195325.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 500,
})
productList.push({
    name: "Watch",
    img: "https://images.pexels.com/photos/2078268/pexels-photo-2078268.jpeg",
    price: 150,
})
productList.push({
    name: "Production Kit",
    img: "https://images.pexels.com/photos/1447264/pexels-photo-1447264.jpeg",
    price: 850,
})
productList.push({
    name: "Setup",
    img: "https://images.pexels.com/photos/4930018/pexels-photo-4930018.jpeg",
    price: 1380,
})
productList.push({
    name: "Microphone",
    img: "https://images.pexels.com/photos/3962990/pexels-photo-3962990.jpeg",
    price: 180,
})
productList.push({
    name: "Citizen Watch",
    img: "https://images.pexels.com/photos/592815/pexels-photo-592815.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 450,
})
productList.push({
    name: "Cap",
    img: "https://images.pexels.com/photos/1878821/pexels-photo-1878821.jpeg",
    price: 99,
})
productList.push({
    name: "Tablet",
    img: "https://images.pexels.com/photos/2647376/pexels-photo-2647376.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 390,
})
productList.push({
    name: "Agenda",
    img: "https://images.pexels.com/photos/163187/coffee-tablet-headphones-work-163187.jpeg",
    price: 30,
})
productList.push({
    name: "Notes book",
    img: "https://images.pexels.com/photos/5712452/pexels-photo-5712452.jpeg",
    price: 25,
})
productList.push({
    name: "Book kit",
    img: "https://images.pexels.com/photos/4153146/pexels-photo-4153146.jpeg",
    price: 120,
})
productList.push({
    name: "Glasses",
    img: "https://images.pexels.com/photos/39716/pexels-photo-39716.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    price: 110,
})
productList.push({
    name: "Wallet",
    img: "https://images.pexels.com/photos/12495665/pexels-photo-12495665.jpeg",
    price: 85,
})

Me parecio esta una mejor solucion

for (product of productArray) {
const container = document.createElement('div');

container.innerHTML = `
<img src="${product.img}" alt="">
<div class="product-info">
  <div>
    <p>$${product.price}</p>
    <p>${product.name}</p>
  </div>
  <figure>
    <img src="./icons/bt_add_to_cart.svg" alt="">
  </figure>
</div>
`;
container.classList.add('product-card');

cardsContainer.appendChild(container);

}

Hola amigos! Yo lo hice asi, utilice createRange y createContextualFragment que te deja utilizar html directo y para agregar las variables utilize las comillas para poder utilizar ${product.Variable}. Lo vi en el video de consumir una api en 10 minutos del canal de youtube de platzi!

for(product of productList){
    const productCard = document.createRange().createContextualFragment(/*html*/`
    <div class="product-card">
        <img src="${product.image}" alt="" class="product-img">
        <div class="product-info">
            <div>
                <p>$${product.price}</p>
                <p>${product.name}</p>
            </div>
            <figure>
                <img src="./Platzi Yard Sale/icons/bt_add_to_cart.svg" alt="">
            </figure>
        </div>
    </div>`);

    const cardContainer = document.querySelector('.cards-container');

    cardContainer.append(productCard);
}

???
Creo que deberia de explicar un poco mas detallado y mas lento, porque se supone que este curso es despues de Javascript Basico y estamos aprendiendo a usar el DOM y conciendo estos metodos, me quedo con muchas dudas…

Me esta gustando mucho este curso.
Fue muy buena inversión haber aprovechado el black friday en platzi. 👍

Excelente clase, yo el append lo hice al final para que me quede mas claro el orden en que iba agregando los elementos:

for (product of productList) {
    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 productInfodiv = document.createElement('div');

    const productPrice = document.createElement('p');
    productPrice.innerText = '$'+ product.price;
    const productName = document.createElement('p');
    productName.innerText = product.name;

    const productInfoFigure = document.createElement('figure');
    const productImgCart = document.createElement('img');
    productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');

    // append all
    cardsContainer.append(productCard);
    productCard.append(img, productInfo);
    productInfo.append(productInfodiv, productInfoFigure);
    productInfodiv.append(productPrice, productName);
    productInfoFigure.append(productImgCart);

}

JuanDC me parece un excelente profesor, pero no me gusta o me incomoda un poco las veces que se contradice en el mismo video y me hace enredar muchas veces, es solo una opinión personal, pero se que al final lo lograre.

El mio quedo de esta manera, pero no estoy seguro si usar innerHTML me cause algun problema en un proyecto que salga a produccion,

productList.map(function (product){ 
    const productCard = document.createElement('div');// esta linea esta creando un div de html desde JS
    productCard.classList.add('product-card');// aqui se le asigna una clase css al div anteriormente creado

    cardContainer.appendChild(productCard);// con appendChild estamos diciendole que introduzca el div con la clase "productCard" dentro de un elemento, en este caso otro div, pero con la clase "cardContainer" que es llamado desde el html atravez de su classe con un querySelector (en la linea 51 de esta codigo)
    productCard.innerHTML = (` <!--// estamos insertando codigo HTML con innerHTML en el div con la clase "product-card" que se genero en las dos lineas anteriores-->
    <div class="product-card">
    <img src="${product.img}" alt="">
    <div class="product-info">
      <div>
        <p>$${product.price}</p>
        <p>${product.name}</p>
      </div>
      <figure>
        <img src="./icons/bt_add_to_cart.svg" alt="">
      </figure>
    </div>
  </div>
    `)
});

Les paso mi lista de productos por si les da pereza buscarlos desde cero:

const productList = [
    {
        name: 'Bike',
        price: 120,
        img: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Shelf',
        price: 20,
        img: 'https://images.pexels.com/photos/2062427/pexels-photo-2062427.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Desk',
        price: 100,
        img: 'https://images.pexels.com/photos/1297611/pexels-photo-1297611.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Guitar',
        price: 40,
        img: 'https://images.pexels.com/photos/1624753/pexels-photo-1624753.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Skateboard',
        price: 50,
        img: 'https://images.pexels.com/photos/841369/pexels-photo-841369.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Lamp',
        price: 15,
        img: 'https://images.pexels.com/photos/242827/pexels-photo-242827.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Toys',
        price: 25,
        img: 'https://images.pexels.com/photos/3663060/pexels-photo-3663060.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Chair',
        price: 10,
        img: 'https://images.pexels.com/photos/116910/pexels-photo-116910.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Table',
        price: 20,
        img: 'https://images.pexels.com/photos/279626/pexels-photo-279626.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    },
    {
        name: 'Flower vase',
        price: 15,
        img: 'https://images.pexels.com/photos/269220/pexels-photo-269220.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    }
]

Este video corresponde al capítulo 12 del curso, el que se muestra en el 12 corresponde a este.

El mejor curso que he tenido hasta ahora!!!

jajajaja, Juan es un capo… hace unas semanas hice mi maquetación con html y css , pero la parte interactiva de js es lo que me hacia falta para darle vida, ahora empezaré mi propio reto construyendo mi página con las bases de Juan. !

Aquí les dejo mi página: si tienen alguna sugerencia me encantaria que me comenten

https://github.com/zenjause/El-Club-De-La-Taberna
https://elclubdelataberna.netlify.app/

Me gusta como va el proyecto y jalando el html y css de otros cursos y agregandole el javascript para la practica. Me encanta y es excelente forma de aprender. Una cosa que si me hubiera gustado es de que se estuviera trabajando con GIt a la vez.

Curioso que lo primero que hice al ver todo integrado fue darle un padding top al main container y justo pero justo fue de 30px…
XD La senda del fronted dev

A la hora de dar clic al desktop-menu nos damos cuenta de que es transparente, para tener el fondo blanco agrega un:

.desktop-menu {
  background-color: var(--white);
}

Así me quedó:

Yo tenía una experiencia haciendo una maquetación de elementos HTML con tecnología asp .net framework para luego pasarlas al HTML como se hace en esta clase, pero se me hacía taaan dificil! En realidad era porque no dominaba para nada HTML ni CSS por lo que terminé haciendo muchas malas decisiones y termine borando todo y empezando de 0 jajajja 😄 Todo era para una tarea en la escuela por eso lo decidí reiniciar con un mejor diseño. De hecho desde entonces pensaba que eso era muy malo, pero ahora veo que si se usa! wow y sumado a que ya lo pude hacer! Muy contento. Saludos

La clase es un 10 pero la desincronización del audio le baja puntos 😓

O no se si sere solo yo 😅

Otra forma de hacerlos es a partir de un string, creo que reduce lineas de codigo, aunque presiento que para los cursos futuros puede que como lo explica JuanDC sea la correcta ya que seguramente crearemos esos componentes, por ahora implementé las dos opciones en mi codigo .

//Add productos
    const divContainer = document.querySelector('.cards-container');
    for (product of productList) {
        let htmlStr = `<div class="product-card"> <img src="${product.image}" alt="" class="product-img"> <div class="product-info"> <div> <p>$${product.price}</p> <p>${product.name}</p> </div> <figure> <img src="./icons/bt_add_to_cart.svg" alt=""> </figure> </div> </div>`;
        let divProduct = document.createElement('div');
        divProduct.innerHTML = htmlStr;
        divContainer.append(divProduct);
    }

Tambien me adelanté y agregué estos estilos al navbar para dejarlo fijo

.navbar {
   ...
    position: sticky;
    top: 0px;
    background-color: var(--white);
}

La verdad que la clase esta muy buena, y el profesor excelente pero la verdad que muchos que recien estan aprendiendo se re pierden y aparte que no entienden nada, por que es como que el curso arranca de 0 y despues en otra clase ya inicia al 100, no hay practicas que te dejan para hacer ya sea por la institucion o por el profesor, tampoco mucha teoria de como funciona tal componente, sino fuera que aprendi un poco en otras instituciones la verdad que aqui si estaria re perdido pero deja mucho que desear esta plataforma de platzi

que buen profesor. se siente el amor por enseñar.

A mi se me ocurrió hacerlo de esta manera, en donde llamas a una función para escribir los objetos, con dos tipos de arreglos 😄

var esribirHTML = (imagen,precio,nombres)=>{
    contenedor.innerHTML+= 
    ` <div class="product-card">
<img src="${imagen}" alt="">
<div class="product-info">
  <div>
    <p>$${precio}</p>
    <p>${nombres}</p>
  </div>
  <figure>
    <img src="./icons/bt_add_to_cart.svg" alt="">
  </figure>
</div>
</div>`;
}



for (i = 0; i < lista.length; i++) {
    nombres=lista[i].nombre;
    precio=lista[i].precio;
    imagen=lista[i].imagen;
    esribirHTML(imagen,precio,nombres);
    
}

for(objeto of lista){
    nombress=objeto.nombre;
    precios=objeto.precio;
    images=objeto.imagen;
    esribirHTML(images,precios,nombress);

}

Les dejo un alternativa al for 😄

function renderProducts(array) {
  array.forEach((product) => {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");

    const productImage = document.createElement("img");
    productImage.setAttribute("src", product.image);

    const productInfo = document.createElement("div");
    productInfo.classList.add("product-info");

    const productInfoContent = document.createElement("div");

    const productPrice = document.createElement("p");
    productPrice.textContent = `$${product.price}`;

    const productName = document.createElement("p");
    productName.textContent = product.name;

    productInfoContent.appendChild(productPrice);
    productInfoContent.appendChild(productName);

    const productFigure = document.createElement("figure");

    const productFigureImage = document.createElement("img");
    productFigureImage.setAttribute("src", "./icons/bt_add_to_cart.svg");

    productFigure.appendChild(productFigureImage);

    productInfo.appendChild(productInfoContent);
    productInfo.appendChild(productFigure);

    productCard.appendChild(productImage);
    productCard.appendChild(productInfo);

    const productsContainer = document.querySelector(".cards-container");
    productsContainer.appendChild(productCard);
  });
}

renderProducts(productList);

Cómo cuando le rezas a los dioses del Olimpo ára ver si funciona el códe y sale un error:

Mucho texto como dicen los lolos, yo lo hice utilizando Template HTML, fragment y clone. Te ahorras varias lineas de código, es como el punto intermedio entre createElement e InnerHTML, es seguro y evitas el reflow. Creo que el profe es muy bueno, pero que el curso necesita actualizarse.
Agradecimientos a Bluuweb: https://www.youtube.com/watch?v=bC8Ed2mpewo

HTML:

JS:

Navegador:

“Si tuviera el poder y la potestad… y las ganas” JASJAJAJAJAJ quiero mucho al profe Juan 😄. Transmite buena energía y realmente logra hacer aplicar con su carisma el nunca pares de aprender

Hay alguna manera de optimizar el código que no sea con innerHTML??

Yo lo solucione de esta manera, espero a que alguien le funcione:

const cardsContainer = document.querySelector('.cards-container');
let html = ``;
productList.forEach(product => {
  html = `
   <div class="product-card">
      <img src="${product.image}" alt="">
      <div class="product-info">
        <div>
          <p>${product.price}</p>
          <p>${product.name}</p>
        </div>
        <figure>
          <img src="./icons/bt_add_to_cart.svg" alt="">
        </figure>
      </div>
    </div>
   `;
});
cardsContainer.innerHTML = html; 

Hola! como quería usar el mismo producto y no quería escribirlo varías veces, usé un ciclo for para generarlos.

const productList = [];

for(let i=0; i<12; i++){
    productList.push({
        name: 'bike',
        price: 200,
        image: 'https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
    });
}

Dejo esta opción con .map un poco mas entendible a mi parecer con uan función flecha .

function renderProducts(arr){
    arr.map(articulo=>{
        


        const productCard = document.createElement('div');
        productCard.classList.add('product-card');
      
        // product= {name, price, image} -> product.image
        const productImg = document.createElement('img');
        productImg.setAttribute('src', articulo.image);
      
        const productInfo = document.createElement('div');
        productInfo.classList.add('product-info');
      
        const productInfoDiv = document.createElement('div');
      
        const productPrice = document.createElement('p');
        productPrice.innerText = '$' + articulo.price;
        const productName = document.createElement('p');
        productName.innerText = articulo.name;
      
        productInfoDiv.appendChild(productPrice);
        productInfoDiv.appendChild(productName);
      
        const productInfoFigure = document.createElement('figure');
        const productImgCart = document.createElement('img');
        productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
      
        productInfoFigure.appendChild(productImgCart);
      
        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfoFigure);
      
        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);
      
        cardsContainer.appendChild(productCard);
      }
    
    
    

    )
}

renderProducts(productList);

Se me hizo complicado, Pero aquí los resultados🤓

`

Que feliz me siento del progreso:’)

No olviden comentar us codigo por si en algun futuro quieren mejorar mas aun el proyecto

Y es aquí donde las estructuras de datos comienzan a mostrar su utilidad…

Sin darnos cuenta hemos avanzado demasiado en la implementación de este proyecto. Sin duda ha sido muy interesante ir uniendo todo lo desarrollado con Teff en este curso y como nos vamos enfrentando a ciertos problemas y los vamos resolviendo de a poco a poco. El crear los elementos HTML con JS se me hace algo super interesante y comparto mi avance hasta ahora!
.

Para en un futuro por seguridad si alguien llegase a tener acceso no autorizado a la base de datos y prevenir ejecucion de codigo colocado malicioso no usar nodo.innerText o nodo.textContent, en cambio usar const textoNodo = document.createTextNode(variableTexto) y agregarla al doom con nodo.append(textoNodo) o nodo.appendChild(textoNodo):

Para comentar el codigo seleccionado existe el comando: SHIFT+ ALT+ A.

Ese final tétrico:
.
"Mucha suerte… [susurro:] La vas a necesitar"
Profesor sonríe abiertamente

Así de maravilloso va quedando mi marketplace:

Cómo así que vamos a necesitar suerte? Jajaja

Yo lo trabajé de esta forma más corta y optimizada con el HTML como template, pero el profesor Juan David es muy inteligente, sería bueno conocer la razón por la cual no lo hizo así.

const menuEmail = document.querySelector('.navbar-email'); // evento
const desktopMenu = document.querySelector('.desktop-menu');
const menuBurger = document.querySelector('.menuImgBurger'); // evento
const mobileMenu = document.querySelector('.mobile-menu');
const menuShoppingCart = document.querySelector('.navbar-shopping-cart'); //evento
const aside = document.querySelector('.product-detail');
const cardsContainer = document.querySelector('.cards-container')

// ------
menuEmail.addEventListener('click', () => {
    desktopMenu.classList.toggle('inactive');
});

// -----
menuBurger.addEventListener('click', () => {
    // Relacion con la funcion de abajo
    const isAsideClosed = aside.classList.contains('inactive');

    if(!isAsideClosed){
        aside.classList.add('inactive');
    }

    // ya estaba
    mobileMenu.classList.toggle('inactive');
});

// ------
menuShoppingCart.addEventListener('click', () => {
    // se guarda en una variable
    // Preguntando si el menuMobile esta cerrado
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');

    // menu desktop si esta cerrado    

    // CONDITION
    if(!isMobileMenuClosed){
        mobileMenu.classList.add('inactive');
        desktopMenu.classList.add('inactive');
    }

    aside.classList.toggle('inactive');
});


// PRODUCT LIST
const productList = [];
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',
});

productList.push({
    name: 'TV',
    price: 120,
    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});

productList.push({
    name: 'Ladder',
    price: 120,
    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});

productList.push({
    name: 'Computer',
    price: 120,
    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});

// FUNCION PARA EL EJERCICIO
function renderProducts(arr){
    // insertando los articulos para que se vean y eso se hace recorriendo el array
    for(product of productList){

        // Creamos elemento div
        const productCard = document.createElement('div');
        // a productCard le agregamos una clase
        productCard.classList.add('product-card');

        // crear una imagen
        // product = {name, price, image}
        const productImg = document.createElement('img');
        productImg.setAttribute('src', product.image);

        // 
        const productInfo = document.createElement('div');
        productInfo.classList.add('product-info');

        // 
        const productInfoDiv = document.createElement('div');
        const productPrice = document.createElement('p');
        const productName = document.createElement('p');

        // productPrice.innerText = `$ ${product.price}`;
        productPrice.innerText = '$' + product.price;
        productName.innerText = product.name;

        productInfoDiv.appendChild(productPrice);
        productInfoDiv.appendChild(productName);

        // 
        const productInfoFigure = document.createElement('figure');
        const productImgCart = document.createElement('img');

        productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');

        // ya se han creado pero es hora de insertar el contenido de cada elemento creado
        productInfoFigure.appendChild(productImgCart);

        // 
        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild( productInfoFigure)

        // 
        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);

        // 
        cardsContainer.appendChild(productCard);

    }
}

// llamdno a la funcion
renderProducts(productList);

Compañeros, asegúrense de colocar la etiqueta script antes del cierre de la etiqueta body. Estuve un rato intendando encontrar qué estaba fallando .

        <section class="main-container">
            <div class="cards-container">
            </div>
        </section>
    <script src="./main.js"></script>
</body>

Mi solución

const productList = [];
productList.push({
    name: 'bike',
    price: 120,
    imagen: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
    icon: './icons/bt_add_to_cart.svg'
});
productList.push({
    name: 'Tv vintage',
    price: 2000,
    imagen: 'https://images.pexels.com/photos/704555/pexels-photo-704555.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
    icon: './icons/bt_add_to_cart.svg'
});

Recorremoms el array con el método map y dentro creamos la estructura html para mostrarlo en pantalla.

productList.map(element =>{
    const cards = document.querySelector('.cards-container');
    let productCard = document.createElement('div');
    productCard.classList.add('product-card');
    let producImg = document.createElement('img');
    producImg.src = element.imagen
    let prod_info = document.createElement('div');
    prod_info.classList.add('product-info');
    let divInt = document.createElement('div');
    let text_price = document.createElement('p');
    let text_desc = document.createElement('p');
    let figure = document.createElement('figure');
    let imgIcon = document.createElement('img');
    imgIcon.src = element.icon;
    
    text_price.textContent = element.price;
    text_desc.textContent = element.name;
    
    divInt.appendChild(text_price);
    divInt.appendChild(text_desc);
    figure.appendChild(imgIcon);
    prod_info.appendChild(divInt);
    prod_info.appendChild(figure);
    productCard.append(producImg, prod_info);
    cards.appendChild(productCard);
});

Resultados

Aplicando el aporte de alguien en los comentarios: append() puede recibir más de un parámetro 😄
.

.
Les comparto el arreglo que usé por si les da flojera buscar imágenes 😄
.

const products = [
    {
        name: "Having dinner",
        price: 999,
        src: "https://images.pexels.com/photos/1668860/pexels-photo-1668860.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Sofa brown",
        price: 999,
        src: "https://images.pexels.com/photos/1866149/pexels-photo-1866149.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Pillows kit",
        price: 999,
        src: "https://images.pexels.com/photos/1248583/pexels-photo-1248583.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Living room set",
        price: 999,
        src: "https://images.pexels.com/photos/259580/pexels-photo-259580.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Bookshelf",
        price: 999,
        src: "https://images.pexels.com/photos/683929/pexels-photo-683929.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Gaming chair",
        price: 999,
        src: "https://images.pexels.com/photos/116910/pexels-photo-116910.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Piece of Art",
        price: 999,
        src: "https://images.pexels.com/photos/1067556/pexels-photo-1067556.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Bedroom stack",
        price: 999,
        src: "https://images.pexels.com/photos/6480198/pexels-photo-6480198.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Meeting setup",
        price: 999,
        src: "https://images.pexels.com/photos/273671/pexels-photo-273671.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Piece kit",
        price: 999,
        src: "https://images.pexels.com/photos/2440471/pexels-photo-2440471.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Carpet cool",
        price: 999,
        src: "https://images.pexels.com/photos/3965509/pexels-photo-3965509.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    },
    {
        name: "Office kit",
        price: 999,
        src: "https://images.pexels.com/photos/1957477/pexels-photo-1957477.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    }
]

¡Me cae tan bien!

La tabulación me ayudo a ver la construcción mucho mejor
y no hay que olvidar el texto alternativo para la imagen.
éxitos.!

Un poco más organizado

yo después de investigar un ratillo encontre que a la ventana también le puedes agregar eventos
y tienen un evento llamado load el cual “detecta cuando ya termino de cargar la pagina”

eh hice este codigo:

function setDynamicTestProductsToDOM(productList){
    const divCardsContainer = document.querySelector(".card-container");
    productList.forEach(element => {
        let divProductCard = document.createElement("div");
        divProductCard.classList.add("product-card");  
        let imgProduct=document.createElement("img");
        imgProduct.classList.add("product-img");
        imgProduct.setAttribute("src",element.img);   
        let divProductInfo=document.createElement("div");
        divProductInfo.classList.add("product-info");  
        let divForDetails=document.createElement("div");  
        let pPrice=document.createElement("p");
        pPrice.innerText=element.price;
        let pName=document.createElement("p");
        pName.innerText=element.name;   
        let figure=document.createElement("figure");
        let imgFigure=document.createElement("img");
        imgFigure.setAttribute("src","./Icons/bt_add_to_cart.svg");  
        figure.appendChild(imgFigure);   
        divForDetails.append(pPrice,pName);   
        divProductInfo.append(divForDetails,figure);  
        divProductCard.append(imgProduct,divProductInfo);  
        divCardsContainer.appendChild(divProductCard);
    });
    
}

window.addEventListener("load",execute=>
{
    setDynamicTestProductsToDOM(createDynamicTestProducts());
})

primero cree una función que me genere 10 productos y los meta en un array

luego cree otra que te manipula el dom y que recibe la lista de productos y ambas las mande llamar en el evento load

¡FUNCIONÓ! 😄

Hola, esta fué mi solución:

const cardsContenedor = document.querySelector(’.cards-container’);

productList.map(function(product){
    cardsContenedor.innerHTML+=`<div class="product-card">
    <img src="${product.image}" alt="">
    <div class="product-info">
      <div>
        <p>$${product.price}</p>
        <p>${product.name}</p>
      </div>
      <figure>
        <img src="./icons/bt_add_to_cart.svg" alt="">
      </figure>
    </div>
  </div>`;
});

Esta clase la repetí varias veces porque no entendía, hasta que comencé a hacer las cosas fue que me surgieron dudas puntuales que pude comenzar a resolver.

Recuerden descomentar el :

<div class="cards-container">
       
</div>

Ya yo pase un mal rato por que el codigo no funcionaba y era eso 😅

Interesante el método append(). Con este podemos insertar Nodos a un elemento padre o un DOMString (texto) 😲.
.
Es decir, el siguiente code:

const div = document.createElement('div');
div.innerText = product.price;

.
Lo podemos hacer con un append() de la siguiente manera:

const div = document.createElement('div');
div.append(product.price);

.
😮😮¿increíble no?
.
Nota: Si intentas insertar un DOMString con el método appendChild() obtendrán un error en consola.

En el curso anterior les mostré la página de bonsai que quiero hacer! Acá va quedando!

El final de la clase es genial jaja

for ( of ) for ( in )

Creating functions in order to be used with different data

me puse el reto de practicar con algo propio y lo pude comprender mucho más

------------JAVASCRIPT

// TARJETA DE PRODUCTOS
/*
<div class="product-cards">
    <img class="product-card-img" src="https://cdn.pixabay.com/photo/2013/07/12/14/44/watch-148700_960_720.png" alt="">            
    <div class="product-details">
        <div>
            <p>Bike</p>
            <p>Price</p>
        </div>
        <figure>
            <img src="https://cdn-icons-png.flaticon.com/512/6132/6132882.png" alt="">
        </figure>
    </div>   
</div>
*/
const cardContainer = document.querySelector('.product-cards-container');
const productList = [];
productList.push({
    name: 'Reloj',
    price:323,
    img:'https://cdn.pixabay.com/photo/2013/07/12/14/44/watch-148700_960_720.png',
});
productList.push({
    name: 'Reloj',
    price:344,
    img:'https://cdn.pixabay.com/photo/2013/07/12/14/44/watch-148700_960_720.png',
});
productList.push({
    name: 'Reloj',
    price:384,
    img:'https://cdn.pixabay.com/photo/2013/07/12/14/44/watch-148700_960_720.png',
});


for (product of productList) {
    const productCard = document.createElement('div');
    productCard.classList.add('product-cards');

    const imgProduct = document.createElement('img');
    imgProduct.classList.add('product-card-img');
    imgProduct.setAttribute('src', product.img);



    const productDetails = document.createElement('div');
    productDetails.classList.add('product-details');

        const productInfoDiv = document.createElement('div');

            const productName = document.createElement('p');
            productName.innerText = product.name;
            const productPrice = document.createElement('p');
            productPrice.innerText = product.price;
    
            productInfoDiv.appendChild(productName);
            productInfoDiv.appendChild(productPrice);

            const productFigure = document.createElement('figure');
            const productImgCart = document.createElement('img');

            productImgCart.setAttribute('src', 'https://cdn-icons-png.flaticon.com/512/6132/6132882.png');
            productFigure.appendChild(productImgCart);
            
        productDetails.appendChild(productInfoDiv);
        productDetails.appendChild(productFigure);
        productCard.appendChild(imgProduct);
        productCard.appendChild(productDetails);

    cardContainer.appendChild(productCard);
};

--------------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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="menu-left">
            <img class="menu-burger" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAV1BMVEX///8AAACenp5hYWHPz88dHR3g4ODS0tKEhIQRERHv7+9BQUFERETExMQjIyM1NTWQkJD4+Pi6urp0dHQtLS1dXV3y8vJYWFiWlpZwcHDa2tp6enrp6ek7AyH4AAABbElEQVR4nO3dWU5CQRQE0GZQAUVFRRzY/zoVVmD1z02356ygKjzlmdyUrQEAAAAAAAAAAAAAAPA3d5vVODZ3cb/302Isp0NW8LytThzb7qKG99V5OzwkBffVabvsg4ar6rBdVkHDx+qwXR6DhjfVYbvcBA2fqsN2eQoaPleH7fIcNDxXh+1yDhq2ZXXaDsuk4IjPafKMXq3Heq25X6cFf92ux3Hb0Q8AAAAAAACAiRxeluN4Ca9LLz6qbw9CH+kHONqJ8GJxzBp+Vuft8JoU/KpO2+UraPhdHbbLd9DwrTpsl7eg4fwXtPN/hvP/HM7/u7S9VqftEH0ftnaszhsL32nGu4NO30vbP/jbAgAAAAAAAICZzL4TtR9s6yuZ9rzaVEeOhXtto92aXESbe2PuJiZDwuNtCl4kz+n8+6XzX9DOvyM8/xb0/Hve82+yt930u/rtMNqR8DG/MJ39/1sAAAAAAAAAAAAAAAD8Vz+xXS2AVeeEewAAAABJRU5ErkJggg==" alt="">
            <div class="logo">
                <h1>R</h1><p>eloj</p>    
            </div>
        </div>
        
        <div class="car-products-fixed">
            <img src="https://images.emojiterra.com/google/noto-emoji/v2.034/512px/1f6d2.png" alt="">
        </div>
        <div class="menu-burger-category inactive">
            <ul>
                <li>
                    <p>Tienda</p>
                    <p>Nosotros</p>
                    <p>Contactos</p>
                    
                </li>
            </ul>

        </div>
        <aside class="car-menu inactive">
            <ul>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
                <li><img src="" alt=""><p>Producto 1</p><p> $1658</p></li>
            </ul>
        </aside>
    </header>
    <main>
        <div class="cta-content">
            <img src="https://s1.1zoom.me/big0/345/353188-admin.jpg" alt="">
            <div class="cta-text">
                <h1>Reloj</h1>
    
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque ullam officiis obcaecati non ipsa in voluptatem sint. Magnam, quae, ad quia nemo ullam enim voluptate est provident animi illum molestias.</p>
                <p class="ppp">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iste voluptatum alias repellat sapiente veritatis quidem et atque soluta, hic similique excepturi inventore dolorum deserunt animi minima saepe vero cupiditate?</p>
            </div>
        </div>
        
        <div class="product-cards-container">
            

            <!-- <div class="product-cards">
                <img class="product-card-img" src="https://cdn.pixabay.com/photo/2013/07/12/14/44/watch-148700_960_720.png" alt="">            
                <div class="product-details">
                    <div>
                        <p>Bike</p>
                        <p>Price</p>
                    </div>
                    <figure>
                        <img src="https://cdn-icons-png.flaticon.com/512/6132/6132882.png" alt="">
                    </figure>
                </div>   
            </div> -->

            
        </div>

        
        <div class="entradas">
            <input type="text" id="calculo1" placeholder="Escribe aqui" onchange="console.log('Ingreso de informacion')">
            <input type="text" id="calculo2" placeholder="Escribe aqui" onchange="console.log('Ingreso de informacion')">
            <button id="btncalculo" >Calcular</button>
            <!-- onclick="clicOnBtn()" -->
            <p class="cantidad" id="resultado1"></p>
        </div>
        
        


    </main>
    


    <form id="form"> 
        <input type="text" id="entrada1">
        <input type="text" id="entrada2">
        <button id="btnent">Revisar</button>
        <p id="resultado2"></p>
    </form>


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

Not is easier to do like this? No es mas fácil hacerlo así?

for ( product of productList) {
productNode = <div class="product-card"> <img src=${product.img} alt=""> <div class="product-info"> <div> <p>$${product.price}</p> <p>${product.name}</p> </div> <figure> <img src="./icons/bt_add_to_cart.svg" alt=""> </figure> </div> </div>;
cardsContainer.innerHTML += productNode;
}

de momento así voy
 

 

Asi es como cambiaria el valor que tuviera dentro del input a un numero:

const Input= document.querySelector("#calculo1");
    const Input1 = Number(Input.value);

Con agregar de argumento a la funcion Number() ya logre realizar la suma.

console.log(Number(input1.value) + Number(input2.value));

Ufff … esto es lo que tanto hacía falta !!! Manipulación del DOM con JAVASCRIPT… Excelente !!

Por si a alguien le sirve

function AddProduct(name,price,img) {
    productList.push({
     name: name,
     price: price,
     img: img,
    })
}