Phone Number Validator

Este proyecto es una aplicación web que valida números de teléfono según los formatos estándar de los Estados Unidos. Además de la validación básica, he incluido un teclado DTMF interactivo que permite a los usuarios ingresar números mediante clics o toques táctiles, emulando el comportamiento de un teléfono tradicional. La aplicación también incorpora sonidos DTMF (Dual-Tone Multi-Frequency) para una experiencia más inmersiva, con la opción de silenciar los tonos si el usuario lo desea.

Conocimientos Aplicados

• Validación de patrones con expresiones regulares: Uso de RegExp para validar múltiples formatos de números de teléfono, incluyendo códigos de área, paréntesis, guiones y el código de país.
• Manipulación del DOM: Métodos como querySelector, addEventListener y textContent para interactuar con la interfaz de usuario y actualizar dinámicamente los resultados.
• Manejo de eventos: Captura de eventos como click, touchstart, keydown y keyup para gestionar la interacción del usuario con el teclado DTMF y los botones de la interfaz.
• Web Audio API: Implementación de la API de audio para generar tonos DTMF personalizados, utilizando OscillatorNode, GainNode y BiquadFilterNode para controlar las frecuencias y el volumen.
• Lógica de programación: Algoritmos para gestionar la entrada de datos, validar números de teléfono y manejar casos especiales como el borrado de caracteres (backspace) y la limpieza del campo de entrada (clear).
• Diseño responsivo: Estructura HTML semántica y estilos CSS adaptables a diferentes dispositivos, incluyendo pantallas táctiles.
• Manejo de estados: Implementación de un sistema para silenciar o activar los tonos DTMF mediante un botón de alternancia (toggle).

Funcionalidades Destacadas

1. Teclado DTMF Interactivo:

   • Permite ingresar números mediante clics o toques en la pantalla.
   • Emite sonidos DTMF correspondientes a cada tecla presionada.
   • Soporta eventos táctiles (touchstart, touchend) y de ratón (mousedown, mouseup).

2. Validación:

   • Utiliza una expresión regular (phoneRegex) para validar números de teléfono según los formatos estándar de EE. UU.
   • Muestra mensajes dinámicos en la interfaz indicando si el número es válido o no.

3. Control de Audio:

   • Genera tonos DTMF utilizando la Web Audio API.
   • Incluye un botón para silenciar o activar los sonidos, con actualización visual del estado (íconos de mute/unmute).

4. Funcionalidades Adicionales:

   • Botón de borrado (backspace) para eliminar el último carácter ingresado.
   • Botón de limpieza (clear) para restablecer el campo de entrada y los resultados.
   • Soporte para entrada de números mediante el teclado físico.

Conclusión

Este proyecto no solo valida números de teléfono, sino que también ofrece una experiencia de usuario enriquecida mediante la implementación de un teclado DTMF interactivo y sonidos personalizados. A través de su desarrollo, reforcé mis habilidades en manipulación del DOM, manejo de eventos, expresiones regulares y aprendí sobre el de la Web Audio API. Además, me permitió explorar técnicas de diseño responsivo y gestión de estados en aplicaciones web modernas.