Comparte el resultado

Clase 16 de 29 • Curso de Manipulación del DOM

Clase anteriorSiguiente clase

Andrea Lozano Cataño

student•

¡Que genial está este curso!

Jimmy Buriticá Londoño

student•

Muy bien presentado Andrea.

Julio Loarte Huerto

student•

esta bonito Andrea

Rodrigo Martinez

student•

Mi resultado :D

Repo 📚 Live demo 📚

Andrés Felipe García Rendón

student•

Esta genial!!!

Rodrigo Martinez

student•

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

Alejandro Repizp

student•

Mi resultado 🚀

Max Andy Diaz Neyra

student•

Que API usaste?

Donovan Villanueva

student•

Lovely.

Paolo Joaquin Pinto Perez

student•

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

student•

Funciono perfecto, gracias!

Paolo Joaquin Pinto Perez

student•

Que bueno!, gracias por el feedback :D

Carlos Iván Ochoa Gómez

student•

Francisco Javier Pecino Leon

student•

muy chulo, el alojamiento es gratuito?

David Daniel Castillo Nava

student•

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

Carlos Eduardo Gomez García

teacher•

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

student•

I agree!!!

Luis Alexander Chip Teleyón

student•

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

Gutierrez Diego

student•

Asi voy chicos:

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

Modo Mobile:

Modo Pc:

Jhon Wilfer Orrego Gutierrez

student•

Mi primer intento

![](

https://github.com/jhonwix/PokemonApiPromise

Edgar Lopez Arroyo

student•

Se ve muy bien!! 👍

Alex Maldonado

student•

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

student•

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

student•

Gracias, me sirvió tu comentario.

JOSE GABRIEL CASTILLO MOSQUERA

student•

muchas gracias me sirvió tu aporte

John Ruiz

student•

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

student•

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

student•

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

Fidel Parabacuto

student•

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

Cristian Nicolai Hernandez Rios

student•

wow

Leonardo de los angeles Espinoza Hernandez

student•

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

Kevin Steven Hernández Méndez

student•

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

student•

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

Manuel Perez

student•

Hice un pokemon Store con el API de pokemones!!

Andrés Castellanos

student•

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

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

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

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

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

Comparte el resultado

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