Ejercicio práctico: list-item de una app de to do

| Última modificación: 27 de septiembre de 2024 | Tiempo de Lectura: 2 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Un ejercicio práctico, como el de list-item de una app de to do, te puede ayudar a construir un patrón que te servirá para reproducir tareas en proyectos posteriores y, de ese modo, construir sitios web. Además, si a este post le agregas los que hemos realizado en otros artículos sobre el componente web del item list o el input action, tendrás un bosquejo mucho más amplio de lo que significa realizar los planteamientos para los web componentes en un programa específico. Ahora, no dudes en seguir aprendiendo con este post acerca de list-item de una app de to do.

¿Qué encontrarás en este post?

Ejercicio práctico

Los ejercicios prácticos nos permiten conocer nuestras habilidades, así como identificar lo que nos falta por aprender. En este caso, has llegado aquí porque quieres conocer el proceso para realizar un list-item de una app de to do, por lo que te vamos a listar lo que necesitas antes de empezar a escribir el código.

List-item de una app de to do

El web component de list-item de una app de to do se encarga de sostener cada uno de los ítems que se van agregando a la lista.

Responsabilidad

Para empezar, la responsabilidad que tendrá este proceso es la de pintar un texto dentro del ítem, el cual debe poder borrarse. Es por eso que, si se necesita un mayor nivel de complejidad, tal vez necesitemos un botón para solucionarlo.

Atributos

En el caso de los atributos, tenemos que pensar en los conceptos o elementos que nos llegan desde fuera. Por este motivo, el único atributo que debería recibir el componente para crear la aplicación de forma simple es el texto que vamos a pintar.

Eventos

Uno de los eventos que se pueden generar dentro del list-item de una app de to do es la opción de borrado del ítem, lo que va posibilitar la acción de eliminar y presentar el ítem borrado.

Custom properties

Por último, vamos a tener que pensar en las custom properties. Sin embargo, este puede ser un trabajo muy extenso, ya que las posibilidades de estas propiedades son infinita. Por ello, debes esquematizarlas para empezar a trabajarlas.

Las cuatro partes del planteamiento que te acabamos de mostrar son recursos que deberían plantearse en todos los proyectos que se van construyendo al ejecutar los web components, pues son procesos que te permitirán tenerlo todo listo y sin ningún problema en las diferentes etapas de la escritura de código.

Ya has entendido este ejercicio práctico, en el que hemos realizado un list-item de una app de to do, que es un web component que se construye dentro del desarrollo de una aplicación o página web.

Si quieres realizar más ejercicios de este tipo con ayuda de grandes profesionales en el sector, te sugerimos unirte a nuestra formación en Bootcamp Desarrollo Web, pues cuenta con diversos módulos que te permitirán dominar este campo a nivel tanto teórico como práctico en pocos meses. ¡Da el paso que te cambiará la vida y entra ya para solicitar más información!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado