Esta es una solución al desafío de frontendmentor.io.
Su desafío es desarrollar esta aplicación de tareas pendientes y lograr que se parezca lo más posible al diseño.
Puedes usar cualquier herramienta que te guste para ayudarte a completar el desafío. Entonces, si tienes algo que te gustaría practicar, no dudes en intentarlo.
Sus usuarios deberían poder:
- Agregar nuevas tareas a la lista
- Marcar tareas como completadas
- Eliminar tareas de la lista
- Filtrar tareas por activas/completadas
- Borrar todas las tareas completadas
- Alternar modo claro y oscuro
- Ver el diseño óptimo según el tamaño de la pantalla de su dispositivo
- Ver estados de desplazamiento para elementos interactivos
- Bonus: Drag and drop para reordenar los elementos de la lista
- Bonus:
Cree este proyecto como una aplicación full-stack
- React
- JavaScript
- Tailwind CSS
- Dnd kit
- Profundice las clases con Tailwind, por ejemplo, la clase
truncatees un conjunto de propiedades de CSS:overflow: hidden,white-space: nowrap,text-overflow: ellipsis. Con ellas podemos evitar que un texto se desborde y salga del contenedor. - Items
drag and dropcondnd kit
- Que el orden de las tareas se mantenga al actualizar la página luego de reordenarlas con drag and drop
- Dnd kit - Documentación.
- Fazt Code - Drag and Drop en React - Tutorial de Dnd Kit.
- Github - Blackpachamame
- Frontend Mentor - @Blackpachamame