No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Maquetación del proyecto

7/20
Recursos

Aportes 29

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Les dejo un mini proyecto en HTML y CSS para que puedan utilizar si quieren practicar
Utiliza la Platzi Fake Store API, que fue creada por el Team Platzi 💚
Fue hecha rápido así que hay muchas cosas que pueden tocar y modificar a su gusto 😃
Espero les sea útil para practicar y seguir aprendiendo!
Utiliza vitejs como empaquetador para tener un entorno de desarrollo ⚡ Anímense a probarlo

git clone https://github.com/juanespinola05/platzi-fake-store-template.git
npm i
npm run dev

Cada vez toma más forma mi mini-proyecto 😁

Dato cultural:

La palabra “Mixi” proviene del idioma Otomí (un pueblo Mesoamericano, proveniente del centro de México) y significa “gato”. Su pronunciación es similar a la palabra “Michi”.

Con otro glass más fino 👌🏼

Así va el mio

asi me quedo la maquetación!!

Ahi vamos 🐶

Así vamos por ahora ❤️ quise ponerles un estilo Polaroid a las fotos utilizando border

article img{
    border: 10px solid #fff;
    border-bottom: 40px solid #fff;
}

No lo estoy estilizando, pero las fotos de los gatitos están bacanas
.

<body>
  <h1>Cats API App</h1>

  <section id="randomCats">
    <h2>Random Cats</h2>
    <article>
      <img alt="Foto de gatito 1" style="width:600px">
      <button>Save to favorites</button>
    </article>
    <article>
      <img alt="Foto de gatito 2" style="width:600px">
      <button>Save to favorites</button>
    </article>
    <article>
      <img alt="Foto de gatito 3" style="width:600px">
      <button>Save to favorites</button>
    </article>
    
    <button onclick="pickACat()">Pick another CAThino</button>
  </section>
  
  <section id="favoriteCats">
    <h2>favorites Cats</h2>
    <article>
      <img alt="Foto de gatito fav" style="width:600px">
      <button>Remove from favorites</button>
    </article>
  </section>

  <script src="main.js"></script>
</body>

.

const API_URL =
  "https://api.thecatapi.com/v1/images/search?limit=3&page=1&api_key=your-api-key";

const pickACat = async (url = API_URL) => {
  const response = await fetch(url);
  const data = await response.json();
  const imgTags = document.querySelectorAll("img");
  imgTags.forEach((element, key) => (element.src = data[key].url));
};

pickACat();

Probando con varios fondos

🐱 La palabra “michi” o “mishi” también es muy utilizado en mi país, buscando información de su origen, encontré esto:

¿Cuál es el origen de los gatos Michi?
Si eres de lo que se están preguntando sobre el origen del meme de los gatos michi, aquí te contextualizaremos para que tengas tema de conversación. El origen de la palabra “michi” está en el imperio Inca, donde no existían lo gatos. Fue cuando los conquistadores españoles llegaron a colonizar, que introdujeron esta especie de felino.

Fuente

🐱🐱 Aunque tengo que mejorar con mi CSS, me siento satisfecho por el momento con mis resultados.

Mis avances de momento:

Así va mi proyecto de michis :3

Así vamos con los michis

La interfaz ni los colores son lo mejor, pero funciona 😺

Y así va quedando el maquetado de MichiApp 😊

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dog Api</title>
</head>
<body>
  <h1>Consumo de API DOG</h1>

  <section id="RamdomDogs">
    <h2>Perros aleatorios</h2>

    <article>
      <img id="img1" width="300" alt="Dog image">
      <button>Guardar perros en favoritos</button>
    </article>
    
    <article>
      <img id="img2" width="300" alt="Dog image">
      <button>Guardar perros en favoritos</button>
    </article>
    
    <article>
      <img id="img3" width="300" alt="Dog image">
      <button>Guardar perros en favoritos</button>
    </article>

    <input type="button" value="Nuevo Perro" onclick="anotherFn()">
  </section>

  <section id="favoritesDogs">
    <h2>Perros favoritos</h2>

    <article>
      <img id="img3" width="300" alt="">
      <button>Eliminar perros de favoritos</button>
    </article>
  </section>


  <script src="./index.js"></script>
</body>
</html>

Favorite es en American English,
Favourite es en British English 🤓

La pronunciación de favorites es (fei - bruts)

Estuve practicando con la Platzi fake store:

const API = "https://api.escuelajs.co/api/v1/products";

const main = document.querySelector('main'); 

async function fetchData(url){
    const response = await fetch(url);
    const data = response.json();
    return data;
}

async function getData(url){
    try{
        const response = await fetchData(url);
        response.forEach(product =>{
            main.innerHTML += `
            <div class="tarjeta">
                <img src="${product.images[0]}" alt="product">
                <h3 class="title">${product.title}</h3>
                <p class="price">$${product.price}</p>    
            </div>
            `
        })
        return response
    }
    catch{
        throw new Error("Error at the API")
    }
}

console.log(getData(API));

Así va quedando el proyecto!
.
.

Proyecto + Consumo de API 🐱🔥

Si tienen problemas al usar la api pueden ver mi proyecto. Este puede mostrar gatos de manera random, puedes añadirlos como favoritos y eliminarlos.

En el curso hacen más cosas, pero aún no he podido darle solución a eso. Mientras tanto, pueden ver lo que logré y usarlo de muestra. Si pudieron completar todo el proyecto, compartan su código.

Código en GitHub 👈👀

Psdta: No me centré en el diseño, procuré darle solución al uso de POST y DELETE que fue lo que más problemas dio este curso. 🔥🤗

Va quedando…

Alguien mas se a preguntado porque las imagenes cargan por partes y no todos simultáneamente al recargar la pagina? Si alguien sabe podria decirme porque pasa eso? 🤔🤔
otra pregunta como hacen para poner las imágenes del mismo tamaño? 🥺🥺

No entiendo hacia a donde apunta el proyecto, pero a darle 😛

Ahí le vamos 😋