Enriqueciendo la información

Clase 14 de 29 • Curso de Manipulación del DOM

Contenido del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

26
Proyectos propuestos
04:17 min

Librerías relacionadas

Conclusiones

29
Conclusiones
01:56 min

Tomar examen

alberto ayala rodriguez

student•

decidí utilizar async/await y separar el código de forma que cree dos funciones: una para obtener los datos y otra para pintar los datos, me gustó más porqué el código se puede leer mejor

Función para obtener los datos

const getData = async url => {
    try{
        const response     = await fetch(url);
        const data         = await response.json();
        const allAguacates = data.data;

        printItems(allAguacates);

    }catch(error){
        console.log(error);
    }
}

Función para pintar los elementos que se traen del API

const printItems = (items) => {

    const allItems = [];

        items.forEach(item => {
            //Crear imagen
            const imagen = document.createElement('img');
            imagen.src = `${URL_BASE}${item.image}`;

            //Crear titulo
            const title = document.createElement('h2');
            title.textContent = item.name;

            //crear precio
            const price = document.createElement('div');
            price.textContent = item.price;
            
            //Crear un container
            const container = document.createElement('div');
            container.append(imagen, title, price);

            allItems.push(container);
        
        });

        //Agregamos todo al contendor principal
        appNode.append(...allItems);
        
}

Todo el código

const URL_BASE = "https://platzi-avo.vercel.app";
const appNode  = document.querySelector('#app');

//Uso de fetch

const getData = async url => {
    try{
        const response     = await fetch(url);
        const data         = await response.json();
        const allAguacates = data.data;

        printItems(allAguacates);

    }catch(error){
        console.log(error);
    }
}

const printItems = (items) => {

    const allItems = [];

        items.forEach(item => {
            //Crear imagen
            const imagen = document.createElement('img');
            imagen.src = `${URL_BASE}${item.image}`;

            //Crear titulo
            const title = document.createElement('h2');
            title.textContent = item.name;

            //crear precio
            const price = document.createElement('div');
            price.textContent = item.price;
            
            //Crear un container
            const container = document.createElement('div');
            container.append(imagen, title, price);

            allItems.push(container);
        
        });

        //Agregamos todo al contendor principal
        appNode.append(...allItems);
        
}

getData(`${URL_BASE}/api/avo`);

Griger Ratia

student•

Genial

Chanel Mariannis Paredes Sánchez

student•

Super, un código clean!

Enriqueciendo la información

DOM y Web API

Y entonces nació internet...

Accede a la versión más actualizada de este contenido

¿Qué es el DOM?

Web APIs modernas

Operaciones básicas

Leer nodos

NodeLists vs Array

Crear y agregar

Otras formas de agregar

Atributos y propiedades

Eliminar nodos

Operaciones en lote

Workshop 1: Fetch

Presentación del proyecto

Descargando información y creando nodos

Enriqueciendo la información

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones