/MemeCreator

Quinta practica del curso de React en Codo a Codo, implementando: React + Bootstrap para los estilos + html2canvas + SweetAlert2

Primary LanguageJavaScript

Meme Creator

La quinta práctica del curso de React con Codo a Codo.

Consigna: crear un generador de Memes, donde el usuario puede elegir:

  • título del meme

  • imagen del meme

  • Color de fondo del meme

Agregue la opción de poder modificar el color del texto y donde se ve el mismo (arriba de la imagen, abajo de la imagen, en ambos lados).

Demo

Haciendo click aca - meme-creator-cac.netlify.app/ la pueden probar.

Tecnologías 🛠️

- HTML5

-CSS3

-JavaScript

-React: useState, evento onChange.

-Bootstrap para los estilos.

-sweet alert 2 para los alertas

-html2canvas

-create-react-app para armar la aplicación.

  • dependencias del proyecto: react, react-bootstrap, react-color, react-dom, react-scripts

  • API memes, haciendo el fetch a https://api.imgflip.com/get_memes, se muestran las imagenes de las 10 primeras. Dentro del proyecto, en api/ Response-mockup.json se copio una respuesta de la misma API para tener como ejemplo.

Versión Mobile/Tablet:

primera parte de vista mobile/tablet

segunda parte de vista mobile/tablet

  • Al hacer las descarga se muestra un cartel de vconfirmación utilizanod SweetAlert2:

mensaje de confirmacion de descarga de meme

Versión Desktop:

vista en vestion desktop

Por favor: 🎁

  • Comparte este proyecto con otros 📢

  • Invita una cerveza 🍺 o un café ☕ a alguien del equipo.

  • Muchas gracias 🤓.

Notas

Agradezco su interés en este proyecto ⌨️ con ❤️ de María Eugenia Costa 😊 y sígueme en LinkedIn - maria-eugenia-costa