diff --git a/README.md b/README.md index 469d4c7..d6325f7 100644 --- a/README.md +++ b/README.md @@ -1,788 +1,21 @@ -# Analizador de texto +# **¡Hola! Bienvenidas al Analizador de Texto de Denis Alvarez - Deniisolo 👩🏽‍🏫** -## Índice +Para acceder al **Analizador de Texto**, simplemente haz clic en este enlace de GitHub Pages: [Analizador de Texto](https://deniisolo.github.io/DEV014-text-analyzer/src/) -* [1. Consideraciones generales](#1-consideraciones-generales) -* [2. Preámbulo](#2-preámbulo) -* [3. Resumen del proyecto](#3-resumen-del-proyecto) -* [4. Funcionalidades](#4-funcionalidades) -* [5. Boilerplate](#5-boilerplate) -* [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto) -* [7. Pruebas](#7-pruebas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Consideraciones para pedir tu Project Feedback](#9-consideraciones-para-pedir-tu-project-feedback) -* [10. Objetivos de aprendizaje](#10-objetivos-de-aprendizaje) -* [11. Funcionalidades opcionales](#11-funcionalidades-opcionales) +Esta aplicación fue diseñada pensando en estudiantes, profesoras e incluso escritoras que deseen conocer estadísticas sobre su texto. -*** +Aquí están las funciones que ofrece: -## 1. Consideraciones generales +**Recuento de caracteres:** La aplicación puede contar el número total de caracteres en el texto de entrada, incluyendo espacios y signos de puntuación, y mostrar este recuento. -* Este proyecto lo resolvemos de manera **individual**. -* El rango de tiempo estimado para completar el proyecto es de 2 a 4 Sprints. -* Enfócate en aprender y no solamente en "completar" el proyecto. -* Te sugerimos que no intentes saberlo todo antes de empezar a codear. - No te preocupes demasiado ahora por lo que _todavía_ no entiendas. - Irás aprendiendo. +**Recuento de caracteres excluyendo espacios y signos de puntuación:** La aplicación puede contar el número de caracteres en el texto de entrada, pero esta vez excluyendo espacios y signos de puntuación, y mostrar este recuento. -## 2. Preámbulo +**Recuento de números:** La aplicación puede contar cuántos números hay en el texto de entrada y mostrar este recuento. -![Una lupa sobre texto de libro](https://github.com/Laboratoria/curriculum/assets/92090/2b45f653-69a5-4282-a65c-d34125c36113) +**Suma total de números:** La aplicación puede sumar todos los números presentes en el texto de entrada y mostrar el resultado. -_Credito: Foto de [ethan](https://unsplash.com/fr/@andallthings?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ -_en [Unsplash](https://unsplash.com/es/fotos/72NpWZJOskU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_ +**Longitud media de las palabras:** La aplicación puede calcular la longitud media de las palabras en el texto de entrada y mostrarla. -Un analizador de texto es una aplicación para extraer información útil de un -texto utilizando diversas técnicas, como el procesamiento del lenguaje -natural (NLP), el aprendizaje automático (ML) y el análisis estadístico. -Estas aplicaciones pueden proporcionar una variedad de métricas que brindan -información básica sobre la longitud y la estructura del texto como por -ejemplo, el conteo de palabras, el conteo de caracteres, el conteo de -oraciones y el conteo de párrafos. Otras métricas incluyen el análisis -de sentimientos, que utiliza técnicas de NLP para determinar el tono -general positivo, negativo o neutral del texto, y el análisis de -legibilidad, que utiliza algoritmos para evaluar la complejidad y la -legibilidad del texto. +**Decisiones de diseño:** -En general, las aplicaciones de análisis de texto brindan información -valiosa y métricas sobre los textos que pueden ayudar a las usuarias a -tomar decisiones informadas y sacar conclusiones significativas. -Mediante el uso de estas herramientas de análisis, las usuarias pueden -obtener una comprensión más profunda de los textos. - -## 3. Resumen del proyecto - -En este proyecto crearás una aplicación web que servirá para que tu usuaria -pueda analizar un texto en el navegador mostrando una serie de indicadores y -métricas específicas sobre caracteres, letras, números, etc. Que hayan sido -enviadas como _input_ por ella. Lo harás utilizando HTML, CSS y JavaScript. - -## 4. Funcionalidades - -El listado de funcionalidades es el siguiente: - -1. La aplicación debe permitir a la usuaria ingresar un texto escribiéndolo -en un cuadro de texto. - -2. La aplicación debe calcular las siguientes métricas y actualizar el -resultado en tiempo real a medida que la usuaria escribe su texto: - - - **Recuento de palabras**: la aplicación debe poder contar el número de - palabras en el texto de entrada y mostrar este recuento a la usuaria - - **Recuento de caracteres**: la aplicación debe poder contar el número de - caracteres en el texto de entrada, incluidos espacios y signos de - puntuación, y mostrar este recuento a la usuaria. - - **Recuento de caracteres excluyendo espacios y signos de puntuación**: - la aplicación debe poder contar el número de caracteres en el texto de - entrada, excluyendo espacios y signos de puntuación, y mostrar este recuento - a la usuaria. - - **Recuento de números**: la aplicación debe contar cúantos números hay en - el texto de entrada y mostrar este recuento a la usuaria. - - **Suma total de números**: la aplicación debe sumar todos los números que - hay en el texto de entrada y mostrar el resultado a la usuaria. - - **Longitud media de las palabras**: la aplicación debe calcular la - longitud media de las palabras en el texto de entrada y mostrársela a la usuaria. - -3. La aplicación debe permitir limpiar el contenido de la caja de texto haciendo -clic en un botón. - -![Text analyzer demo](https://github-production-user-asset-6210df.s3.amazonaws.com/12631491/240650556-988dcd6f-bc46-473b-894c-888a66c9fe2d.gif "Text analyzer demo") - -## 5. Boilerplate - -La lógica del proyecto debe estar implementada completamente en JavaScript. En -este proyecto NO está permitido usar librerías o frameworks, solo JavaScript -puro también conocido como Vanilla JavaScript. - -Para comenzar este proyecto tendrás que hacer un _fork_ y _clonar_ este -repositorio que contiene un _boilerplate_ con tests (pruebas). Un _boilerplate_ -es la estructura básica de un proyecto que sirve como un punto de partida con -archivos y configuración inicial de dependencias y tests. - -El boilerplate que les damos contiene esta estructura: - -```text -./ -├── .babelrc -├── .editorconfig -├── .eslintrc -├── .gitignore -├── README.md -├── package.json -├── src -│ ├── analyzer.js -│ ├── index.html -│ ├── index.js -│ └── style.css -└── test - ├── .eslintrc - └── analyzer.spec.js -``` - -### Descripción de scripts / archivos - -* `README.md`: debes modificarlo para explicar la información necesaria para el - uso de tu aplicación - web, así como una introducción a la aplicación, su funcionalidad y decisiones - de diseño que tomaron. -* `.github/workflows`: esta carpeta contine la configuracion para la ejecution - de Github Actions. No debes modificar esta carpeta ni su contenido. -* `read-only/`: esta carpeta contiene las pruebas de criterios mínimos de - aceptación y end-to-end. No debes modificar esta carpeta ni su contenido. -* [`src/index.html`](./src/index.html): este es el punto de entrada a tu - aplicación. Este archivo debe contener tu HTML. -* [`src/style.css`](./src/style.css): este archivo debe contener las reglas de - estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el - uso de frameworks de CSS (Bootstrap, Materialize, etc). -* [`src/analyzer.js`](./src/analyzer.js): acá debes implementar el objeto - `analyzer`, el cual ya está _exportado_ en el _boilerplate_. Este objeto - (`analyzer`) debe contener seis métodos: - - `analyzer.getWordCount(text)`: esta función debe retornar el recuento de - palabras que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCount(text)`: esta función debe retornar el recuento - de caracteres que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getCharacterCountExcludingSpaces(text)`: esta función debe retornar - el recuento de caracteres excluyendo espacios y signos de puntuación que se - encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberCount(text)`: esta función debe retornar cúantos números - se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getNumberSum(text)`: esta función debe retornar la suma de todos - los números que se encuentran en el parámetro `text` de tipo `string`. - - `analyzer.getAverageWordLength(text)`: esta función debe retornar la longitud - media de palabras que se encuentran en el parámetro `text` de tipo `string`. - En este caso usa 2 dígitos decimales. - - Para ejemplo de uso de cada función recomendamos ver el archivo - [`test/analyzer.spec.js`](./test/analyzer.spec.js). - - _Nota: para simplificar las funcionalidades, definiremos las palabras como - un grupos de caracteres separados por espacios. Por ejemplo las palabras del - texto de entrada `¡Si, Tú puedes hacerlo!` son cuatro:_ - - - _`¡Si,`_ - - _`Tú`_ - - _`puedes`_ - - _`hacerlo!`_ - -* [`src/index.js`](./src/index.js): acá debes escuchar eventos del DOM, invocar - los métodos del objeto `analyzer` según sea necesario y actualizar el resultado - en la UI (interfaz de usuaria). -* [`test/analyzer.spec.js`](./test/analyzer.spec.js): este archivo contiene las -pruebas unitarias para los métodos del objeto `analyzer`. - -*** - -#### Deploy - -Hacer que los sitios estén publicados (o _desplegados_) para que usuarias de -la web puedan acceder a él es algo común en proyectos de desarrollo de software. - -En este proyecto, utilizaremos _Github Pages_ para desplegar nuestro sitio web. - -El comando `npm run deploy` puede ayudarte con esta tarea y también puedes - consultar su [documentación oficial](https://docs.github.com/es/pages). - -## 6. Criterios de aceptación mínimos del proyecto - -A continuación encontrarás los criterios de aceptación mínimos del proyecto -relacionados con cada objetivo de aprendizaje. - -### HTML - -* **Uso de HTML semántico** - - - [ ] La aplicación tiene un encabezado conformado por un - [`
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - que es padre de un - [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1) - con texto `Analizador de texto`. Para que puedas practicar más, estos - elementos no pueden tener atributos `id`, ni `name`, ni `class`. - - - [ ] La aplicación usa un - [` + + +

+
+ +
+ + + + diff --git a/src/index.js b/src/index.js index 58ba255..6ba4a61 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,60 @@ -import analyzer from './analyzer.js'; +import analyzer from "./analyzer.js"; -//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` \ No newline at end of file +//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` +const input = document.querySelector("textarea[name='user-input']"); +const inputFunction = function () { + // 1 Función:Contar el numero de palabras + const wordcount = analyzer.getWordCount(input.value); + // tengo que acceder al ul + const uls = document.getElementsByTagName("ul"); + // acceder a 1 li + const firstChild = uls[0].children[0]; + //asignarle el texto al li 1 + firstChild.innerHTML = "Palabras: " + wordcount; + + //2 Función: Recuento de caracteres + const countCharacter = analyzer.getCharacterCount(input.value); + // acceder a 2 li + const secondChild = uls[0].children[1]; + //asignarle el texto al li 2 + secondChild.innerHTML = "Caracteres: " + countCharacter; + + // 3 Función: Recuento de caracteres excluyendo espacios y signos de puntuación: + const countCharacterwtout = analyzer.getCharacterCountExcludingSpaces( + input.value + ); + // tengo que acceder a li 3 + const thirdChild = uls[0].children[2]; + //asignarle el texto al li 3 + thirdChild.innerHTML = "Caracteres sin espacios: " + countCharacterwtout; + + //4 Función: Recuento de números: + const countNumbers = analyzer.getNumberCount(input.value); + // tengo que acceder a li 4 + const fourthChild = uls[0].children[3]; + //asignarle el texto al li 4 + fourthChild.innerHTML = "Números: " + countNumbers; + + //5 función Suma total de números: + const sumNumber = analyzer.getNumberSum(input.value); + // tengo que acceder a li 5 + const fifthChild = uls[0].children[4]; + //asignarle el texto al li 5 + fifthChild.innerHTML = "Suma de números: " + sumNumber; + + //6 función Longitud media de las palabras: + const lengthWord = analyzer.getAverageWordLength(input.value); + // tengo que acceder a li 6 + const sixthChild = uls[0].children[5]; + //asignarle el texto al li 6 + sixthChild.innerHTML = "Longitud promedio palabra: " + lengthWord; +} +input.addEventListener("input",inputFunction); + +const button = document.getElementById("reset-button"); + +button.addEventListener("click", function () { + //Borrar lo que este en el input + input.value=""; + inputFunction() +}); diff --git a/src/style.css b/src/style.css index e69de29..ebf7e9e 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,112 @@ +:root { + --pig: #de6896; + --yellow: #f0cc56; + --purple-Soft: #e5dbfe; + --purple: #4f3d9f; + --black: #060012; + --white: #fefefe; +} + +* { + font-family: "Open Sans", "Helvetica Neue", sans-serif; +} + +header { + background-color: #e5dbfe; + border-radius: 2rem; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto; + gap: 1rem; + place-items: center; + box-shadow: 0 0 10px #646365; + margin: 30px; +} + +#reset-button { + background-color: #4f3d9f; + color: var(--white); + height: 50px; + width: auto; + min-width: 100px; + border-radius: 20px; + border-style: none; + margin: 0 auto 30px; +} + +footer { + display: grid; + grid-template-rows: auto; + font-weight: 600; + font-size: 1.5rem; + place-items: end; + margin: 0 30px; +} + +textarea[name="user-input"] { + background-color: var(--white); + border-radius: 1rem; + height: 100px; + width: 90%; + max-width: 400px; + border-style: dashed; + margin-top: 10px; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; +} + +ul { + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; +} + +.count { + border-radius: 1rem; + color: var(--white); + padding: 10px; + height: 200px; + font-size: 1.5rem; + display: grid; + justify-items: center; + font-weight: 600; +} + +.count1, +.count2, +.count3 { + list-style-type: none; + border-radius: 1rem; + color: var(--white); + padding: 10px; + height: 100px; + width: 200px; + font-size: 1.5rem; + display: grid; + justify-items: center; + margin: 10px; +} + +.count1 { + background: var(--yellow); +} + +.count2 { + background: var(--pig); +} + +.count3 { + background: var(--purple); +} + +@media (max-width: 768px) { + .count1, + .count2, + .count3 { + height: 50px; + font-size:15px; + width: 100px; + } +}