A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Comparte el resultado

15/28
Recursos

Aportes 102

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

隆Que genial est谩 este curso!

Mi resultado 馃槃

Repo 馃摎
Live demo 馃摎

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

Mi resultado 馃殌


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.

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 馃槂

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 馃榿

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

Asi voy chicos:

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

Modo Mobile:

Modo Pc:

El c贸digo de mi proyecto 馃槃
https://github.com/LeoCode0/workshop_1

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

锛堬浚锔讹浚锛夆啑銆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.

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:

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

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

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

Resultado Click

![](

隆Con todo, menos con miedo!
Demo realizada

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

Demo

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.

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

Algo parecido a la tiendita del curso next.js 馃槃

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

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

En mi caso he agregado un handler de estado para mostrar la descripci贸n si se hace click y ocultarla si se vuelve a hacer click. Para esto vi necesaria la creaci贸n de un ID por cada nodo que deseo mostrar. A su vez guarde el estado de cada nodo en un objeto el cual cambia de true a false dependiendo del click que se haya hecho.
Les comparto mi c贸digo y estoy atento a cualquier sugerencia.

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

// Intl API to FORMAT NUMBERS (CURRENCY)
const formatPrice = (price) => {
  const newPrice = new window.Intl.NumberFormat("es-PE", {
    style: "currency",
    currency: "PEN",
  }).format(price);
  return newPrice;
};

const details = {};
const handleDetails = (id) => {
  const detail = document.querySelector(`#${id}`);
  if(!id in details) {
    details[id] = false;
  }
  if (details[id]) {
    detail.className = "col-start-1 col-end-3 text-left mx-9 my-3 text-gray-600 hidden";
    details[id] = false;
  } else {
    detail.className = "col-start-1 col-end-3 text-left mx-9 my-3 text-gray-600";
    details[id] = true;
  }
};

const appNode = document.querySelector("#app");

// web API Fetch
// WHIT ASYNC AWAIT
const fetchAvocados = async () => {
  const response = await fetch(`${baseUrl}${API}`);
  return await response.json();
};

const avocados = await fetchAvocados();
const allItems = [];
avocados.data.forEach((item, index) => {
  // Create image
  const image = document.createElement("img");
  image.src = `${baseUrl}${item.image}`;
  image.className =
    "rounded-full h-28 w-28 my-2 col-start-1 row-start-1 row-end-3 self-center mx-auto";
  // Create Title
  const title = document.createElement("h2");
  title.textContent = item.name;
  title.className = "text-xl self-end font-semibold text-left leading-5 mr-3";
  // Create Price
  const price = document.createElement("div");
  price.textContent = formatPrice(item.price);
  price.className = "text-base text-gray-600 self-start font-medium text-left";

  //Adding Details
  const description = document.createElement("p");
  description.innerHTML = `<b>Description: </b>${item.attributes.description}`;
  const shape = document.createElement("p");
  shape.innerHTML = `<b>Shape: </b>${item.attributes.shape}`;
  const taste = document.createElement("p");
  taste.innerHTML = `<b>Taste: </b>${item.attributes.taste}`;

  const detailsContainer = document.createElement("div");
  detailsContainer.id = `details-${index}`;
  detailsContainer.append(description, shape, taste);
  detailsContainer.className =
    "col-start-1 col-end-3 text-left mx-9 my-3 text-gray-600 hidden";

  // Create container for every item
  const container = document.createElement("div");
  container.append(image, title, price, detailsContainer);
  container.className =
    "grid grid-rows-2 grid-cols-2 bg-gray-50 h-auto m-2 rounded-2xl cursor-pointer hover:bg-gray-100";
  container.onclick = () => {
    handleDetails(`details-${index}`);
  };

  allItems.push(container);
});

// Adding all nodes one time
appNode.append(...allItems);

Ha sido un excelente curso hasta ahora, veo que realmente al aprender a maquetar con html y css podemos aplicarlo en cualquiera de estos proyectos que ya son un poco mas emocionantes y complejos.

A este curso le estoy sacando el jugo鈥 o la guasacaca鈥 o el guacamole 馃し鈥嶁檪锔

Aqui esta en desktop!


Aqui esta en responsivo!

no tengo ni idea del uso de Tailwing pero leyendo la documentaci贸n pude alinear r谩pidamente los contenedores y le di algo basico de estilos, intente usar la APi intl para renderizar la fecha de hoy usando el constructor new Date()

Mi resultado 馃槂
No logr茅 subirlo a la rama main 馃槮

Mis resultados, no se usar tailwind pero le aplique css para responsive:

  • PC version

  • Tablet version

  • Mobile version

Les comparto mi trabajo, en vista m贸vil y en vista laptop

S茅 que se aprende m谩s experimentando, pero sinceramente debo profundizar mucho m谩s antes de eso. Luego vendr茅 con grandes cosas, lo prometo.

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

Pues hice esto:

Tambi茅n agregu茅 1 media query:

Les comparto mi 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
        </p>
        <h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
          Avocado - La tiendita
        </h3>
        <p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto mb-4">
          Una API siendo consumida en el curso de manipulaci贸n de Platzi 馃
        </p>
        <div id="app" class="avocado-container"></div>
      </div>
    </div>

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

mi c贸digo CSS:

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

.avocado-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.avocado-container .avocado-info{
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  /*border: 2px rgb(30, 167, 98) solid;*/
  border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.avocado-container .avocado-info:hover{
  background-color: rgba(51, 204, 255,0.4);
  border-radius: 20px;
}

.avocado-container .avocado-image{
  width: 40%;
  margin: 5px auto;
  border-radius: 50%;
}

.avocado-container .avocado-taste{
  font-weight: bold;
}

@media only screen and (max-width:600px){
  .avocado-container{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

y mi c贸digo 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', //* american dollar
    //?currency: 'GBP', //* Great Britain pounds
    //currency : 'MXN' //* Mexican peso
  }).format(price);

  return newPrice;
}

//*web api
//*Conectarnos al servidor
window.fetch(`${baseUrl}/api/avo`)
//*Procesar la respuesta y convertirla en JSON
.then(response => response.json())
//* JSON -> Data -> Renderizar info en browser
.then(responseJSON => {
  const todosLosItems = []; //*Creamos un array vac铆o que contendr谩 todos los divs con las etiquetas HTML
  responseJSON.data.forEach(item => {

    //*crear imagen
    const image = document.createElement('img');
    image.src = `${baseUrl}${item.image}`;
    image.className = 'avocado-image';

    //*crear t铆tulo
    const title = document.createElement('h2');
    title.textContent = item.name;
    //?title.style = 'font-size: 2rem';
    //?title.style.fontSize = "3rem";
    //title.className = 'text-2xl text-red-600'; //* Agregamos la clase al nodo

    //*crear precio
    const price = document.createElement('div');
    price.textContent = `Price: ${formatPrice(item.price)}`;

    //*crear sabor
    const taste = document.createElement('p');
    taste.textContent = `Taste: ${item.attributes.taste}`;
    taste.classList.add('avocado-taste');

    const container = document.createElement('div')
    container.append(image, title, price, taste); //*Al div le insertamos la imagen, el t铆tulo y el precio
    container.className = 'avocado-info';

    todosLosItems.push(container); //* Al arary le insertamos todos los divs
  });

  appNode.append(...todosLosItems); //*Insertamos a la p谩gina web el array
});

creo que debo hacerme un curso de dise帽o de interfaces jaja

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.

Asi me quedo 馃槃

Este es el mio. Saludos a todos.

Les comparto mi p谩gina, le a帽ad铆 la descripci贸n de la API y algunos estilos. Si quieren revisar el c贸digo aqui esta el repositorio

Hola:

Comparto mi proyecto

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

Saludos 馃槂

Este es mi aporte!
(

mi aporte esta muy bueno este curso he aprendido mucho

Mi deploy en githab

As铆 qued贸 el mio con CSS puro (no s茅 Tailwind).


Lo hice solo en CSS 馃槂

Hola ya volvi.
Al final decidi hacer deploy de mi repositorio con un monton de proyectos haciendo de la carpeta de este proyecto la carpeta root y asi no tuve problemas
https://avocado-adreanzoe.vercel.app/

Comparto mi resultado:

![](

Aprendiendo tailwind鈥

Lo mantuve super simple pero quise jugar agregando m谩s informaci贸n

Bueno, Aqu铆 esta disponible mi aporte en lo que va el proyecto
https://diegodevg.github.io/avocados-store/


Les dejo el enlace: Aguacates API

![](

Genial

Aqui dejo mi aporte coders!
Use otra API.
Harry Potter Characters

My store

馃憣

Este es mi resultado lo hice con base en uno de los componentes de tailwind kit y despues lo modifique para generar las tarjetas de los aguacates. 隆Me encant贸 el resultado!

![](