No tienes acceso a esta clase

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

Usando la API de internacionalizaci贸n del browser

14/28
Recursos

Aportes 45

Preguntas 9

Ordenar por:

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

o inicia sesi贸n.

  1. 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
  2. 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
  1. 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

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. 馃憦馃徏馃憦馃徏

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

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

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 鈥渁guacates鈥. Seleccione dicha seccion con querySelector y es por eso que al final aparece 鈥渁guacates.append(鈥odosLosItems)鈥

Me encanta cuando un Colombiano da clases en platzi uwu

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

![](

Mis avocados haha 馃槃

馃嚞馃嚰馃嚘馃嚥馃嚙馃嚪馃嚚馃嚧
Si quieren saber el tag de cualquier localidad (ej: en-AU ingles-australia). Este tipo de etiquetas se llaman 鈥淏CP 47鈥. si buscan en google 鈥淏CP 47 language tag鈥. encontrar谩n una lista con todos los idiomas soportados por JS.

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.

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.

/* 
    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



*/```

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



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

Prob茅 creando el proyecto con vite y a帽adiendo estilos con Sass. Ac谩 est谩 mi c贸digo: https://github.com/cxalem/fetchWorkshop

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
        </h3>
        <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>

JS

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

Que grandee Jonathan! 馃檶

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

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

Excelente el consejo que da el profe

No es necesario saberlo todo de memoria pero si saber buscar

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

As铆 va quedando:

Copi茅 el estilo de las tarjetas del Curso de Responsive Design: Maquetaci贸n Mobile First

Good day champion, Increible鈥

title and price, not relative and absolute, mejor鈥

const newDiv = document.createElement('div');
      container.appendChild(newDiv)
      newDiv.append(title,price)
      newDiv.className = 'new-card'

is better.

Para los que desean que al final les quede las 2 columnas tal como muestra el instructor.

despu茅s de agregar el nodo, podr铆an a帽adir estas l铆neas

appNode.append(...todosLosItems);

        const App = document.getElementById('app');
        App.className = 'mt-10 grid grid-cols-2 gap-2';
    });
<h3>La API de Internacionalizaci贸n de ECMAScript</h3>

Provee comparaci贸n de cadenas y formato de n煤meros, fechas y tiempos con sensibilidad al lenguaje.

<h4>Propiedades</h4>

Intl.Collator
Constructor para collators, objetos que permiten la comparaci贸n de cadenas con sensibilidad al lenguaje.
Intl.DateTimeFormat
Constructor para objetos que permiten el formato de fecha y tiempos con sensibilidad al lenguaje.
Intl.NumberFormat
Constructor para objetos que permiten el formato de n煤meros con sensibilidad al lenguaje.

Mas informaci贸n en el Sitio oficial

驴qu茅 ser铆a de nosotros sin memes?

Ac谩 se explica un poco m谩s sobre esa API sus m茅todos y usos.

excelente aporte ese comentario del final 馃槃

Juro que no tenia la mas minima intencion de agregarle el CSS, principalmente porque vuelvo a topar desarrollo web a los 2 meses de haberlo abandonado.
Pero una vez empec茅, no pude parar hasta que me quedara conforme. Me encanta el resultado y me sorprende lo que eh almacenado ya en mi memoria (consulte apenas unos detalles).
Aprender conlleva tiempo, mant茅n esa constancia.!

Aprovechando que usamos Tailwind me apoye en un template para los productos馃
.
Tuve dolores de cabeza para a帽adir svg al dom
Al final el svg lo converti en images base64, fue como resolvi el problema y de paso encontre este codepen para cambiar el color de las mismas.
.
Y pues asi quedo 馃

Aqui pueden ver las diferentes opciones en la api de internacionalizacion:

https://hpneo.dev/2019/05/13/apis-internacionalizacion.html

si mdn es el or谩culo para trabajar con tecnologias js

Para que los nodos que agreguemos tengan estilo:

title.style = "font-size: 2rem";
title.style.fontSize = "3rem";
// 2da forma
title.className = "nombre-de-clase";

Les comparto mis dise帽os de CSS, intente hacer algo como lo de la clase pero con CSS puro.

Aqui el codigo:

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>Platzi - Manipulaci贸n del DOM</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" id="container">
      <div class="text-center">
        <p
          class="text-base leading-6 text-indigo-600 font-semibold tracking-wide uppercase"
        >
          Platzi
        </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
        </h3>
        <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
          La tienda online de los amantes del oro verde
        </p>
      </div>
    </div>

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

CSS:

@import 'tailwindcss/dist/base.css';
@import 'tailwindcss/dist/components.css';
@import 'tailwindcss/dist/utilities.css';

html {
    font-size: 62.5%;
}
#container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.text-center {
    width: 100%;
}

.avocadoContainer {
    width: 40%;
    display: flex;
    padding: 10px;
    margin: 20px;
}

.avocadoContainer:hover {
    background-color: #e4e5e6;
    cursor: pointer;
}

.avocadoTitle {
    font-size: 2rem;
    font-weight: bold;
}

.avocadoImage {
    width: 150px;
    border-radius: 360px;
}

.avocadoPrice {
    font-size: 1.5rem;
    position: absolute;
    margin-top: 75px;
    margin-left: 150px;
}

JS:

/**
 * 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 url = 'https://platzi-avo.vercel.app/api/avo'
const containerNode = document.querySelector('#container')

// *web api
// Con fetch traemos informaci贸n de otras apis
// Algunas de las cosas que tenemos que hacer con fetch son:

// Contectarnos al server
window.fetch(url)

// Procesar la respuesta, y convertirla a JSON
.then(respuesta => respuesta.json())

// JSON -> Data -> Renderizar la informaci贸n en el browser
.then(responseJson => {
    const aguacates = []
    responseJson.data.forEach(item => {
        const container = document.createElement('div')
        container.className = 'avocadoContainer'

        const image = document.createElement('img')
        image.src = `https://platzi-avo.vercel.app${item.image}`
        image.className = 'avocadoImage'

        const title = document.createElement('p')
        title.textContent = item.name
        title.className = 'avocadoTitle'

        const price = document.createElement('div')
        price.textContent = `Price: ${item.price}`
        price.className = 'avocadoPrice'

        container.append(image, title, price)

        aguacates.push(container)
    });
    containerNode.append(...aguacates)
})
// api del proyecto
const urlApi = "https://platzi-avo.vercel.app/api/avo"
const container = document.querySelector('.container')

// api 'Intl' del objeto window
const formatPrice = price => {
    const newPrice = window.Intl.NumberFormat('en-EN', {
        style: 'currency',
        currency: 'USD',
    }).format(price)
    return newPrice
}

const fetchData = async() => {
    const data = await fetch(urlApi)
    const dataJson = await data.json()

    const items = []
    dataJson.data.forEach( element => {
        const box = document.createElement('div')
        // box.classList.add('box')
        box.className = 'box'
        
        const img = document.createElement('img')
        img.src = "https://platzi-avo.vercel.app" + element.image
        img.classList.add('image')
        
        const title = document.createElement('h1')
        title.textContent = element.name
        title.classList.add('title')
        
        const price = document.createElement('p')
        price.textContent = formatPrice(element.price)
        price.classList.add('price')

        box.append(img, title, price)
        items.push(box)
    });
    container.append(...items)
}
fetchData()

Formato de Precio

const formatPrice = (precio) => {
        const newPrice = new window.Intl.NumberFormat('en-EN', {
            style: 'currency',
            currency: 'GBP'
        }).format(precio)
        return newPrice
    }

formatPrice(precio)

馃憣

Tambi茅n podemos agregar estilos y clases desde nuestro JS ya que estos son atributos, veamos como.

Agregar estilos en l铆nea

Para ello haremos lo siguiente:

tenemos dos formas de hacerlo o agregamos en la propiedad style un string con el estilo o accedemos al estilo en espec铆fico.

Agregar clases

Tambi茅n podr铆amos agregar clases de esta forma:

Cuando queramos agregar varias podemos usar classList o claseName para una.

S茅 que tengo que trabajar m谩s en los estilos, pero considero que no debe ser el fuerte del curso, ya nos sobrar谩 tiempo para eso.


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

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

//1 Dar formato a fechas
//2 Dar formato a monedas


// Web API
//1 Conectarnos al servidor
//Queda de reto trabajar con async/await
window
    .fetch(`${baseUrl}/api/avo`)
//2 Procesar la respuesta y convertirla en JSON
    .then((respuesta) => respuesta.json())
//3 JSON ---> Data ---> Renderizar info browser
    .then(responseJson => {
        const todosLosItems = [];
        console.log(responseJson);
        responseJson.data.forEach((item) => {//De esta forma me traigo cada item de la API.
            console.log(item.name);
        //Crear imagen
        const imagen = document.createElement('img');
        document.body.appendChild(imagen);
        imagen.src = `${baseUrl}${item.image}`; //URL de la imagen

        // Crear t铆tulo
        const title = document.createElement('h2');
        document.body.appendChild(title);
        title.textContent = item.name;
        // title.style = "font-size: 3rem";
        //O title.style.fontsize = "3rem;"
        title.className = "text-xl text-red-600"; //aprovechar las clases de CSS y en espec铆fico del framework tailwindcss

        // Crear precio
        const price = document.createElement('div');
        document.body.appendChild(price);
        price.textContent = formatPrice(item.price);

        // Quiero que todo lo anterior est茅 dentro de un div
        const container = document.createElement('div');
        container.append(imagen, title, price);
        todosLosItems.push(container);
        });
        appNode.append(...todosLosItems);
    })

Format Price

const baseUrl="https://platzi-avo.vercel.app"
const API= `${baseUrl}/api/avo`;
const appnode=document.querySelector("#app");

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

const ws1_async = async (url_api)=>{
    try {
        //connect server
        const response = await window.fetch(url_api);
        //process and convert JSON
        const data=await response.json();
        //JSON -> Data show information in brower
        const allItems=[];
        data.data.forEach((item)=>{
            // create image
            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}`;
            // create title
            const title=document.createElement("h2");
            title.className="text-lg";
            title.textContent=item.name;
            // create price
            const price=document.createElement("div");
            price.className="text-gray-600";
            price.textContent=FormatPrice(item.price);
            // price and title
            const priceAndTitle = document.createElement("div");
            priceAndTitle.className = "text-center md:text-left";
            priceAndTitle.append(title,price);
            // card image and priceandtitle
            const card = document.createElement("div");
            card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
            card.append(image,priceAndTitle);        
            allItems.push(card);
        });
        appnode.append(...allItems);
    } catch (error) {
        console.error(error);
    }
}

ws1_async(API); 

Tambi茅n se pueden usar las clases de bootstrap:

  1. Agregar el link de bootstrap en el index.html
  2. En el index.js, por ejemplo: title.className = 鈥榯ext-danger鈥;

Genial

<h4>Usando la API de internacionalizaci贸n del browser</h4>

Podemos agregarle clases CSS al rederizado desde JS y en CSS modificar estos estilos, por ejemplo:

    //title.style = 'font-size: 2rem'; // modificamos los estilos desde JS
    //title.style.fontSize = "3rem";
    title.className = 'muy-grande'; //* Agregamos la clase al nodo
.muy-grande{
  font-size: 3rem;
  color: blue;
}

En este proyecto en particular estamos usando Tailwind, un framework de CSS, podemos agregar la clase de sus componentes y estos estilos tambi茅n ser谩n aplicados al proyecto:

title.className = 'text-2xl text-red-600';

No olvides que existe classList.add(className) y classList.remove(className) para poder quitar y agregar clases de CSS a las etiquetas.

INTL es una API para dar formato a monedas y fechas.

***隆Recuerda!***: no es necesario que te aprendas ninguna API de memoria, solo debes saber que existen, saber para qu茅 se usan y apoyarte de la documentaci贸n para sacarle el m谩ximo provecho.

A mi me esta encantando el curso, ha sido de los mejores que he tomado en Platzi

Mi c贸digo hasta el momento

const URL_API = "https://platzi-avo.vercel.app/";
const URL_API_AVO = `${URL_API}api/avo`;

const $aguacatesContainer = document.getElementById("aguacates");

//utils
function formatPrice(price) {
  return new Intl.NumberFormat("en-EN", {
    style: "currency",
    currency: "USD",
  }).format(price);
}

async function getData() {
  const response = await fetch(URL_API_AVO);
  const data = await response.json();
  return [...data.data];
}

function createCard({ name, image, price }) {
  //Creamos imagen
  const $image = document.createElement("img");
  $image.src = `${URL_API}${image}`;
  $image.className =
    "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6";
  //Creamos titulo
  const $title = document.createElement("h2");
  $title.innerText = name;
  //Creamos precio
  const $price = document.createElement("div");
  $price.innerText = formatPrice(price);

  //Creamos contenedor de los textos
  const $containerTexts = document.createElement("div");
  $containerTexts.append($title, $price);
  $containerTexts.className = "text-center md:text-left";

  //Creamos contenedor de la card
  const $container = document.createElement("div");
  $container.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
  $container.append($image, $containerTexts);

  return $container;
}

function renderElements(list) {
  const $listElements = [];
  list.forEach((item) => {
    $listElements.push(createCard(item));
  });

  $aguacatesContainer.append(...$listElements);
}

async function init() {
  const data = await getData();
  renderElements(data);
}

init();