Comparte el resultado

Curso de Manipulación del DOM

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

Comparte el resultado

David Daniel Castillo Nava

Estudiante

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

Andrea Lozano Cataño

Jimmy Buriticá Londoño

Julio Loarte Huerto

Rodrigo Martinez

Andrés Felipe García Rendón

Alejandro Repizp

Max Andy Diaz Neyra

Donovan Villanueva

Paolo Joaquin Pinto Perez

Diego Andres Cardenas Caro

Carlos Iván Ochoa Gómez

Francisco Javier Pecino Leon

Carlos Eduardo Gomez García

Profesor

Donovan RM

Luis Alexander Chip Teleyón

Gutierrez Diego

Jhon Wilfer Orrego Gutierrez

Edgar Lopez Arroyo

Alex Maldonado

Roberto Medina

Alexander Tzoc Alvarado

JOSE GABRIEL CASTILLO MOSQUERA

John Ruiz

Anyelo Leonardy Alvarez Baquero

John Jairo Rodriguez Rivas

Fidel Parabacuto

Cristian Nicolai Hernandez Rios

Leonardo de los angeles Espinoza Hernandez

Kevin Steven Hernández Méndez

Johnnie Lopez

Manuel Perez

Andrés Castellanos

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