diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..eb4d9d5 --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,31 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs + +name: Node.js CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.x, 16.x, 18.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present + - run: npm test diff --git a/README.md b/README.md index 723362f..1788a1f 100644 --- a/README.md +++ b/README.md @@ -1,727 +1,73 @@ -# Analizador de texto +## 1. Generalidades -## Índice +* Este proyecto se realizó de manera individual con planificación para finalizar en 2 sprint. -* [1. Consideraciones generales](#1-consideraciones-generales) -* [2. Preámbulo](#2-preámbulo) -* [3. Funcionalidades](#3-funcionalidades) -* [4. Boilerplate](#4-boilerplate) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Pruebas](#6-pruebas) -* [7. Pistas, tips y lecturas complementarias](#7-pistas-tips-y-lecturas-complementarias) -* [8. Consideraciones para pedir tu Project Feedback](#8-consideraciones-para-pedir-tu-project-feedback) -* [9. Objetivos de aprendizaje](#9-objetivos-de-aprendizaje) -* [10. Funcionalidades opcionales](#10-funcionalidades-opcionales) -*** +## 2. Text Analyzer -## 1. Consideraciones generales +Ejemplo text Analizer -* Este proyecto lo resolvemos de manera **individual**. -* El rango de tiempo estimado para completar el proyecto es de 1 a 3 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. +![imagen de referencia](https://contarcaracteres.es/images/ContarCaracteresEnPages.png) -## 2. Preámbulo - -![Una lupa sobre texto de libro](https://github.com/Laboratoria/bootcamp/assets/92090/2b45f653-69a5-4282-a65c-d34125c36113) - -_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)_ - -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 +El analizador de texto es una aplicación para extraer información +texto utilizando diversas técnicas, 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. - -En general, las aplicaciones de análisis de texto brindan información -valiosa y métricas sobre los textos que pueden ayudar a los usuarios a -tomar decisiones informadas y sacar conclusiones significativas. -Mediante el uso de estas herramientas de análisis, los usuarios pueden -obtener una comprensión más profunda de los textos. +oraciones y el conteo de párrafos. ## 3. Funcionalidades - -En este proyecto implementarás un analizador de texto web para calcular -y mostrar métricas de un texto enviado por el usuario. - El listado de funcionalidades es el siguiente: -1. La aplicación debe permitir al usuario 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 el usuario 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 al usuario - - **Recuento de caracteres**: la aplicación debe poder contar el número de + **Recuento de palabras**: la aplicación puede contar el número de + palabras en el texto de entrada y mostrar este recuento al usuario. + + **Recuento de caracteres**: la aplicación puede contar el número de caracteres en el texto de entrada, incluidos espacios y signos de puntuación, y mostrar este recuento al usuario. - - **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 + + **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, excluyendo espacios y signos de puntuación, y mostrar este recuento al usuario. - - **Recuento de números**: la aplicación debe contar cúantos números hay en + + **Longitud media de las palabras**: la aplicación puede calcular la + longitud media de las palabras en el texto de entrada y mostrársela al usuario. + + **Recuento de números**: la aplicación puede contar cúantos números hay en el texto de entrada y mostrar este recuento al usuario. - - **Suma total de números**: la aplicación debe sumar todos los números que + + **Suma total de números**: la aplicación puede sumar todos los números que hay en el texto de entrada y mostrar el resultado al usuario. - - **Longitud media de las palabras**: la aplicación debe calcular la - longitud media de las palabras en el texto de entrada y mostrársela al usuario. -3. La aplicación debe permitir limpiar el contenido de la caja de texto haciendo +La aplicación permite 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") - -## 4. 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. -* `docs/images`: contiene las imagenes de este README. -* `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 usuario). -* [`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). - -## 5. 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 - [` +
+ +
+
+

Creado por Bernardita del Pino Villaseca

+
+ + + diff --git a/src/index.js b/src/index.js index 58ba255..caa03d1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,27 @@ import analyzer from './analyzer.js'; - -//TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` \ No newline at end of file +const textarea = document.querySelector("textarea[name='user-input']"); +textarea.addEventListener("keyup", function () { + const text = textarea.value; + const contarCaracteres = analyzer.getCharacterCount(text); + document.getElementById("contarCaracteres").innerHTML = contarCaracteres; + const sinCaracteres = analyzer.getCharacterCountExcludingSpaces(text); + document.getElementById("sinCaracteres").innerHTML = sinCaracteres; + const contarPalabras = analyzer.getWordCount(text); + document.getElementById("contarPalabras").innerHTML = contarPalabras; + const contarNumeros = analyzer.getNumberCount(text); + document.getElementById("contarNumeros").innerHTML = contarNumeros; + const sumaNumeros = analyzer.getNumberSum(text); + document.getElementById("sumaNumeros").innerHTML = sumaNumeros; + const longitudPromedio = analyzer.getAverageWordLength(text); + document.getElementById("longitudPromedio").innerHTML = longitudPromedio; +}) +const button = document.getElementById("reset-button"); +button.addEventListener("click", function () { + textarea.value = ''; + document.getElementById("contarCaracteres").innerHTML = ''; + document.getElementById("sinCaracteres").innerHTML = ''; + document.getElementById("contarPalabras").innerHTML = ''; + document.getElementById("contarNumeros").innerHTML = ''; + document.getElementById("sumaNumeros").innerHTML = ''; + document.getElementById("longitudPromedio").innerHTML = ''; +}); diff --git a/src/style.css b/src/style.css index e69de29..63c7580 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,94 @@ +header { + text-align: -webkit-center; + font-family: math; + color: rgb(47, 40, 40); + background-color: #fabfb7; + max-width: -webkit-fill-available; + margin: 50px; + border: dashed 2px; + border-radius: 50px; + border-color: white; + width: 100%; +} +.colorDeFondo { + background-image: url('https://i.blogs.es/6e7601/paige-cody--esaigzemqu-unsplash/840_560.jpeg'); + background-size: cover; +} + +.ulEstilo { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + justify-content: center; + align-items: baseline; + justify-content: center; + margin: 9px; +} + +.liEstilo { + background-color: #fabfb7; + border-radius: 10px; + border: solid 2px white; + width: 186px; + height: 42px; + font-family: math; + font-size: 14px; + padding: 9px; + margin: 9px; +} + +.cuadroResultado { + border: solid 2px; + border-color: antiquewhite; + background-color: #ffda9e; + color: rgb(47, 40, 40); + width: 80px; + height: 30px; +} + +textarea[name="user-input"] { + text-align: -webkit-center; + font-family: math; + margin: 50px; + width: 1000px; + height: 137px; + resize: none; + margin-top: 0px; + margin-left: 150px; + font-size: 18px; + color: rgb(47, 40, 40); + font-family: math; + border: solid 3px; + border-radius: 24px; + border-color: #f19b8f; + background-color: #ffda9e; +} +#reset-button { + border: dashed 2px; + border-radius: 20px; + border-color: #f19b8f; + background-color: #ffda9e; + width: 93px; + height: 50px; + font-family: math; + font-size: 14px; + padding: 9px; + margin: 9px; + margin-left: auto; + margin-right: auto; + display: grid; +} +footer { + text-align: -webkit-center; + font-family: math; + color: rgb(47, 40, 40); + background-color: #f19b8f; + max-width: -webkit-fill-available; + margin: 50px; + border: dashed 2px; + border-radius: 10px; + border-color: white; + width: 100%; +} \ No newline at end of file