ANALIZADOR DE TEXTO

1. Introducción

El analizador de texto esta diseñado para ser una herramienta valiosa que extrae información significativa, facilitando la toma de decisiones basadas en el contenido. En este proyecto se muestran seis indicadores: palabras, caracteres, caracteres sin espacios, longitud promedio, números y suma de números; cuya funcionalidad se detalla más adelante.

2. Funcionalidades

Este analizador dispone de tres elementos principales:

2.1 Caja de Texto

Conformado por un elemento textarea que permite escribir un texto.

2.2 Métricas

Son los indicadores que proporcionan a la usuaria el resultado de la inspección cuidadosa del texto:

• Palabras: muestra el total de palabras incluidas en el texto.
• Caracteres: refleja el recuento de todos los caracteres.
• Caracteres sin espacios: al contrario que la métrica anterior nos muestra la cantidad de caracteres excluyendo espacios y signos de puntuación.
• Longitud promedio: representa la media de palabras contenidas en el texto.
• Números: identifica la cantidad de números.
• Suma de números: representa la suma total de las cifras integradas en el texto.

2.3 Botón

Este elemento restablece las métricas a su estado original, permitiendo así la inclusión inmediata de otro texto.

3. Instrucciones de Uso

• Dirígete a esta dirección.
• Una vez ahí selecciona la caja de texto y escribe el contenido que desees.
• Mientras realizas el paso anterior, visualizarás la actualización de las métricas en tiempo real al lado izquierdo.
• Luego puedes hacer uso del botón restaurar, para limpiar los indicadores.

4. Desarrollo

Este proyecto está desarrollado empleando HTML, CSS y JS.

4.1 HTML

Este analizador aplica HTML semántico, organizando el contenido en tres estructuras principales: header, main y footer.

4.2 CSS

En este proyecto se incorporó estilos con selectores de: tipo, clase, id y atributos. Además se tuvo en cuenta el modelo de cajas para su diseño.

4.3 JS

Se hizo uso de ES Modules, así como también se implementan 6 funciones que permiten la visualización de las métricas:

• getWordCount: para calcular el recuento de palabras.
• getCharacterCount: para calcular el recuento de caracteres.
• getCharacterCountExcludingSpaces: para calcular el recuento de caracteres excluyendo espacios y signos de puntuación.
• getAverageWordLength: para calcular la longitud media de las palabras.
• getNumbersCount: para contar cúantos números hay en un texto.
• getNumbersSum: para la suma longitud media de los números.

Este analizador también incluye manejo de eventos de DOM como "input" que actualiza las métricas cuando se escribe en el cuadro de texto, y el evento "click" para restaturar los indicadores.

Asi mismo se hace uso de selectores del DOM como querySelector y getElementById, se incluye la propiedad innerHTML para incorporar los datos ejecutados por los métodos sobre las métricas.

5. Diseño

Este proyecto se trabajo por hitos, cada hito incluyó el uso de HTML y JS, así como también CSS.

Se optó por un diseño básico y amigable para las usuarias, que destaca por su facilidad de uso y su enfoque minimalista.