## Tarea
Estás construyendo un formulario donde los usuarios pueden enviar sus datos. El objetivo es validar la entrada del usuario, proporcionar retroalimentación en tiempo real mientras escribe y evitar el envío del formulario si la entrada no es válida.
1. **Retroalimentación en Tiempo Real**:
   - Escuchar los cambios mientras el usuario escribe;
   - Dentro del manejador de eventos, verificar la longitud del valor ingresado;
   - Si es menor a 3 caracteres, establecer el contenido del `<p>` con ID `feedback` en `"Name is too short."`;
   - Si tiene 3 caracteres o más, establecer `feedback` en `"Name looks good!"`.
2. **Prevenir el Envío Predeterminado del Formulario**:
   - Escuchar los envíos del formulario;
   - Detener el comportamiento predeterminado de envío del formulario;
   - Verificar el valor ingresado;
   - Si es menor a 3 caracteres, mostrar `"Please enter a longer name"` en el `<p>` con ID `form-message`;
   - Si tiene 3 caracteres o más, mostrar `"Form submitted successfully!"` en `form-message`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNpZ24gVXAgRm9ybTwvaDE+CiAgICA8Zm9ybSBpZD0idXNlci1mb3JtIj4KICAgICAgPGxhYmVsIGZvcj0ibmFtZS1pbnB1dCI+TmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUtaW5wdXQiIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG5hbWUiIC8+CiAgICAgIDxidXR0b24gaWQ9InN1Ym1pdC1idG4iIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICAgIDxwIGlkPSJmZWVkYmFjayI+PC9wPgogICAgICA8cCBpZD0iZm9ybS1tZXNzYWdlIj48L3A+CiAgICA8L2Zvcm0+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmM2Y0ZjY7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIGNvbG9yOiAjMWYyOTM3Owp9CgpoMSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgY29sb3I6ICMzYjgyZjY7CiAgbWFyZ2luLWJvdHRvbTogMjVweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAyNXB4IDMwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDI1cHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7Cn0KCmxhYmVsIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM0YjU1NjM7CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgppbnB1dFt0eXBlPSd0ZXh0J10gewogIHBhZGRpbmc6IDEycHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7Cn0KCmlucHV0W3R5cGU9J3RleHQnXTpmb2N1cyB7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIG91dGxpbmU6IG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDhweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4zKTsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTBiOTgxOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwNTk2Njk7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpOwp9CgpidXR0b246YWN0aXZlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7Cn0KCiNmZWVkYmFjayB7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgY29sb3I6ICNmNTllMGI7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQoKI2Zvcm0tbWVzc2FnZSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGZvbnQtd2VpZ2h0OiA3MDA7CiAgbWFyZ2luLXRvcDogNnB4Owp9CgojZm9ybS1tZXNzYWdlLnN1Y2Nlc3MgewogIGNvbG9yOiAjMTBiOTgxOwp9CgojZm9ybS1tZXNzYWdlLmVycm9yIHsKICBjb2xvcjogI2VmNDQ0NDsKfQ==

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcihfX19fXywgZnVuY3Rpb24gKGV2ZW50KSB7CiAgaWYgKF9fX19fKSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0gZWxzZSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKF9fX19fLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgfSBlbHNlIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

- Utilizar el evento `input` para escuchar los cambios mientras el usuario escribe;
- Utilizar `event.target.value.length < 3` para verificar la longitud del valor ingresado;
- Utilizar el evento `submit` para escuchar los envíos del formulario;
- Utilizar `event.preventDefault()` para detener el comportamiento predeterminado de envío del formulario;
- Utilizar `nameInput.value.length < 3` para verificar el valor ingresado.

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgaXMgdG9vIHNob3J0Lic7CiAgfSBlbHNlIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgbG9va3MgZ29vZCEnOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKCdzdWJtaXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gJ1BsZWFzZSBlbnRlciBhIGxvbmdlciBuYW1lJzsKICB9IGVsc2UgewogICAgZm9ybU1lc3NhZ2UudGV4dENvbnRlbnQgPSAnRm9ybSBzdWJtaXR0ZWQgc3VjY2Vzc2Z1bGx5ISc7CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

Domina los conceptos esenciales de JavaScript, incluyendo clases, manipulación del DOM, manejo de eventos y programación asíncrona. Aprende a crear aplicaciones web dinámicas e interactivas gestionando interacciones de usuario, obteniendo y mostrando datos, y manejando operaciones asíncronas de manera eficiente. A través de una combinación de teoría, desafíos prácticos y ejemplos del mundo real, este curso te proporciona las habilidades prácticas necesarias para el desarrollo web moderno.

Aprenda los fundamentos de las clases en JavaScript, desde las declaraciones de clases hasta la definición de métodos que mejoran la funcionalidad. Descubra cómo utilizar objetos de parámetros de manera eficaz, gestionar propiedades privadas y controlar el acceso mediante getters y setters. Domine las propiedades y métodos estáticos y aproveche el poder de la herencia de clases utilizando "extends" y "super()" para construir código escalable y reutilizable.

Domina la manipulación del DOM para crear aplicaciones web dinámicas e interactivas. Navega y modifica la estructura del DOM, actualiza el contenido de forma dinámica e implementa las mejores prácticas de seguridad y rendimiento. Diferencia entre propiedades y atributos para optimizar tu código.

Desbloquee la interactividad de sus aplicaciones web dominando los eventos en JavaScript. Comprenda la propagación de eventos, controle el comportamiento de los eventos e implemente una gestión eficiente de eventos para las interacciones de usuario. Optimice el rendimiento con técnicas avanzadas como la delegación de eventos.

Profundización en JavaScript asíncrono, incluyendo callbacks, Promesas y async/await. Estudio de la obtención de datos desde APIs, integración de bibliotecas de terceros y gestión eficiente de múltiples solicitudes, desarrollando habilidades para crear aplicaciones orientadas a datos.

Desafío: Implementar Escuchadores de Eventos

Tarea

Awesome!

Desafío: Implementar Escuchadores de Eventos

Tarea