¿Quieres hacer el input action de una app de to do para practicar web components? Aprender sobre web components implica realizar un ejercicio práctico tras otro, ya que es la mejor forma de localizar errores y determinar qué debemos aprender o mejorar dentro de nuestro camino de aprendizaje para convertirnos en desarrolladores web profesionales.
Es por eso que, en este post, te traemos un ejercicio práctico, en el que vamos a desarrollar un web component para una aplicación: el input action de una app de to do list.
Ejercicio práctico
Este ejercicio práctico sobre el input action de una app de to do te puede ayudar a ejercitar muchas habilidades y conceptos, ya que no solo estudia los procesos para la realización de los web components, sino también los procesos para el desarrollo web más simple.
Por eso, en este caso, vamos a empezar a descifrar este ejercicio práctico al plantearnos los principales problemas que tenemos que resolver sobre uno de los web components que puede formar este tipo de aplicación web.
Input action de una app de to do
El input action de una app de to do es el web component que constituye un componente mucho más amplio dentro del desarrollo de la app, el cual es el items-list. Así, el input action es el web component que se encarga de controlar el proceso en el que añadimos ítems a nuestra lista, y es por eso que lo definimos como una acción.
Como cualquier otro proceso, debe tener un mapeo inicial que nos permita saber qué necesitamos solucionar y cómo lo haremos. Para ello, utilizaremos las 4 etapas del planteamiento para un web component.
Responsabilidad
En primer lugar, vamos a comentar las responsabilidades que tiene este web component al solucionar un problema específico dentro y fuera de la aplicación. Para ello, listamos algunos procesos que debemos realizar:
- Debemos encontrar una forma de recoger un texto y de informar de dicho texto cuando se pulsa el botón de más (el de añadir) dentro de la pantalla de la app web.
- Construir una lógica para cuando el input no esté vacío; se puede pintar el botón de borrar.
- Construir una lógica que permita visualizar el botón de acción de forma deshabilitada, hasta el momento en el que acceda el input.
Atributos
En el caso de los atributos, estamos pensando en los datos que el web component va a recibir desde fuera y que son útiles para que este elemento web sea reutilizable. Algunos de los atributos que podrás encontrar en el input action de una app de to do son:
- El icono de la aplicación.
- El placeholder del input o el lugar en el que se podrá agregar el input.
- Un valor por defecto para el input cuando no haya sido completado.
Eventos
Los eventos para los web components son los elementos que recuentan qué información tiene que propagar el componente hacia fuera, es decir, sobre la aplicación.
- Un evento podrá determinar cuándo debe aparece el texto al pulsar el botón + (para añadir un ítem). El nombre de este evento puede definirse con la etiqueta de sendtext.
Custom properties
Por último, encontramos las custom properties, donde pensamos qué vamos a permitir que se modele desde fuera en cuanto a estilos de nuestro input action de una app de to do. Podemos pensar en muchos elementos y aquí te listamos algunos de ellos:
- El color del borde del input.
- El input.
- El borderline.
- El elemento para alinear el texto dentro del input, que puede definirse con un body position.
Ya que has terminado de leer este artículo y has aprendido un cosa más sobre los web components gracias al ejercicio práctico de crear el input action de una app de to do, es el momento de sacarle provecho de todos los conocimientos y las herramientas para avanzar en tu propio camino como programador. ¿Necesitas ayuda para cumplir este sueño? En KeepCoding somos expertos en cambiar vidas a través del aprendizaje y, con nuestra formación intensiva en Full Stack Bootcamp Desarrollo Web, podrás alcanzar todas tus metas en cuestión de meses. ¡Pide más información ahora y descubre cómo transformar tu futuro!
