From 4681678e34fb84d1fdabd507e14542d599b7b93a Mon Sep 17 00:00:00 2001 From: Carolina Date: Mon, 4 Sep 2023 13:20:07 -0300 Subject: [PATCH 01/16] primer commit --- README.md | 759 +---- package-lock.json | 7890 +++++++++++++++++++++++++++++++++++++++++++++ src/analyzer.js | 47 +- src/index.html | 69 +- src/index.js | 74 +- src/style.css | 33 + 6 files changed, 8094 insertions(+), 778 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 3f26174..cda0285 100644 --- a/README.md +++ b/README.md @@ -1,758 +1 @@ -# 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 - [` +
+ + +
+

Carolina Navarro Marticorena

+
+ + diff --git a/src/index.js b/src/index.js index 58ba255..11a61c4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,73 @@ -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` +//boton para limpiar la metrica +const textarea = document.querySelector('textarea[name="user-input"]'); +const button = document.getElementById("reset"); + +button.addEventListener("click", function () { + textarea.value = ""; +}); +// fin boton para limpiar la metrica :) + +//constantes conectadas con HTML (cajitas) +const númerodepalabras = document.querySelector( + '[data-testid="número de palabras"]' +); +const Caracteres = document.querySelector( + '[data-testid="recuento de caracteres"]' +); +const Caracteressinespacios = document.querySelector( + '[data-testid="recuento de caracteres sin espacios"]' +); +const Números = document.querySelector('[data-testid="recuento de nùmeros"]'); +const Sumanúmeros = document.querySelector( + '[data-testid="suma total de números"]' +); +const Promediolongitud = document.querySelector( + '[data-testid="longitud media de palabras"]' +); +const userinput = document.querySelector('textarea[name="user-input"]'); + +//número de Palabras// función con HTML + +userinput.addEventListener("input", () => { + const text = userinput.value; + const iCountC = analyzer.getWordCount(text); + númerodepalabras.textContent = "Número de palabras: " + iCountC; +}); +//recuento de caracteres// funciones +userinput.addEventListener("keyup", () => { + const text = userinput.value; + const iCountC = analyzer.getCharacterCount(text); + Caracteres.textContent = "Caracteres: " + iCountC; +}); +// characteres sin espacios +userinput.addEventListener("keyup", () => { + const text = userinput.value; + const iCountC = analyzer.getCharacterCountExcludingSpaces(text); + Caracteressinespacios.textContent = + "Recuento de caracteres sin espacios: " + iCountC; +}); +// Promedio Longitud de apalbras +userinput.addEventListener("keyup", () => { + const text = userinput.value; + const iCountC = analyzer.getAverageWordLength(text); + Promediolongitud.textContent = "longitud media de palabras: " + iCountC; +}); +//números +userinput.addEventListener("keyup", () => { + const text = userinput.value; + const iCountC = analyzer.getNumberCount(text); + Números.textContent = "Números: " + iCountC; +}); +//Suma de números +userinput.addEventListener("keyup", () => { + const text = userinput.value; + const iCountC = analyzer.getNumberSum(text); + Sumanúmeros.textContent = "Suma Números: " + iCountC; +}); + +// elementos +//funciones +//eventos diff --git a/src/style.css b/src/style.css index e69de29..4d9a5cb 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,33 @@ +header { + text-align: center; +} +footer { + text-align: center; +} +#reset { + background-color: aquamarine; + display: block; + margin: 0 auto; + margin-top: px; +} + +.cuadro { + background-color: rgb(6, 122, 122); + display: inline-block; + color: azure; + width: 100px; + height: 50px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} + +textarea[name="user-input"] { + display: block; + margin: 0 auto; + margin-top: 90px; + background-color: rgb(224, 240, 240); + width: 800px; + height: 200px; + color: rgb(2, 2, 1); +} From 8942b09c2e4a012162f4a27bc231606f910d1f5e Mon Sep 17 00:00:00 2001 From: Carolinava21 <142191821+Carolinava21@users.noreply.github.com> Date: Wed, 6 Sep 2023 11:28:03 -0300 Subject: [PATCH 02/16] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cda0285..0c7c3a3 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -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. \ No newline at end of file +Text Analyzer es una aplicación centrado en la codificación de strings a números. Brinda a la usuaria la opción de escribir un texto en un cuadro en donde automaticamente se le informará el número de palabras, conteo de caracteres, conteo de números, suma de números y la longitud promedio de palabras que utilice. From 85acd009314f4a9cff12c3211b1a008fca611fe0 Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 13:43:17 -0300 Subject: [PATCH 03/16] mensaje asociado --- README.md | 2 +- src/analyzer.js | 42 +++++++++++++++++++++++------------------- src/index.js | 18 ++++++++++++------ 3 files changed, 36 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index cda0285..5bf33e1 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -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. \ No newline at end of file +Text Analyzer es una aplicación centrado en la codificación de strings a números. Brinda a la usuaria la opción de escribir un texto en un cuadro en donde automaticamente se le informará el número de palabras, conteo de caracteres, conteo de números, suma de números y la longitud promedio de palabras que utilice. \ No newline at end of file diff --git a/src/analyzer.js b/src/analyzer.js index d878af5..f709839 100644 --- a/src/analyzer.js +++ b/src/analyzer.js @@ -9,33 +9,37 @@ const analyzer = { return text.length; }, getCharacterCountExcludingSpaces: (text) => { - const textWithoutSpaces = text.replace(/\s/g, ""); + const textWithoutSpaces = text.replace(/\W/g, ""); const characterCount = textWithoutSpaces.length; return characterCount; }, //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`. getNumberCount: (text) => { - const number = text.match(/-?\d+(\. d+ )?/g); - const constnumbers = number ? number.length : 0; - return constnumbers; - }, + const numbers = text.trim().split(" "); + let numberCount = 0; + for (const number of numbers) { + if (number.match(/^[0-9]+(\.[0-9]+)?$/) !== null) { + numberCount++; + } + } + + return numberCount; + }, //TODO: esta función debe retornar la suma de todos los números que se encuentran en el parámetro `text` de tipo `string`. getNumberSum: (text) => { - const numeros = /-?\d+(\. d+ )?/g; - const sumanumeros = text.match(numeros); - if (sumanumeros) { - let suma = 0; - for(let i=0; i { + return number.match(/^[0-9]+(\.[0-9]+)?$/) !== null; + }); + + let total = 0; + + for (const number of numbersArray) { + total += parseFloat(number); } + + return total; }, //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`. @@ -44,7 +48,7 @@ const analyzer = { const totalLength = words.reduce((acc, word) => acc + word.length, 0); const averageLength = words.length > 0 ? totalLength / words.length : 0; - return averageLength; + return parseFloat(averageLength.toFixed(2)); }, }; diff --git a/src/index.js b/src/index.js index 11a61c4..16ba5a2 100644 --- a/src/index.js +++ b/src/index.js @@ -5,11 +5,6 @@ import analyzer from "./analyzer.js"; const textarea = document.querySelector('textarea[name="user-input"]'); const button = document.getElementById("reset"); -button.addEventListener("click", function () { - textarea.value = ""; -}); -// fin boton para limpiar la metrica :) - //constantes conectadas con HTML (cajitas) const númerodepalabras = document.querySelector( '[data-testid="número de palabras"]' @@ -29,6 +24,17 @@ const Promediolongitud = document.querySelector( ); const userinput = document.querySelector('textarea[name="user-input"]'); +//boton para limpiar la metrica +button.addEventListener("click", function () { + textarea.value = ""; + númerodepalabras.textContent = "Número de palabras: "; + Caracteres.textContent = "Caracteres: "; + Caracteressinespacios.textContent = "Recuento de caracteres sin espacios: "; + Números.textContent = "Números: "; + Sumanúmeros.textContent = "Suma Números: "; + Promediolongitud.textContent = "Longitud de palabras: "; +}); + //número de Palabras// función con HTML userinput.addEventListener("input", () => { @@ -53,7 +59,7 @@ userinput.addEventListener("keyup", () => { userinput.addEventListener("keyup", () => { const text = userinput.value; const iCountC = analyzer.getAverageWordLength(text); - Promediolongitud.textContent = "longitud media de palabras: " + iCountC; + Promediolongitud.textContent = "Longitud de palabras: " + iCountC; }); //números userinput.addEventListener("keyup", () => { From 8ec9708b60dda934fd0b11c3cdad5bc4e67723aa Mon Sep 17 00:00:00 2001 From: Carolinava21 <142191821+Carolinava21@users.noreply.github.com> Date: Wed, 6 Sep 2023 17:20:00 -0300 Subject: [PATCH 04/16] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cda0285..c1d34fb 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -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. \ No newline at end of file +Text Analyzer es una aplicación centrado en la codificación de strings a números. Brinda a la usuaria la opción de escribir un texto en un cuadro en donde automaticamente se le informará el número de palabras, conteo de caracteres, conteo de números, suma de números y la longitud promedio de palabras que utilice From 2685bd6f0a3d6a4c79b9fa1788ca23d2c276f2af Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 18:49:28 -0300 Subject: [PATCH 05/16] esto es una prueba del commit --- src/analyzer.js | 1 + src/index.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/analyzer.js b/src/analyzer.js index f709839..a140889 100644 --- a/src/analyzer.js +++ b/src/analyzer.js @@ -11,6 +11,7 @@ const analyzer = { getCharacterCountExcludingSpaces: (text) => { const textWithoutSpaces = text.replace(/\W/g, ""); const characterCount = textWithoutSpaces.length; + console.log ("esto es un commit") return characterCount; }, //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`. diff --git a/src/index.html b/src/index.html index 71b02a1..ce9725a 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@
-

Analizador de Texto

+

Analizador

From b150552d74da50e8e6be979e68f9373b760bfdd0 Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 19:05:52 -0300 Subject: [PATCH 06/16] intento 3 --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index ce9725a..ce54a85 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Analizador de texto + Analizador From 61f16bc811fd54318666a371e0275fb2b3419540 Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 19:10:21 -0300 Subject: [PATCH 07/16] prueba 4 --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index ce54a85..806e733 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Analizador + Analizador prueba From e0493cb17000d6eb1d2e7c51c862a954498c880a Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 19:21:52 -0300 Subject: [PATCH 08/16] prouensas --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 806e733..c842e36 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Analizador prueba + Analizador prueba 2 From c1c5e7dcfadc04cb218326d3443eec1d43e98b67 Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 20:02:42 -0300 Subject: [PATCH 09/16] intentando5 --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index c842e36..0f4782e 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Analizador prueba 2 + Analizador de textos From e7b118db04cc63f36d7adeb503de9ca18ef45922 Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 6 Sep 2023 20:15:38 -0300 Subject: [PATCH 10/16] intento84 --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 0f4782e..ce54a85 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - Analizador de textos + Analizador From 7d3b36c00a4efea1f6133c80268f1265fe10282b Mon Sep 17 00:00:00 2001 From: Carolina Date: Thu, 7 Sep 2023 13:45:50 -0300 Subject: [PATCH 11/16] =?UTF-8?q?=20=C3=BAltimo=20commit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index ce54a85..ca96cba 100644 --- a/src/index.html +++ b/src/index.html @@ -2,14 +2,14 @@ - Analizador + Analizador de textos
-

Analizador

+

Analizador de texto

From 8c0c5e42550a3332aeada8303307b17f43bfcb80 Mon Sep 17 00:00:00 2001 From: Carolina Date: Mon, 29 Apr 2024 19:58:04 -0400 Subject: [PATCH 12/16] update --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 16ba5a2..dce6f3a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,8 @@ import analyzer from "./analyzer.js"; //TODO: escuchar eventos del DOM e invocar los métodos del objeto `analyzer` //boton para limpiar la metrica -const textarea = document.querySelector('textarea[name="user-input"]'); const button = document.getElementById("reset"); +const userinput = document.querySelector('textarea[name="user-input"]'); //constantes conectadas con HTML (cajitas) const númerodepalabras = document.querySelector( @@ -22,11 +22,11 @@ const Sumanúmeros = document.querySelector( const Promediolongitud = document.querySelector( '[data-testid="longitud media de palabras"]' ); -const userinput = document.querySelector('textarea[name="user-input"]'); + //boton para limpiar la metrica button.addEventListener("click", function () { - textarea.value = ""; + userinput.value = ""; númerodepalabras.textContent = "Número de palabras: "; Caracteres.textContent = "Caracteres: "; Caracteressinespacios.textContent = "Recuento de caracteres sin espacios: "; From 47f7eb307d30c140bf5a628c2554c7a6388ab8ff Mon Sep 17 00:00:00 2001 From: Carolina Date: Wed, 1 May 2024 15:14:57 -0400 Subject: [PATCH 13/16] style flexbox --- src/index.html | 2 ++ src/style.css | 35 ++++++++++++++++++++++------------- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/index.html b/src/index.html index ca96cba..7ff3812 100644 --- a/src/index.html +++ b/src/index.html @@ -13,6 +13,7 @@

Analizador de texto

+
  • Número de palabras @@ -53,6 +54,7 @@

    Analizador de texto

    Promedio longitud
+

diff --git a/src/style.css b/src/style.css index 4d9a5cb..1ee4b62 100644 --- a/src/style.css +++ b/src/style.css @@ -1,19 +1,21 @@ -header { - text-align: center; +body { + display: flex; + flex-direction: column; + align-items: center; } -footer { + +header, footer { text-align: center; } -#reset { - background-color: aquamarine; - display: block; - margin: 0 auto; - margin-top: px; + +#recuadros-container { + display: flex; + justify-content: center; + margin-bottom: 20px; } .cuadro { background-color: rgb(6, 122, 122); - display: inline-block; color: azure; width: 100px; height: 50px; @@ -22,12 +24,19 @@ footer { border: 5px solid black; } +ul { + list-style-type: none; /* Elimina los puntos de la lista */ + padding: 0; +} + +li { + display: inline; /* Hace que los elementos de la lista se muestren en línea */ +} textarea[name="user-input"] { - display: block; - margin: 0 auto; - margin-top: 90px; + display: flex; + margin: 20px auto; /* Ajusta el margen superior e inferior */ background-color: rgb(224, 240, 240); width: 800px; height: 200px; color: rgb(2, 2, 1); -} +} \ No newline at end of file From b744961495bc4086d9c5f39f6ff3d853ca2b5dd5 Mon Sep 17 00:00:00 2001 From: Carolina Date: Fri, 3 May 2024 18:39:07 -0400 Subject: [PATCH 14/16] styles fixed --- src/index.html | 4 ++-- src/style.css | 16 +++++++++++----- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/index.html b/src/index.html index 7ff3812..6d6f1fb 100644 --- a/src/index.html +++ b/src/index.html @@ -56,8 +56,8 @@

Analizador de texto

-
- +
+