Comparte el resultado

¡Que genial está este curso!

Mi resultado 😄

Repo 📚
Live demo 📚

Mi resultado 🚀

Hacer deploy del proyecto(Basado en el README del proyecto):

1. Crear un repositorio en Github.
2. Vi en los aportes que en el archivo snowpack.config.js se modifico de la siguiente manera:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  buildOptions: {
    baseUrl: 'https://nombre-de-usuario.github.io/nombre-del-repo',
  },
}

1. Añadir en el archivo package.json el apartado homepage de la siguiente forma:

{
  "homepage": "https://tu-nombre-de-usuario.github.io/el-nombre-de-tu-repo",
  "scripts": {
	....
  },
  "devDependencies": {
	....
  }
}

1. Subir desde nuestro repositorio local a Github.
   • git add .
   • git commit -m “mensaje” O git commit -am “mensaje” // que es como un add y commit en solo uno 😄
   • git remote add origin “https://github.com/<nombre-de-usuario>/<nombre-del-repo>”
   • git push origin master
2. Se debe crear en Github además de la rama master, una rama llamada gh-pages
3. Habilitamos Github pages en nuestro repositorio desde settings>:
   • Seleccionando gh-pages como rama para que se haga el build del proyecto.
     
     

Y ya! 😄, bueno al menos eso fue lo que a mi me funciono, me gustaria feedback para ver en que me equivoque, gracias😅…

https://es-aguacate.netlify.app/

Así quedo mi ejercicio

Javascript

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, attributes }) {
  //Creamos imagen
  const $image = document.createElement("img");
  $image.src = `${URL_API}${image}`;
  $image.className = "rounded-full mx-auto card__avatar";

  const $banner = document.createElement("div");
  $banner.className = "card__banner";

  //Creamos titulo
  const $title = document.createElement("h2");
  $title.innerText = name;
  $title.className = "card__name";

  const $description = document.createElement("span");
  $description.innerText = attributes.taste;
  $description.className = "card__description";

  const $price = document.createElement("span");
  $price.innerText = formatPrice(price);
  $price.className = "card__level";

  const $body = document.createElement("div");
  $body.className = "card__body";
  $body.append($title, $description, $price);

  //Creamos contenedor de la card
  const $container = document.createElement("article");
  $container.className = "card";
  $container.append($image, $banner, $body);

  return $container;
}

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

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

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

init();

css

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

.card {
  position: relative;
  padding: 5px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(68, 68, 68, 0.1);
}
.card__banner {
  background-image: url(https://as.com/deporteyvida/imagenes/2017/07/23/portada/1500819395_065005_1500819504_noticia_normal.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
  padding: 30px 0 0;
  height: 60px;
  box-sizing: content-box;
}
.card__avatar {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
  border: 4px solid #eadd76;
}
.card__body {
  text-align: center;
  padding: 35px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: content-box;
}
.card__name {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 5px;
}
.card__description {
  font-size: 12px;
  display: inline-block;
  margin: 0 0 12px;
  color: #cacaca;
}
.card__level {
  font-size: 12px;
  display: inline-block;
  background-color: #eadd76;
  padding: 5px 15px;
  color: #fff;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.card__numbers {
  display: flex;
  justify-content: space-between;
  padding: 0 32px 25px;
}
.card__meta {
  font-size: 12px;
  color: #cacaca;
  margin: 0 0 5px;
}
.card__number {
  font-size: 22px;
}

En mi caso me limitaré a seguir el curso, cuando aprenda más sobre Tailwind tal vez haga algo, por ahora, por si a alguien le interesa, todo el código de este WorkShop junto con sus estilos está en mi repositorio 😄
.
Código del Workshop

No se mucho de Tailwind, los estilos los realice en css puro.

Asi voy chicos:

Repro: https://github.com/diegudeveloper/Proyecto03_API

Modo Mobile:

Modo Pc:

Mi primer intento

![](

https://github.com/jhonwix/PokemonApiPromise

Combiné este proyecto con otro de que venía haciendo con al app de platzi y va así

No se nada de tailwind aún, pero con ayuda de esta web https://www.tailwind-kit.com/ + la documentación oficial, puede armar una versión 0.1, que mejoraré a futuro 😁

Hola:

Para publicar en github io, modifique el archivo de configuración de snowkpack.config :

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  buildOptions: {
    baseUrl: 'https:// robmvsk.github.io/workshop-1-fetch',
 
 },
}

Saludos 😃

Mi tienda de aguacates, llevele llevele 2x1 Aguacates frescos!!!
Entra aqui

El código de mi proyecto 😄
https://github.com/LeoCode0/workshop_1

Hice un pokemon Store con el API de pokemones!!

Comparto el repo con mi proyecto final, Estaré encantado de leer sugerencias.

Mi resultado conociendo tailwindcss:
https://johnnie-lc.github.io/workshop-1-fetch/

Les comparto mi resultado, es mi primera vez usando Tailwind pero quise probar algunos detalles y animaciones, les dejo mi repo aquí 😃

Demo

Reto concluido, mobile-first, manipulación del DOM, CSS, tailwind, javaScript pro, github pages. Espero que les guste y les ayude a terminar el suyo 😃
https://christbm.github.io/workshop1/
mi portafolio: https://christbm.github.io/portfolio/#works

Así quedo el código:
Recibo FeedBack 😄

(async() =>{
    const MainContainer = document.querySelector('main')
    const url = `https://platzi-avo.vercel.app/api/avo`
    let avocado = await fetch(url)
    let response = await avocado.json()
    let {data} = response
    const items = [] 
    data.forEach(({image:img,name,price:price_item}) => {
       const image = document.createElement('img')
       image.src = `https://platzi-avo.vercel.app/${img}`
       
       const title = document.createElement('h2')
       title.textContent = name

       const price = document.createElement('p')
       price.textContent = `$${price_item}`

       const container = document.createElement('div')
       container.classList.add('item')

       container.append(image,title,price)
       items.push(container)
    });
    MainContainer.append(...items)
})()

Aqui dejo mi aporte amigos !!

Si alguien quiere que le comparta el código con gusto lo hago 😄

Hola a todos, no se si alguien ha intentado subirlo a GitHub pages con el tutorial del readme pero creo que hay un pequeño error. Cuando se carga el build a la rama gh-pages, en el html no se esta apuntando bien a los estilos y al archivo JS.

Yo lo solucione poniendo un punto antes de la ruta tal que “./dist/index.css” y lo mismo para JS en la rama gh-pages.

Pero no se como hacer esto desde el build que realiza GitHub. Espero solucionarlo en estos dias.

（￣︶￣）↗　Hola, comparto aquí mi resultado:
De manera sencilla agregué un grid al div container y estilice un poco los precios.
PD: no he querido subir esta página a github por que no me agrada la idea de tener un repositorio del cual no entiendo su funcionamiento ni que tiene integrado, pero se me ha ocurrido una idea para una API.

Me gusta mucho el curso. Esta es la API de TMDb. Luego mejoro como se ve, porque no sé usar tailwind

Ahí vamos 😃

Repo: https://github.com/tapiadot/avocado-shop

Por aquí pongo mi aporte.

No es muy visual, pero le agregue una feature de modal a cada aguacate para que mostrara más información.

Repositorio: Link
GitHub Pages: Link

https://cisaias1999.github.io/RickAndMortyApi/ esta es mi proyecto, usé la API de RickAndMorty
https://github.com/cisaias1999/RickAndMortyApi link del repositorio

Mi Tiendita

Mi app: https://modozen.github.io/taller-paltas/
Vamos a por más

Este es mi resultado, no sabia nada de tailwind, pero ahí logre hacerlo, leyendo la documentación.

Repositorio: https://github.com/victorsheepman/Avocados-Latiendita.git

Así quedo el mío, lo hice muy sencillo.

Página
Repositorio

Este es mi resultado

Es mi primera vez utilizando TailWind

Fue genial descubrir Snowpack y Tailwind. Estuve unos días revisando su documentación y creando el proyecto desde 0 para este taller:

• Deploy en Netlify:
  https://competent-kepler-4c782c.netlify.app/

• Repositorio en github:
  https://github.com/jorgemacper/avocadoapp

Muy bien, Jonathan. Hay mucha claridad en su curso.

Código

const baseUrl = "https://platzi-avo.vercel.app"
const url = "https://platzi-avo.vercel.app/api/avo"

let app = document.getElementById('app')
app.className = "foo" //I used grid to display it prettier

const formatPrice = price => {

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

    return newPrice;
 }

window
.fetch(url)
.then(response => response.json())
.then(responseJson => {
    const items = []
    responseJson.data.forEach((item) => {
        const img = document.createElement('img')
        img.className = "h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6"
        img.src = `${baseUrl}${item.image}`;

        const title = document.createElement('h2')
        title.className = "text-lg"
        title.textContent = item.name

        const price = document.createElement('div')
        price.className = "text-gray-600"
        price.textContent = formatPrice(item.price);
        // price.textContent = item.price

        const priceTitle = document.createElement('div')
        priceTitle.className = "text-center md:text-left"
        priceTitle.append(title, price)

        const card = document.createElement("div");
        card.className = "md:flex bg-white rounded-lg p-6 hover:bg-gray-300";
        card.append(img, priceTitle)

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

        items.push(container)
    })
    app.append(...items)
})

Buenas tardes:
Comparto mi repo:
https://github.com/Vale-78/Workshop1Fetch

y el deploy en Netifly:
https://64d67bfec687dc1d886af8f3--stellular-starship-92ff99.netlify.app/

Como estudiante de JavaScript y DOM Scripting, me siento enormemente agradecido por todo lo que he aprendido hasta el momento. Este viaje en el mundo de la programación ha sido emocionante y gratificante, y me ha permitido adquirir habilidades y conocimientos valiosos
https://rainbow-paprenjak-302f4b.netlify.app

¡Así quedo mi tienda de aguacates!

Ayudaaa please!!!
Gitgub sólo me muestra el readme… leí todos los comentarios, modifiqué de acuerdo a lo que proponen mis excelentes compañeros pero nada… no entiendo mi error. Creé 3 github diferentes… ya no sé cómo lograr que se vea mi proyecto. Agradezco colaboración

Mi repo (la últimaa… jaja…sino entran a mi usuario y verán las otras dos…jaja)

https://github.com/Vale-78/TienditaDomManipulacion/settings/pages

{
  "homepage": "https://Vale-78.github.io/TienditaDomManipulacion",
  "scripts": {
// Añadí esto en Package.json

//esto en snowpack.config
 buildOptions: {
    baseUrl: 'https://Vale-78.github.io/TienditaDomManipulacion',
  },

Excelente curso!

Aqui dejo mi proyecto.
Demo: https://carlitoxe.github.io/workshop-fetch/
Repo: https://github.com/carlitoxe/workshop-fetch

Comparto el proyecto. Al final configure el contenedor app para que sea display: grid.

Mis apuntes en Notion💚

Siempre quise usar la API de rick and morty y pues ya se consumirla, en fin feli 😁
Pagina web | Repositorio
Si Jerry esta vivo 🟢| Si Jerry se nos fue 🔴

[](file:///C:/Users/Chris/Desktop/Sin%20t%C3%ADtulo.png)

Repo: https://github.com/AstridCastellanos/avocadoStore
No le cambié mucho 😐

Dejo mi tienda!

Comparto mi resultado en mi Repositorio
Por ahora, no lo pude desplegar en GitHub page… pero aquí está…

Lo cargué a GitHub-Pages pero no me carga en el navegador la tienda de aguacates, en su lugar aparece “Manipulación del DOM”. 😦

Mi resultado! https://lucasbruma.github.io/cursoDom/
Repo: https://github.com/lucasBruma/cursoDom

Aqui el mio desplegado en Netlify

https://avocado-store-dom-workshop.netlify.app/

asi me quedo, el unico problemas es que el screenshot no deja ver completo

https://github.com/byNico1/second-avo-platzi/tree/master

He aquí el resultado, aproveché para aprender las bases de Tailwind, tomé inspiración en los diseños de otros aportes:

Listo, agregué elementos de la descripción de la API:
.
.
.

Asi va quedando 😄

Decidí hacerlo con TypeScript y Vite, ya que Tailwind no me agrada demasiado:)

Desktop

Teléfono

mi resultado!

Aqui comparto mi trabajo con mi proyecto

Comparto mi resultado, los estilos con solamente con CSS, agregando las clases a los contenedores y los elementos con js.

Aún faltan detalles, pero aquí está mi resultado.

Resultado:
Link: Web

Les comparto mi proyecto ☺️
https://davidespinog.github.io/avocatoPlatzi/

Asi me quedo, usar display grid es una maravilla

No se olviden de colocar su URL en la etiqueta script del html que lo vincula con JS! no me estaba funcioando por eso

https://lufesil.github.io/aguacates/

Buenas tardes,

comparto repositorio relacionado al reto.

https://github.com/jhyate/platzi-manipulacion-dom.git

Gracias.

https://github.com/kauve/paltas-kauve

Así quedó mi modelo, adjusnto mi Repositorio

Netlify: Live

Github: Repo

No es mucho pero es trabajo honesto

Genial!
https://ins4w.github.io/dom-manipulation-example/

Resultado Click

Comparto mi resultados.
https://eimolina.github.io/dom-manipulation/

![](

¡Con todo, menos con miedo!
Demo realizada

https://nosoyeseoscar.github.io/workshop-1-fetch/

Sí, faltó CSS pero lo importante es el fetch, usar github pages y creo que para mostrar una landing page a un posible cliente está bien.

saludos.

Algo parecido a la tiendita del curso next.js 😄

Proyecto concluido

Repositorio

Link Demo

Comparto mi resultado

La página: https://ftorreyra.github.io/manipulacion-DOM/
El repositorio: https://github.com/ftorreyra/manipulacion-DOM

Mi resultado. Esta genial el curso 😁😎 ![](

Pueden ver la página aquí
Y el repositorio acá

Tengo buen tiempo sin subir codigo a Github y me estuve peleando un rato jaja pero ahi va en mi servidor

https://levelstudio.mx/projects/cursos/DOM/workshop-1-fetch/

Link al repo https://github.com/levelstudiomx/workshop-1-fetch