No tienes acceso a esta clase

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

Nuevo Curso Pr谩ctico de JavaScript

Nuevo Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Lista de productos: HTML a partir de arrays

21/26
Recursos

Aportes 29

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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:

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'
}); 

Bueno, a rogarle a los dioses del internet鈥 馃槀馃槀馃槀

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

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

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.

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);
});

Todo pinta bien por ahora 馃檵馃徎鈥嶁檪锔

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);

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贸:

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

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

Jaja que buen final tiene esta clase xD (sin spoilers)

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.

Que clase tan incre铆ble!

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;
}

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

La clase es un 10 pero la desincronizaci贸n del audio le baja puntos 馃槗

O no se si sere solo yo 馃槄

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>
    `)
});

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>

Hola, les comparto mi soluci贸n final:

Tomando en cuenta que se tiene el Array con N objetos de productos.

  • Cre茅 una funci贸n para poder generar los elementos HTML desde JS y una variable de la clase cards-container.
const cardContainer = document.querySelector('.cards-container');

const createElements = (obj) => {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');
    
    const image = document.createElement('img');
    image.setAttribute('src', obj.image);
    image.classList.add('product-img');

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

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

    const productInfoPrice = document.createElement('p');
    productInfoPrice.innerText = `$ ${obj.price}`;

    const productInfoName = document.createElement('p');
    productInfoName.innerText = `${obj.name}`;

    const productInfoFigure = document.createElement('figure');

    const productInfoCartIcon = document.createElement('img');
    productInfoCartIcon.setAttribute('src', './assets/img/icons/bt_add_to_cart.svg');

    // Append each child to parents
    // product info
    productInfoFigure.append(productInfoCartIcon);
    productInfoDiv.append(productInfoName, productInfoPrice);
    productInfo.append(productInfoDiv, productInfoFigure);

    // product card
    productCard.append(image, productInfo);

    // append to DOM
    cardContainer.append(productCard);
}
  • Despu茅s gener茅 una funci贸n que cicla cualquier Array que se pase como par谩metro, la cual a su vez crea los elementos instanciando la funci贸n anterior.
const recurrentCards = (arr) => {
    for (let product of arr) {
        createElements(product);    
    }
}
  • Por 煤ltimo, 鈥渓lam茅鈥 a esta 煤ltima funci贸n, teniendo as铆 pedazos de c贸digo por funcionalidad, lo cual ayuda a poder mantener de mejor forma el c贸digo.
recurrentCards(productList);

隆Espero que les sea de utilidad!

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

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

Creating functions in order to be used with different data

for ( of ) for ( in )

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

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.