No tienes acceso a esta clase

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

Comparte el resultado

15/28
Recursos

Aportes 150

Preguntas 11

Ordenar por:

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

o inicia sesi贸n.

隆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 鈥渕ensaje鈥 O git commit -am 鈥渕ensaje鈥 // 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馃槄鈥

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:

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

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

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

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:

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

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鈥ino entran a mi usuario y ver谩n las otras dos鈥aja)

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!

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

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 鈥淢anipulaci贸n del DOM鈥. 馃槮

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

Buenas tardes,

comparto repositorio relacionado al reto.

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

Gracias.

As铆 qued贸 mi modelo, adjusnto mi Repositorio

Netlify: Live

Github: Repo

No es mucho pero es trabajo honesto

Resultado Click

![](

隆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

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