Se realiza la maquetación del HTML, donde se agrega las tags necesarias para el formulario que se pide. Posteriormente, se realiza la lógica de programación en JavaScript para la captura de los eventos del DOM y la modificación del HTML de forma dinámica y se añaden los botones que se solicitan con su uso específico.
Finalmente se le da un poco de estilo a la página con CSS.
Estructuras de carpetas:
Resumen de paso a paso y desarrollo.
Inicialmente se crea el archivo HTML y se añade la estructura básica. Se añade la etiqueta form y se crea una label y un input para cada información solicitada.
Una de las informaciones solicitadas es la categoría del producto, en este caso se utilizó un datalist para hacer que el usuario escoja de las opciones que se le brindan.
Se añade también un input en el HTML de tipo botón con el cuál posteriormente se realizará el proceso de añadir cada uno de los input en un array, mostrarlos en consola y añadirlos a la fila de una tabla creada.
Se crea la tabla donde se añadirán los inputs solicitados, se le crea un encabezado para cada input.
Se enlaza el archivo de JavaScript (JS) que se usará para la captura de eventos del DOM y las especificaciones de dinamicidad de los botones solicitados.
En el archivo de JS se realiza en primera instancia la captura de los inputs del DOM.
Se usa un .addEventListener del tipo clic para crear un arreglo vacío y posteriormente llenarlo con los valores de las capturas realizadas en el punto anterior, mediante el método .push(elemento) y que se muestre en consola el resultado cada vez que se cliquee el botón añadir; este evento también realizará los siguientes pasos:
Se usa el método .insertRow(-1) para crear una fila en la última posición de la tabla.
Se crea un for en el cual se usará el método .insertCell() para crear una celda en cada una de las columnas y el método .innerHTML = "Text" para realizar la modificación de cada una de las celdas creadas.
se usa el método .CreateElement("button") del DOM para crear una tag del tipo "button", esto para el botón que eliminará la fila en la que esté puesto, posteriormente se le añade el texto que tendrá con el método .textContent = "Nombre". Se realiza el mismo procedimiento para el botón que permitirá cada uno de los campos de la fila en la que esté puesto.
Con el método .appendChild(elemento) para añadirle la tag "button" hija a la celda creada anteriormente, esto para cada botón, comparten la misma tag padre "td".
Se añade un nuevo .addEventListener del tipo clic para el botón que permitirá eliminar la fila. Cuando se de clic se capturará un evento, la función flecha seguirá la ruta event.target que permitirá escoger donde estamos en el HTML, que en este caso sería el botón. Ahora, event.target.parentNode se ubica en la tag "td" padre del botón y finalmente event.target.parentNode.parentNode se ubica en la tag "tr" padre de la tag "td" de la que el botón eliminar es hija. Entonces, con el método .remove() se elimina esta tag del HTML, la tag "tr"; es decir, toda la fila que se añadía será eliminada.
Se añade un nuevo .addEventListener del tipo clic para el botón que permitirá editar los datos de cada celda en la fila que se creó. Se realiza el mismo procedimiento anterior que involucra event.targe.parentNode.parentNode para ubicarnos en la tag "tr" creada anteriormente, ahora se usa el método cell[pos] para ubicarnos en cada una de las tags "td" hijas. Con el método .innerHTML = prompt("Indicaciones") se realiza la modificación de cada una de las celdas.
Workshop 3: Formularios y Eventos del DOM
URL de repositorio
Descripción del desarrollo.
Se realiza la maquetación del HTML, donde se agrega las tags necesarias para el formulario que se pide. Posteriormente, se realiza la lógica de programación en JavaScript para la captura de los eventos del DOM y la modificación del HTML de forma dinámica y se añaden los botones que se solicitan con su uso específico.
Finalmente se le da un poco de estilo a la página con CSS.
Estructuras de carpetas:
Resumen de paso a paso y desarrollo.
Inicialmente se crea el archivo HTML y se añade la estructura básica. Se añade la etiqueta form y se crea una label y un input para cada información solicitada.
Una de las informaciones solicitadas es la categoría del producto, en este caso se utilizó un datalist para hacer que el usuario escoja de las opciones que se le brindan.
Se añade también un input en el HTML de tipo botón con el cuál posteriormente se realizará el proceso de añadir cada uno de los input en un array, mostrarlos en consola y añadirlos a la fila de una tabla creada.
Se crea la tabla donde se añadirán los inputs solicitados, se le crea un encabezado para cada input.
Se enlaza el archivo de JavaScript (JS) que se usará para la captura de eventos del DOM y las especificaciones de dinamicidad de los botones solicitados.
En el archivo de JS se realiza en primera instancia la captura de los inputs del DOM.
Se usa un .addEventListener del tipo clic para crear un arreglo vacío y posteriormente llenarlo con los valores de las capturas realizadas en el punto anterior, mediante el método .push(elemento) y que se muestre en consola el resultado cada vez que se cliquee el botón añadir; este evento también realizará los siguientes pasos:
Vistas:
Estadisticas Wakatime:
Estadisticas