En este post, vamos a conocer los web components a partir de la items-list de una app de to do. Gracias a este ejercicio práctico, descubrirás cuáles son los planteamientos que debes tener en cuenta para desarrollar una aplicación web simple, pero muy útil.
Ejercicio práctico
Cuando estamos aprendiendo sobre web components o desarrollo web en general, es muy importante realizar ejercicios prácticos que nos acompañen en el camino de aprendizaje y ejercitación de nuestras habilidades. Por eso, una app o app web de una to-do list puede ser perfecta para empezar o para seguir aprendiendo.
En primer lugar, debemos tener claro que una to do list es una lista en la que podemos poner todo lo que tenemos que realizar en un lapso de tiempo determinado; después, podemos ir tachando lo que ya hemos realizado. Esta lista está formada por varios ítems. La aplicación tiene varios elementos o componentes, unos más grandes que otros, pero todos concretos.
Uno de los web components que puede almacenar más elementos de la app es el de la lista en sí, al que llamaremos items-list. Cabe recordar que dentro de él hay otros web components, que serán input action e item-list. Pero ¿cómo podemos plantear lo que necesitamos para el items-list de una app de to do? A continuación te lo contamos.
Items-list de una app de to do
Para empezar, tenemos que tener en cuenta todos los elementos que pertenecen al items-list de una app de to do, así entenderás qué debes desarrollar dentro del proyecto de código.
Debemos tener en cuenta de qué forma se realiza el planteamiento de un web component. En el post mencionado, se profundiza en la importancia de los conceptos que debemos valorar antes de empezar el desarrollo, que son: la responsabilidad, los atributos, los eventos y las custom properties. Todos estos deben visualizarse en una especie de borrador o bloc de notas (puedes utilizar draw.io, por ejemplo), para empezar a diseñar los que quieres en tu producto final.
Por ahora, vamos a hablar de los 4 conceptos que debes conocer antes del planteamiento del web component de los items-list de una app de to do y qué debemos a hacer para terminar de construir cada uno de ellos.
Responsabilidad
En primer lugar, encontramos el concepto de responsabilidad, que hace referencia a las responsabilidades para resolver los problemas que anteceden a la aplicación. Es por eso que, para cumplir este concepto, vamos a tener que desarrollar los siguientes procesos:
- Añadir elementos cuando proceda, es decir, cuando se necesiten dentro de la lista de los ítems.
- Para cumplir con los objetivos de responsabilidad, debemos mostrar el contador de to do activos, que pueden incrementar o disminuir. Esto significa que pueden cambiar cuando se añade uno o se elimina alguna de las tareas o task de la items-list.
- Podemos generar un texto cuando no haya ningún ítem dentro de la lista.
Atributos
De acuerdo con los atributos, tenemos que pensar en los elementos que vienen desde fuera, es decir, que se generan en el exterior, pero son importantes dentro de la app de to-do.
- Un atributo puede ser el título de la aplicación y el que aparece al abrirla, que puede ser Today´s tasks.
Eventos
En la planificación de un web component, también debemos pensar en los eventos que va a ejecutar la aplicación. Para ello, vamos a desarrollar los siguientes procesos:
- Podemos crear un elemento que se genere cada vez que se crea un ítem con la colección de ítems completados, solo por si acaso.
- La creación de ítems dentro de la lista.
Custom propieties
Este es uno de los elementos más importantes dentro de la configuración del items-list de una app de to do. Te listamos un par:
- El color o colores de la pantalla.
- Los tamaños de la letra.
Ahora que has terminado de leer este artículo y has aprendido cómo desarrollar los planteamientos para el items-list de una app de to do, es la hora de hacer esta aplicación por tu cuenta. ¿Necesitas ayuda? Únete a nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp y sigue aprendiendo para convertirte en todo un desarrollador profesional en cuestión de meses. ¡Entra y solicita más información ya mismo!
