¿Quieres definir addnewitem para una app de to do? ¿Sabes de qué estamos hablando cuando nos referimos a los web components? En este post podrás descifrar la respuesta a ambas preguntas, pues vamos a definir addnewitem para una app de to do dentro del desarrollo de un componente web mucho más amplio. Este tipo de ejercicios te permitirán sacarle provecho a tus habilidades. ¡Anímate a aprender y sigue leyendo!
Ejercicio práctico
La mejor forma de desarrollar tus habilidades de programación web es realizando ejercicios prácticos. Es por eso que, en este artículo, te hablamos sobre los web components, etiquetas personalizadas de HTML importantísimas para el desarrollo web.
Este ejemplo lo hemos estado desarrollando en otros posts, donde planteamos los requerimientos para la creación de una app web de to do o de tareas por realizar. Allí hemos detallado las responsabilidades, los atributos y los custom elements de cada componente de nuestra app, los cuales son: items-list, input action y list item. Para la última, necesitábamos una función que nos ayudara a ir agregando nuevos elementos a nuestra lista, por lo que vamos a instanciar addnewitem.
Componente addnewitem para una app de to do
El componente addnewitem para una app de to do es el elemento que nos permitirá realizar la acción de añadir nuevos tasks o tareas dentro de una lista mucho más grande. Para instanciar addnewitem, tendremos que seguir una serie de pasos, que te vamos a contar a continuación.
En primer lugar, debemos importar la clase list item a nuestro fichero, que es donde aparecerá esta nueva función.
import = "_/list-item"
Después, debemos crearlo como un nuevo elemento HTML, que el navegador ya indica como etiqueta personalizada. Aquí JavaScript creará una nueva instancia de la etiqueta, a la cual le tenemos pasar el nombre a partir del atributo text con el método setAttribute y, después, pasar el segundo parámetro de itemText.
Hay varias alternativas para conformar esta línea de código, ya que podría generarnos un error, pues no hay ningún atributo anterior que se la haya pasado. Una de ellas es agregándole un div, por lo que instanciaremos un divElement y, dentro de este elemento, se podrá escribir nuestro componente nuevamente, que tendrá el atributo del texto.
Tienes que recordar que este componente tiene relación y comunicación con otros web components que se realizaron en el mismo ejercicio, por lo que puedes encontrar elementos que no son nativos de este ejercicio con la función addnewitem.
Después, vamos a indicar el shadow DOM con los métodos necesarios para añadirlo.
A continuación, puedes ver todo lo que te hemos contado en un solo extracto de código:
addnewitem (ItemText) {
const divElement = document.createElement ('div');
divElemet.innerHtml = '<list-item text= "${itemtText}"></list-item>';
this.shadowRoot.querySelector ('-todos-wrapper').appendChild (divElement)
}
}¿Y ahora qué?
Ya que has aprendido a definir la función addnewitem para una app de to do con este ejercicio práctico, es hora de que sigas profundizando en el uso de los web components y entiendas su importancia en el desarrollo web.
¿Sientes que todavía falta mucho por aprender? Estás en el lugar correcto para avanzar, pues te queremos acompañar en todo tu proceso con nuestra formación en Desarrollo Web Full Stack Bootcamp. Aprenderás a nivel teórico y práctico de forma íntegra e intensiva y contarás con el acompañamiento de profesionales en el sector para, en pocos meses, destacar en el mercado laboral. ¡Da el paso que te cambiará la vida y pide más información ya mismo!
