Usando la API de internacionalización del browser

Cursos Empresas Blog Live Conf Precios

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

Usando la API de internacionalización del browser

Comentarios

Carlos Eduardo Gomez García

Profesor

Aunque JavaScript nos provee de todas estas formas de controlar estilos, por buenas prácticas y por tener código limpio, es más recomendable usar clases y alternar entre clases que estén escritas en CSS, esto para no mezclar JavaScript y CSS
Además de la propiedad className, hay una más interesante llamada classList, esta nos permite añadir y eliminar elementos de forma dinámica fácilmente (útil para cuando queires eliminar o añadir una sola clase de manera dinámica, si usaras className tendrías que volver a escribirlas todas):

// Primero puedes usar clases iniciales (aunque para código limpio lo mejor es definirlas directamente en el HTML)
imagen.className = "h-16 w-16 md:h-24"

// Y ahora podemos usar classList para añadir/borrar dinámicamente
imagen.classList.add("md:w-24") // Añade una clase
imagen.classList.remove("h-16") // Elimina una clase

El profesor hizo un corte repentino y añadió más código sin dejarlo en la sección de archivos y enlaces (muy mal), aquí les dejo el enlace a mi repositorio que sí contiene todo el código con las clases y los estilos incluidos que uso el profesor: Adición del API de internacionalización

Jonathan 🦑 Alvarez

Profesor

Muy buenos puntos!

El código lo pueden encontrar en el repositorio del proyecto: https://github.com/jonalvarezz/platzi-dom/tree/main/workshop-fetch :D

fermin martin

Estudiante

Hola! 👋 También puedes echarle un vistazo al curso de Tailwindcss aqui

Christian Alvarenga

Estudiante

Me gusta mucho que el profesor enseñe no solo a como utilizar las APIs o utilizar Fetch, sino que nos recuerda a cada rato que no es necesario saber todo de memoria pero si acostumbrarnos a buscar también los recursos a través de la documentación oficial. Excelente. 👏🏼👏🏼

Libian María Hernández Gil

Estudiante

Ufff... me siento súper aliviada cuando lo dice... Gracias Jonathan, eres un Excelente profesor.

Frandel Corporan Rodríguez

Estudiante

jajajj verdad que si?

Alex Maldonado

Estudiante

Les comparto una web con recursos gratuitos para armar componentes con tailwind

https://www.tailwind-kit.com/

Juan Diego Loaiza Martinez

Estudiante

Muchas gracias

Rafael Moro

Estudiante

Por si alguien busca los estilo que le dio el profe usando Tailwind: son estos:

window
    .fetch(url)
    //procesar la respuesta y convertirla a json
    .then((respuesta) => respuesta.json())
    //JSON -> Data -> Renderizar info browser
    .then((respuestaJson) => {
        respuestaJson.data.forEach((item) => {
            //Crear imagen
            const imagen = document.createElement('img')
            imagen.src = `${imagenUrl}${item.image}`
            imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
            //Crear titulo
            const titulo = document.createElement('h2')
            titulo.innerText = item.name
            titulo.className = 'text-lg'
            //Crear precio
            const precio = document.createElement('div')
            precio.textContent = formatPrice(item.price)
            precio.className = 'text-gray-600'

            //Wrap price & title
            const priceAndTitle = document.createElement('div')
            priceAndTitle.className = 'text-center md:text-left'
            priceAndTitle.append(titulo, precio)

            //Wrap Img and priceAndTitle
            const card = document.createElement('div')
            card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300"
            card.append(imagen, priceAndTitle)
            console.log(card)

            todosLosItems.push(card)
        })
        aguacates.append(...todosLosItems)
    })

En vez del contianer, usa su contenedor que se llama carta. Crea un div para encerrar el precio y el titulo. Crea otro paa encerrar el contenedor de priceAndTitle y la imagen. Los mete a su contenedor card. En mi caso,cree una seccion en el index.html con clase "aguacates". Seleccione dicha seccion con querySelector y es por eso que al final aparece "aguacates.append(...todosLosItems)"

Anfernee Valera

Estudiante

Gracias bro!

Santiago López Daza

Estudiante

Me encanta cuando un Colombiano da clases en platzi uwu

Tobias Nicolas Villarroel Pini

Estudiante

Por mi parte decidí usar una hoja de estilos, les comparto. PD: acepto sugerencias!

#app{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 25px;
    margin-top: 25px;
}

.palta-container{
    position: relative;
    display: flex;
    width: 350px;
    height: 120px;
    flex-wrap: wrap;
}

.palta-container:hover{
    background-color: rgb(230, 240, 228);
    border-radius: 15px;
}

.img{
    width: 75px;
    height: 75px;
    border-radius: 75px;
    margin: auto 0;
    margin-top: 20px;
    margin-left: 20px;
}

.prize{
    position: absolute;
    top: 35px;
    left: 104px;
    color: gray;
}

.title{
    margin-top: 17px;
    margin-left: 10px;
    font-weight: 500;
}

![](

josue rodrigo fierro morfin

Estudiante

gracias

milton coronado

Estudiante

gracias por el codigo de styles, lo ubiera hecho yo pero la verdad es que estoy mas enfocado en el contenido del curso que es manipulacion del DOM... se agradece!!!

Seba Cardoso

Estudiante

Un programador con experiencia NO sabe de memoria todas las API. Sino que sabe donde estan los recursos para ir a buscarlos y usarlos cuando lo necesite.

Andrés Castellanos

Estudiante

🇬🇼🇦🇲🇧🇷🇨🇴 Si quieren saber el tag de cualquier localidad (ej: en-AU ingles-australia). Este tipo de etiquetas se llaman "BCP 47". si buscan en google "BCP 47 language tag". encontrarán una lista con todos los idiomas soportados por JS.

Jose Ever Muñoz Muñoz

Estudiante

excelente aporte, no sabia como buscarlos

GEMILLE ADASSI VAZQUEZ ESTRADA

Estudiante

Mis avocados haha :D

william grace

Estudiante

Muy buenos aportes en los comentarios, especialmente sobre el uso de classList y las buenas prácticas al separar JavaScript y CSS. El intercambio de recursos y ejemplos prácticos hace que el aprendizaje sea mucho más claro para quienes están empezando con DOM, Fetch y Tailwind.

william grace

Estudiante

"Muy buenos aportes y ejemplos prácticos en este hilo. La explicación sobre buenas prácticas con classList, Tailwind y el manejo del DOM resulta muy clara y útil para quienes están aprendiendo. "

Usuario anónimo

User

Yo no se ustedes… pero soy de los que poco usa frameworks CSS, ¿por qué? porque para mi, definir estilos en línea no me parece escalable, ya que todo va definido a una clase y no siempre te van a solucionar el problema, pueda que en ocasiones tengas que sobrescribir los valores de las propiedades de las clases. Aunque suene cruel, prefiero tirar CSS puro y duro.

Sebastián Buitrago

Estudiante

css no es duro, es muy chebre usarlo, lo unico bueno aparte de css son los preprocesadores para poder usar funciones y reutilizar codigo

Jaime Ortiz

Estudiante

Es que hay gente que usa framework CSS es porque no tienen un diseño definido. Al final, los frameworks son rígidos y se usan cuando su aplicación son como Templates o imitaciones de otras web. Yo también prefiero usar CSS para todo! Permite mayor flexibilidad y no recargo mi código CSS con propiedades que no necesito.

Andres Felipe Pinchao Ramirez

Estudiante

/* 
    En esta clase agregaremos estilos a nuestros nodos
    desde javascript */
const baseUrl = "https://platzi-avo.vercel.app";
const appNode = document.querySelector('#app');



/*Utilizaremos una API para cambiar el formato de precios
  dentro de una funcion que recibe por parametro un precio

  window.Intl.podremosAccederAMasFormatos
  NumberFormat recibe por parametro los locate
  Como segundo parametro opciones el style que sea moneda
  y que la moneda sea en dolares

*/
 const formatPrice = price => {

    const newPrice = new window.Intl.NumberFormat("es-EN", {
        style: "currency",
        currency: "USD"
    }).format(price) //como ya inicialice la api le voy a decir a la api
                    //que le voy a dar formato al precio que he recibido

    return newPrice;
 }

window
    .fetch(`${baseUrl}/api/avo`)
    .then(respuesta => respuesta.json())
    .then(responseJson =>{

        const todosLosItems = [];
        responseJson.data.forEach(item => {
        
        const imagen = document.createElement('img');
      
        imagen.src = `${baseUrl}${item.image}`;

        imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
        
    
        const titulo = document.createElement('h2');

        titulo.className = "text-lg";
        
        titulo.textContent = item.name;

       


    /* Con la propiedad style podemos cambiar los estilos del 
        elemento en el que la estamos utilizando    
       Tambien podremos utilizar el style en forma de objeto,
       es decir podremos  utilizar propiedades de esa propiedad          */

        // titulo.style = 'font-size: 16px';
        //titulo.style.fontSize = '3rem'; ejemplo

        /*
        Otra forma para poder modificar nuestro estilos es a traves de clases
        Esto le añadira el atributo class a esta etiqueta y desde nuestros 
        estilos css podremos usar esa clase y cambiarla.         
        */

        //titulo.className = 'muy-grande';

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

        precio.className = "text-gray-600";

        precio.textContent = formatPrice(item.price);


         // Creamos un contenedor el título y el precio
         const priceAndTitle = document.createElement("div")
         priceAndTitle.className = "text-center md:text-left";
         priceAndTitle.appendChild(titulo);
         priceAndTitle.appendChild(precio);

        // Metemos todo dentro de una tarjeta contenedora
        const card = document.createElement("div");
        card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
        card.append(imagen, priceAndTitle);

        
        // Metemos todo dentro del contenedor principal

        const container = document.createElement('div');
        container.appendChild(card);


     
     
            todosLosItems.push(container);
            
        
                
            });
    
            appNode.append(...todosLosItems)
    
        });
    
/*
        Resumen: vimos como utilizar clases como dar estilos y como utilizar ña
        api de internacionalizacion, puede que pienses que soy un experto
        utilizando esta api
        💡 Pero de la unica forma de saber como usarla es revisando su 
        documentacion para precios

        No es necesario aprender una api de memoria unicamente debes tener 
        idea de que existan, que tengas idea para que se usan pero que siempre
        te apoyes de la documentacion para tener la version mas reciente y 
        el uso mas apropiado de esas apis



*/```

Antony Jose Cabeza Rauseo

Estudiante

Al appNode le agregó las siguientes clases para que quedaran en dos columnas:

appNode.className = 'mt-10 grid grid-cols-2 gap2'

Alejandro Mena González

Estudiante

Probé creando el proyecto con vite y añadiendo estilos con Sass. Acá está mi código: https://github.com/cxalem/fetchWorkshop

Lucas Da Rosa

Estudiante

Re zarpado

Arturo Mauricio Terceros Beltrán

Estudiante

Les dejo todos los formatos de moneda que se podrían incorporar

https://www.currency-iso.org/dam/downloads/lists/list_one.xml

Luis Alejandro Vera Hernandez

Estudiante

Tratando de conservar el trabajo realizado por las anteriores clases y para que no se pierdan con el repositorio donde hay cambios de nombres de variables y uso de async/await asi se haria para obtener el resultado de la clase

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-snowpack-app"
    />
    <!--
      Snowpack will replace %PUBLIC_URL% with the value you have for `baseUrl` in `snowpack.config.js`.
      Make sure to update it with your GitHub Page URL. https://<your-username>.github.io/<your-repo-name>

      More about config options:
      - https://www.snowpack.dev/reference/configuration#buildoptions.baseurl
    -->
    <link
      rel="stylesheet"
      type="text/css"
      href="%PUBLIC_URL%/_dist_/index.css"
    />
    <title>Snowpack & Tailwind App</title>
  </head>
  <body>
    <!--
      This HTML file is a template.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.

      Start modyfing from here.
    -->
    <div class="py-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center">
        <p
          class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase"
        >
          Platzi Manipulacion del DOM
        </p>
        <h3
          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
        >
          Avocados, la tiendita
        </h4>
        <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
          Bienvenido a mi tiendita. Disguste de sus Aguacates. (Aguacates no PALTA 😒)
        </p>
        <div id="app" class="mt-10 grid grid-cols-2 gap-2">

        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <footer class="text-center mt-4 p-6 text-sm text-gray-500">
      <p>
        Powered by
        <a href="https://platzi-avo.vercel.app" target="_blank"
          >platzi-avo.vercel.app</a
        >
        | Made by <a href="https://github.com/alejandroverita">@alejandroverita</a> for
        <a href="https://twitter.com/platzi">@platzi</a>
      </p>
    </footer>

    <!-- Add more scripts here -->
    <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script>
  </body>
</html>

/**
 * This file is just a silly example to show everything working in the browser.
 * When you're ready to start on your site, clear the file. Happy hacking!
 **/

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

const formatPrice = (price)=> {
    const newPrice = new window.Intl.NumberFormat("en-EN", {
        style: "currency",
        currency: "USD",
    }).format(price);

    return newPrice;
};

//web api
//conectarnos al servidor
window 
    .fetch(`${baseUrl}/api/avo`)
//procesar la respuesta y convertirla en JSON
    .then((respuesta) => respuesta.json())
//JSON-> Data -> Renderizar info browser
    .then(responseJson=>{
        const todosLosItems = [];
        responseJson.data.forEach((item)=>{

            //imagen
            const image = document.createElement('img');
            image.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6";
            image.src = `${baseUrl}${item.image}`
            //titulo
            const title = document.createElement('h2');
            title.className = "text-lg";
            title.textContent = item.name;
            //precio
            const price = document.createElement('div');
            price.className = "text-gray-600"
            price.textContent = formatPrice(item.price);
            
            //wrap price and title
            const priceAndTitle = document.createElement("div");
            priceAndTitle.className = "text-center md:text-left";
            priceAndTitle.appendChild(title);
            priceAndTitle.appendChild(price)

            //container
            const container = document.createElement('div');
            container.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
            container.appendChild(image);
            container.appendChild(priceAndTitle)
            // container.appendChild(title);
            // container.appendChild(price);
            todosLosItems.push(container);
        });
        appNode.append(...todosLosItems);
    });

fermin martin

Estudiante

Que grandee Jonathan! 🙌

Christian Armando Consuelo Mayén

Estudiante

Yo siempre he usado el API\ de classList. Igual esta solucion funciona.

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Jhoana España Urresty

Estudiante

Excelente el consejo que da el profe

No es necesario saberlo todo de memoria pero si saber buscar

Pablo Inaipil

Estudiante

Buenas tardes profe y comunidad! Quiero renderizar la descripción de cada avocado pero me aparece esto (object object)

ojala me puedan orientar, gracias!!

Héctor Eduardo López Carballo

Estudiante

Hola!

Puedes compartir tu repositorio?

Pablo Inaipil

Estudiante

Hola buenos días adjunto repo! muchas gracias! https://github.com/pabloInaipil/avocado-DOM-Platzi.git

Rodrigo Andre Gutierrez

Estudiante

¿qué sería de nosotros sin memes?

CHRISTIAN OLIVER SOLANO NUÑEZ

Estudiante

con estilos usando tailwindcss

const containerCards = document.querySelector('#container'
    );
    
containerCards.className = 'mt-6 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4';
const getData = async() =>  {
    const response = await fetch(URLmain+'/api/avo');
    const datos = await response.json();

    console.log(datos.data);

    let allItems = [];
    datos.data.forEach(element => {
        console.log(element.name);

        const image = document.createElement('img');
        image.src = `${URLmain}${element.image}`;
        image.alt = element.name;
        image.className = 'w-full rounded-xl group-hover:opacity-75';

        const title = document.createElement('h2');
        title.textContent = element.name;
        title.className = 'ml-2';

        
        const price = document.createElement('p')
        price.textContent = element.price;
        price.className = ' text-m text-gray-500 ml-2'

        const card = document.createElement('div');
        card.append(image, title, price);
        card.className = 'max-w-64 min-h-24 group relative rounded-xl  border-2  border-gray';
        allItems.push(card);
    });
    containerCards.append(...allItems);
}


getData();

// Primero puedes usar clases iniciales (aunque para código limpio lo mejor es definirlas directamente en el HTML)
imagen.className = "h-16 w-16 md:h-24"

// Y ahora podemos usar classList para añadir/borrar dinámicamente
imagen.classList.add("md:w-24") // Añade una clase
imagen.classList.remove("h-16") // Elimina una clase

window
    .fetch(url)
    //procesar la respuesta y convertirla a json
    .then((respuesta) => respuesta.json())
    //JSON -> Data -> Renderizar info browser
    .then((respuestaJson) => {
        respuestaJson.data.forEach((item) => {
            //Crear imagen
            const imagen = document.createElement('img')
            imagen.src = `${imagenUrl}${item.image}`
            imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
            //Crear titulo
            const titulo = document.createElement('h2')
            titulo.innerText = item.name
            titulo.className = 'text-lg'
            //Crear precio
            const precio = document.createElement('div')
            precio.textContent = formatPrice(item.price)
            precio.className = 'text-gray-600'

            //Wrap price & title
            const priceAndTitle = document.createElement('div')
            priceAndTitle.className = 'text-center md:text-left'
            priceAndTitle.append(titulo, precio)

            //Wrap Img and priceAndTitle
            const card = document.createElement('div')
            card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300"
            card.append(imagen, priceAndTitle)
            console.log(card)

            todosLosItems.push(card)
        })
        aguacates.append(...todosLosItems)
    })

#app{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 25px;
    margin-top: 25px;
}

.palta-container{
    position: relative;
    display: flex;
    width: 350px;
    height: 120px;
    flex-wrap: wrap;
}

.palta-container:hover{
    background-color: rgb(230, 240, 228);
    border-radius: 15px;
}

.img{
    width: 75px;
    height: 75px;
    border-radius: 75px;
    margin: auto 0;
    margin-top: 20px;
    margin-left: 20px;
}

.prize{
    position: absolute;
    top: 35px;
    left: 104px;
    color: gray;
}

.title{
    margin-top: 17px;
    margin-left: 10px;
    font-weight: 500;
}

/* 
    En esta clase agregaremos estilos a nuestros nodos
    desde javascript */
const baseUrl = "https://platzi-avo.vercel.app";
const appNode = document.querySelector('#app');



/*Utilizaremos una API para cambiar el formato de precios
  dentro de una funcion que recibe por parametro un precio

  window.Intl.podremosAccederAMasFormatos
  NumberFormat recibe por parametro los locate
  Como segundo parametro opciones el style que sea moneda
  y que la moneda sea en dolares

*/
 const formatPrice = price => {

    const newPrice = new window.Intl.NumberFormat("es-EN", {
        style: "currency",
        currency: "USD"
    }).format(price) //como ya inicialice la api le voy a decir a la api
                    //que le voy a dar formato al precio que he recibido

    return newPrice;
 }

window
    .fetch(`${baseUrl}/api/avo`)
    .then(respuesta => respuesta.json())
    .then(responseJson =>{

        const todosLosItems = [];
        responseJson.data.forEach(item => {
        
        const imagen = document.createElement('img');
      
        imagen.src = `${baseUrl}${item.image}`;

        imagen.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
        
    
        const titulo = document.createElement('h2');

        titulo.className = "text-lg";
        
        titulo.textContent = item.name;

       


    /* Con la propiedad style podemos cambiar los estilos del 
        elemento en el que la estamos utilizando    
       Tambien podremos utilizar el style en forma de objeto,
       es decir podremos  utilizar propiedades de esa propiedad          */

        // titulo.style = 'font-size: 16px';
        //titulo.style.fontSize = '3rem'; ejemplo

        /*
        Otra forma para poder modificar nuestro estilos es a traves de clases
        Esto le añadira el atributo class a esta etiqueta y desde nuestros 
        estilos css podremos usar esa clase y cambiarla.         
        */

        //titulo.className = 'muy-grande';

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

        precio.className = "text-gray-600";

        precio.textContent = formatPrice(item.price);


         // Creamos un contenedor el título y el precio
         const priceAndTitle = document.createElement("div")
         priceAndTitle.className = "text-center md:text-left";
         priceAndTitle.appendChild(titulo);
         priceAndTitle.appendChild(precio);

        // Metemos todo dentro de una tarjeta contenedora
        const card = document.createElement("div");
        card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
        card.append(imagen, priceAndTitle);

        
        // Metemos todo dentro del contenedor principal

        const container = document.createElement('div');
        container.appendChild(card);


     
     
            todosLosItems.push(container);
            
        
                
            });
    
            appNode.append(...todosLosItems)
    
        });
    
/*
        Resumen: vimos como utilizar clases como dar estilos y como utilizar ña
        api de internacionalizacion, puede que pienses que soy un experto
        utilizando esta api
        💡 Pero de la unica forma de saber como usarla es revisando su 
        documentacion para precios

        No es necesario aprender una api de memoria unicamente debes tener 
        idea de que existan, que tengas idea para que se usan pero que siempre
        te apoyes de la documentacion para tener la version mas reciente y 
        el uso mas apropiado de esas apis



*/```

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-snowpack-app"
    />
    <!--
      Snowpack will replace %PUBLIC_URL% with the value you have for `baseUrl` in `snowpack.config.js`.
      Make sure to update it with your GitHub Page URL. https://<your-username>.github.io/<your-repo-name>

      More about config options:
      - https://www.snowpack.dev/reference/configuration#buildoptions.baseurl
    -->
    <link
      rel="stylesheet"
      type="text/css"
      href="%PUBLIC_URL%/_dist_/index.css"
    />
    <title>Snowpack & Tailwind App</title>
  </head>
  <body>
    <!--
      This HTML file is a template.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.

      Start modyfing from here.
    -->
    <div class="py-10 max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center">
        <p
          class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase"
        >
          Platzi Manipulacion del DOM
        </p>
        <h3
          class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10"
        >
          Avocados, la tiendita
        </h4>
        <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
          Bienvenido a mi tiendita. Disguste de sus Aguacates. (Aguacates no PALTA 😒)
        </p>
        <div id="app" class="mt-10 grid grid-cols-2 gap-2">

        </div>
      </div>
    </div>

    <!-- FOOTER -->
    <footer class="text-center mt-4 p-6 text-sm text-gray-500">
      <p>
        Powered by
        <a href="https://platzi-avo.vercel.app" target="_blank"
          >platzi-avo.vercel.app</a
        >
        | Made by <a href="https://github.com/alejandroverita">@alejandroverita</a> for
        <a href="https://twitter.com/platzi">@platzi</a>
      </p>
    </footer>

    <!-- Add more scripts here -->
    <script type="module" src="%PUBLIC_URL%/_dist_/index.js"></script>
  </body>
</html>

/**
 * This file is just a silly example to show everything working in the browser.
 * When you're ready to start on your site, clear the file. Happy hacking!
 **/

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

const formatPrice = (price)=> {
    const newPrice = new window.Intl.NumberFormat("en-EN", {
        style: "currency",
        currency: "USD",
    }).format(price);

    return newPrice;
};

//web api
//conectarnos al servidor
window 
    .fetch(`${baseUrl}/api/avo`)
//procesar la respuesta y convertirla en JSON
    .then((respuesta) => respuesta.json())
//JSON-> Data -> Renderizar info browser
    .then(responseJson=>{
        const todosLosItems = [];
        responseJson.data.forEach((item)=>{

            //imagen
            const image = document.createElement('img');
            image.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6";
            image.src = `${baseUrl}${item.image}`
            //titulo
            const title = document.createElement('h2');
            title.className = "text-lg";
            title.textContent = item.name;
            //precio
            const price = document.createElement('div');
            price.className = "text-gray-600"
            price.textContent = formatPrice(item.price);
            
            //wrap price and title
            const priceAndTitle = document.createElement("div");
            priceAndTitle.className = "text-center md:text-left";
            priceAndTitle.appendChild(title);
            priceAndTitle.appendChild(price)

            //container
            const container = document.createElement('div');
            container.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
            container.appendChild(image);
            container.appendChild(priceAndTitle)
            // container.appendChild(title);
            // container.appendChild(price);
            todosLosItems.push(container);
        });
        appNode.append(...todosLosItems);
    });

const containerCards = document.querySelector('#container'
    );
    
containerCards.className = 'mt-6 grid grid-cols-2 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4';
const getData = async() =>  {
    const response = await fetch(URLmain+'/api/avo');
    const datos = await response.json();

    console.log(datos.data);

    let allItems = [];
    datos.data.forEach(element => {
        console.log(element.name);

        const image = document.createElement('img');
        image.src = `${URLmain}${element.image}`;
        image.alt = element.name;
        image.className = 'w-full rounded-xl group-hover:opacity-75';

        const title = document.createElement('h2');
        title.textContent = element.name;
        title.className = 'ml-2';

        
        const price = document.createElement('p')
        price.textContent = element.price;
        price.className = ' text-m text-gray-500 ml-2'

        const card = document.createElement('div');
        card.append(image, title, price);
        card.className = 'max-w-64 min-h-24 group relative rounded-xl  border-2  border-gray';
        allItems.push(card);
    });
    containerCards.append(...allItems);
}


getData();

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