No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Lista de productos: HTML a partir de arrays

22/29
Recursos

Aportes 160

Preguntas 47

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

鈥淢ucha 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:

鈥渇or (product of productList)鈥

dec铆a:

鈥渇or (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:

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>
Jaja que buen final tiene esta clase xD (sin spoilers)

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:

鈥淪i 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 鈥渄etecta 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,
    })
}