platzi / react-practico Goto Github PK

Bonjour!

Es importante que los elementos con los que podemos interactuar en una aplicación web sean fáciles de identificar y presionar.

El primer reto de este issue es que agregues la propiedad cursor pointer a todos los elementos con los que los usuarios van a interactuar en nuestra tienda.

Y el segundo reto de este issue es que cada elemento "clickable" tenga suficiente espacio para ser fácil de presionar, ya sea usando un mouse o incluso un dedo de tus manos.

Esta guía de material design puede ayudarte aa definir los espacios y tamaños: https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes

¡Hola de nuevo!

Con este issue quiero proponerte que soluciones los problemas de scroll dentro del modal de My Order.

El modal se ve perfecto cuando agregamos unos pocos productos al carrito de compras, pero no puede contenerlos correctamente cuando agregamos demasiados elementos.

Para solucionar este reto debes trabajar de nuevo con CSS. Dale las propiedades indicadas al contenedor del modal para que sus elementos no se salgan de él, sino que le permitan al usuario hacer scroll para ver la lista completa.

También recuerda que el campo de precio total y el botón de Checkout siempre deben ser visibles, incluso cuando se deba hacer scroll para ver todos los productos agregados al carrito.

Ya no funciona el alojamiento en github pages
porfavor actualizar

Hello!

Este reto es mucho más fácil de explicar que los anteriores. El modal de My Order tiene un ícono de ir hacia atrás que debería cerrar el modal, pero por ahora no hace nada.

El reto de este issue es que no solo le permitas a los usuarios cerrar el modal presionando el botón de carrito de compras, ahora también debe cerrarse al presionar el botón de ir hacia atrás dentro del modal.

Esta vez ya no necesitas CSS, sino trabajar la lógica y comunicación de tus componentes con JavaScript y React.js.

Ciao! Non abbiamo un menu mobile! 🇮🇹 🙀 🍕

¡No tenemos menú en mobile! ¡Debes agregarlo!

Recuerda que en el curso práctico de frontend developer creamos dos componentes diferentes del menú, uno para mobile y otro para desktop.

Ya logramos que el menú desktop aparezca con interacciones de los usuarios. Ahora debes encargarte de que el menú de la versión mobile aparezca y desaparezca cuando los usuarios presionen el ícono de menú en la navbar.

Para esto vas a requerir agregar nueva lógica en JavaScript y React.js, además de terminar de ajustar el CSS del menú.

Hi!

El menú no puede visualizarse correctamente al abrirlo en la página principal con el listado de productos debido a su transparencia.

Además, los usuarios no pueden ver el menú si abrieron (o incluso si ya tenían abierto) el modal de My Order.

El reto de este issue es agregale un color de fondo al menú y encargarte de que pueda visualizarse correctamente, incluso si el modal de My Order está abierto. ¡Puro CSS!

Hey!

Con este Issue quiero proponerte que mejores el scroll de a tienda en React.

La navbar desaparece cuando hacemos scroll, pero desde allí es que debemos filtrar as categorías (en el futuro), por lo que es importante tenerlo siempre que sea posible disponible, incluso cuando hacemos scroll.

Exactamente lo mismo con el modal de My Order. Cuando hacemos scroll se queda arriba junto al menú.

Resolver este issue es un poco más complicado que darle position fixed a ambos componentes, pero con lo que aprendiste de CSS en los cursos de frontend developer serás más que capáz de resolverlo. 💪

¡Buenas!

Nuestra aplicación por ahora nos permite añadir el mismo producto al carrito cuantas veces el usuario le de click al botón al carrito.

Tu misión, si decides aceptarla, es que cada botón de añadir al carrito sepa si su producto está en el carrito o no. Y que de esta forma pueda no solo intercambiar su ícono o color de fondo, sino también su funcionalidad, agregar o eliminar a su producto del carrito de compras. 🛍️

En este reto debes trabajar CSS para los estilos del botón y también lógica en JavaScript + React.js para conseguir una buena comunicación entre tus componentes.