Ejercicio 1
Crea una aplicación con Alpine JS que tenga un botón y un contador que se incremente cada vez que se...
Cómo inicializar los componentes con x-data y x-init en Alpine JS
Aprende a inicializar los componentes con x-data y x-init usando Alpine JS Conoce cómo usar x-data y x-init para crear componentes interactivos.
Ejercicio 2
Crea una aplicación con Alpine JS que tenga un campo de texto y un botón. Cuando se presione el botó...
Ejercicio 3
Crea una aplicación con Alpine JS que tenga una lista de elementos y un botón para agregar nuevos el...
Uso de x-show y enlace de propiedades con x-bind en Alpine JS
Este artículo explica detalladamente qué son x-show y x-bind en Alpine JS y cómo utilizarlos para agregar interactividad a la interfaz de usuario de una web.
Ejercicio 1
Crea un botón que permita alternar la visibilidad de un elemento de texto. Utiliza x-show para contr...
Ejercicio 2
Crea un botón que permita cambiar el color de fondo de un elemento de texto. Utiliza x-bind para enl...
Gestión de eventos en Alpine JS
Aprende cómo utilizar los eventos en Alpine JS para crear aplicaciones web interactivas y dinámicas.
Ejercicio 1: Mostrar una imagen al hacer clic en un botón
Mostrar una imagen mediante el evento click de un botón
Ejercicio 2: Validar un campo de contraseña
Validar un campo de contraseña cuando dejamos de hacer focus en el
Mostrar y ocultar un menú desplegable
Mostrar y ocultar un menú desplegable mediante un botón y la proiedad x-show
Doble enlace con x-model en Alpine JS
Aprende cómo utilizar x-model en Alpine JS para crear un doble enlace bidireccional entre un elemento HTML y una variable Javascript.
Ejercicio 1
Crea un campo de entrada con x-model que enlace con una variable Javascript llamada "nombre". Añade...
Ejercicio 2
Crea un selector de opciones con x-model que enlace con una variable Javascript llamada "opcionSelec...
Ejercicio 3
Crea una casilla de verificación con x-model que enlace con una variable Javascript llamada "aceptad...
Uso de x-if en Alpine JS
En esta clase vamos a aprender a utilizar la directiva x-if en Alpine JS para mostrar u ocultar elementos de forma dinámica en nuestras páginas web.
Ejercicio 1
Crea un componente que muestre un formulario solo si el usuario ha iniciado sesión.
Ejercicio 2
Crea un componente que muestre un mensaje diferente en función del día de la semana.
Ejercicio 3
Crea un componente que muestre una lista de elementos solo si el usuario ha seleccionado un elemento...
Uso de x-for en Alpine JS
Aprende a utilizar la directiva x-for en Alpine JS. En este clase te mostramos diferentes ejemplos para que puedas aplicar esta directiva en tus proyectos.
Ejercicio 1
Crea una lista de elementos <li> basándonos en una lista de números del 1 al 10.
Ejercicio 2
Crea una tabla con información de productos basándonos en una lista de objetos.
Ejercicio 3
Crea una galería de imágenes basándonos en una lista de objetos con la información de cada imagen.