diff --git a/README.md b/README.md index 3f26174..8c75c26 100644 --- a/README.md +++ b/README.md @@ -1,758 +1,8 @@ -# Analizador de texto - -## Índice - -* [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) - -*** - -## 1. Consideraciones generales - -* 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. - -## 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 -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 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. -* `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 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 - [` +
+ + + +
+ Created by Giselle Lopez +
- \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index 58ba255..708f675 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,64 @@ -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 +const inputText = document.querySelector('[name="user-input"]'); +inputText.addEventListener("keyup", () => calculateMetrics(inputText.value)); + +const metrics = [ + "Words", + "Characters", + "Characters without space", + "Numbers", + "Sum of numbers", + "Average word length", +]; +const metricsContainer = document.querySelector(".metricsContainerPrincipal"); +for (const metric of metrics) { + const container = document.createElement("div"); + const subTitle = document.createElement("h1"); + container.classList.add("metric-container"); + container.id = metric; + subTitle.textContent = metric + ": " + 0; + container.append(subTitle); + metricsContainer.appendChild(container); +} + +function calculateMetrics(text) { + const metricContainers = document.querySelectorAll(".metric-container"); + metricContainers.forEach((container) => { + const metricId = container.id; + switch (metricId) { + case "Words": + container.querySelector("h1").textContent = + "Words: " + analyzer.getWordCount(text); + break; + case "Characters": + container.querySelector("h1").textContent = + "Characters: " + analyzer.getCharacterCount(text); + break; + case "Characters without space": + container.querySelector("h1").textContent = + "Characters without space: " + + analyzer.getCharacterCountExcludingSpaces(text); + break; + case "Numbers": + container.querySelector("h1").textContent = + "Numbers: " + analyzer.getNumberCount(text); + break; + case "Sum of numbers": + container.querySelector("h1").textContent = + "Sum of numbers: " + analyzer.getNumberSum(text); + break; + case "Average word length": + container.querySelector("h1").textContent = + "Average word length: " + analyzer.getAverageWordLength(text); + break; + default: + break; + } + }); +} +const buttonReset = document.getElementById("reset-button"); +buttonReset.addEventListener("click", ()=> { + inputText.value = ''; + calculateMetrics(inputText.value) +}); \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29..ae7d021 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,151 @@ +@font-face { + font-family: fontPrincipal; + src: url(../src/fonts/TT\ Octosquares\ Trial\ DemiBold.ttf); +} +@font-face{ +font-family: titleFont; +src:url(../src/fonts/Golden\ Age\ Shad.ttf); +} + +@keyframes changeColors{ + 0%{background-position: 0 50%;} + 50%{background-position: 100% 50%;} + 100%{background-position: 0 50%;} +} + +html { + background: linear-gradient(45deg,palegoldenrod,pink,palegreen,skyblue); + background-size: 400% 400%; + position: relative; + animation: changeColors 10s ease-in-out infinite; height: 100%; +} +body, header, footer, main { +display: flex; +place-content: center; +align-items: center; +flex-direction: column; +width: 100%; + +} +body { +height: 100%; +gap: 10px; +} +main{ +gap: 15px; +height: 70%; +} +.title { + color: black; + font-size: 40px; + font-family: titleFont; +margin: 15px 0; +} +footer { + font-family: fontPrincipal; + font-size: 15px; + height: 15%; +} +header { + height: 15%; +} + +textarea[name="user-input"] { + padding: 15px; + width:70%; + height: 190px; + border-width: 2px; + border-radius: 10px; + border-color:black; + background-color: rgba(255, 255, 255, 0.5); + font-family: fontPrincipal; + +} + +#reset-button { + color: black; + transition-duration: 0.2s; + font-family: fontPrincipal; + letter-spacing: 3px; + font-weight:bolder; + font-size: 16px; + border-color:black; + border-width: 2px; + padding: 10px; + border-radius: 10px; + background: linear-gradient(45deg,rgb(255, 241, 83),rgb(255, 88, 116),rgb(83, 242, 83),rgb(35, 193, 255)); + background-size: 400% 400%; + position: relative; + animation: changeColors 10s ease-in-out infinite; +} +#reset-button:hover { +color: white; +font-size: 18px; +} +.metricsContainerPrincipal { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + grid-auto-rows: minmax(20px, auto); + +} +.metric-container { +font-size: 8px; +display: flex; +place-content: center; +align-items: center; + font-family: fontPrincipal; + border-color: white ; + color: white; + border-style:solid; + max-width: 250px; + height: auto; + border-width: 2px; + border-radius: 10px; + padding: 0px 10px; + display: flex; + background-color: rgb(0, 0, 0, 0.7); +} + +@media only screen and (min-width: 769px) and (max-width: 1024px) { + .title { + margin-top: 30px; + font-size: 50px; + } + .metricsContainerPrincipal { + height: 30%; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: minmax(70px, auto); + } + .metric-container { + font-size: 12px; + text-align: center;} + textarea[name="user-input"] { + height: 70%; + } + #reset-button { + font-size: 35px; + + } + footer { + font-size: 25px; + } + +} + +@media only screen and (max-width: 768px) { + .title { + font-size: 30px; + } + .metricsContainerPrincipal { + grid-template-columns: repeat(2, 0.6fr); + } + .metric-container { + font-size: 7px; + text-align: center; + } + textarea[name="user-input"] { + height: 220px; + } +} +