Comparte el resultado

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

Cursos Empresas Blog Live Conf Eventos Precios

0:002:18

Comparte el resultado

Curso de Manipulación del DOM

Clase 16 de 29

Clase 16 / 29

David Daniel Castillo Nava

Hace 6 años

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

Comentarios (178)178 comentarios

Andrea Lozano Cataño

¡Que genial está este curso!

Jimmy Buriticá Londoño

Muy bien presentado Andrea.

Julio Loarte Huerto

Hace 5 años

esta bonito Andrea

Rodrigo Martinez

Mi resultado :D

Repo 📚 Live demo 📚

Andrés Felipe García Rendón

Esta genial!!!

Gracias! :D está todo hecho con lo que aprendimos en el curso.

Alejandro Repizp

Mi resultado 🚀

Max Andy Diaz Neyra

Que API usaste?

Donovan Villanueva

Hace 4 años

Lovely.

Paolo Joaquin Pinto Perez

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

Crear un repositorio en Github.
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',
  },
}

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": {
	....
  }
}

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 :D
- git remote add origin "https://github.com/<nombre-de-usuario>/<nombre-del-repo>"
- git push origin master
Se debe crear en Github además de la rama master, una rama llamada gh-pages
Habilitamos Github pages en nuestro repositorio desde settings>:
- Seleccionando gh-pages como rama para que se haga el build del proyecto.

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

Diego Andres Cardenas Caro

Funciono perfecto, gracias!

Que bueno!, gracias por el feedback :D

Carlos Iván Ochoa Gómez

Francisco Javier Pecino Leon

muy chulo, el alojamiento es gratuito?

Carlos Eduardo Gomez García

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 :D . Código del Workshop

Donovan RM

Hace 3 años

I agree!!!

Luis Alexander Chip Teleyón

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

Gutierrez Diego

Asi voy chicos:

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

Modo Mobile:

Modo Pc:

Jhon Wilfer Orrego Gutierrez

Mi primer intento

![](

https://github.com/jhonwix/PokemonApiPromise

Edgar Lopez Arroyo

Se ve muy bien!! 👍

Alex Maldonado

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 😁

Roberto Medina

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

Alexander Tzoc Alvarado

Gracias, me sirvió tu comentario.

JOSE GABRIEL CASTILLO MOSQUERA

muchas gracias me sirvió tu aporte

John Ruiz

Wenas a tod@s,

He estado trabajando con el ejercicio de los avocados, y ha quedado así

Ahora cuando trato de hacer el deploy en gitHub, obtengo la url pero me muestra la info del README:

No logro encontrar el error, he seguido los pasos, crear la repo, darle el homapage al package.json, push y crear el deploy. Pero a la hora de realizarlo, nada funciona. Dejo mi repo, por si me ayudan encontrar el error.

Muchas gracias.

Anyelo Leonardy Alvarez Baquero

Revisa las URL, que estén bien, quita el slash "/' del final de las url en el homepage del package.json y en el baseUrl del .config.js. Fue lo que a mi me funcionó.

John Jairo Rodriguez Rivas

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

Fidel Parabacuto

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

Cristian Nicolai Hernandez Rios

wow

Leonardo de los angeles Espinoza Hernandez

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

Kevin Steven Hernández Méndez

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

Demo

Johnnie Lopez

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

Manuel Perez

Hice un pokemon Store con el API de pokemones!!

Andrés Castellanos

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

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

Usando la API de internacionalización del browser

Comparte el resultado

Eventos

Reaccionar a lo que sucede en el DOM

Event propagation

Event delegation

Workshop 2: Lazy loading

Presentación del proyecto

Nuestro propio plugin Lazy Loading

Creando las imagenes con JavaScript

Intersection Observer

Aplicando Lazy loading

Comparte el resultado

Workshop 3

Proyectos propuestos

Librerías relacionadas

¿Y jQuery?

¿Y JSX?

Conclusiones

Conclusiones

Comparte el resultado