Cambios

read-only/test/e2e/app.spec.js

@@ -106,6 +106,7 @@ test.describe('Botón:', () => {
   });
 
   test('Limpia caja de texto', async ({ page }) => {
+    const TEST_TEXT_EMPTY = '';
     const textarea = await page.locator('textarea[name="user-input"]');
     await expect(textarea).toHaveValue(TEST_TEXT_NO_NUMBERS);
     const button = await page.locator('id=reset-button')

src/analyzer.js

@@ -1,22 +1,78 @@
-const analyzer = {  
+const analyzer = {
   getWordCount: (text) => {
+    //console.log("este es el texto: " + text);
+    // se declara la variable palabrasseparadas y se le asigna el valor del texto que se recibe dividido en palabras
+    const palabrasseparadas = text.split(" ");
+    // se declara la variable arrsinespacios y por medio de la funcion filter se le eliminan los espacios de la variable palabrasseparadas
+    const arrsinespacios = palabrasseparadas.filter(palabra => palabra !== '');
+    //console.log("esto es lo que hace el split: ", text.split(" "));
+    //console.log("esto es lo que hace el filter", arrsinespacios);
+    // se declara la variable nunpalabras y se le asigna el tamaño del arreglo arrsinespacios
+    const numpalabras = arrsinespacios.length;
+    //console.log("esto es lo que hace el length: ", numpalabras);
+    // se retorna la variable numero de palabras como resultado 
+    return numpalabras;
     //TODO: esta función debe retornar el recuento de palabras que se encuentran en el parámetro `text` de tipo `string`.
   },
   getCharacterCount: (text) => {
+    const numcaracteres = text.length;// por medio le length esta contando el numero de caracteres en el texto
+    return numcaracteres;
     //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`.
   },
   getCharacterCountExcludingSpaces: (text) => {
+    const caracteressinespacios = (text.replace(/\s/g, ''));// se quitan los espacios y signos de puntuación
+    const sinespacios = caracteressinespacios.replace(/[^a-zA-Z0-9 ]/g, '');// quita los simbolos especiales a la cadena
+    return sinespacios.length;// cuenta los caracteres sin espacios ni simbolos especiales
     //TODO: 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`.
   },
-  getAverageWordLength: (text) => {    
-    //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`.
+  getAverageWordLength: (text) => {
+    const palabrasseparadas = text.split(" ");// se separa el texto en palabras
+    const arrsinespacios = palabrasseparadas.filter(palabra => palabra !== '');// al arreglo se le quitan los espacios
+    let suma = 0;
+    for (let i = 0; i < arrsinespacios.length; i++) {// por medio de for recorre la cadena y va contando los caracteres sin los espacios
+      suma += arrsinespacios[i].length;// define suma es el conteo de caracteres sin espacios
+    }
+    const media = suma / arrsinespacios.length;// declara media igual a suma entre la cuenta de arreglos sin espacios
+    const conDecimal = media.toFixed(2);// se asignan 2 decimales 
+    const esnumero = n => !!Number(n); //se declara constante para validar si es numero
+    if (esnumero(conDecimal)) { // se valida si es un numero lo que se retornara si es entra al if
+      return Number(conDecimal);
+    } else { //si no es numero retorna 0
+      return 0;
+    }
+
   },
+  //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`.
+
   getNumberCount: (text) => {
-    //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+    const palabrasseparadas = text.split(" ");// separa el texto en palabras
+    const esnumero = n => !!Number(n);
+    let contarnumeros = 0; // se declara la variable contar números
+    for (let i = 0; i < palabrasseparadas.length; i++) {// por medio de for hace un recorrido 
+      if (esnumero(palabrasseparadas[i])) { // si el arreglo en la posicion i tiene numeros, entra en el if y lo va contando
+        contarnumeros = contarnumeros + 1;
+      }
+    }
+    return contarnumeros;
   },
+  //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+
   getNumberSum: (text) => {
+    const palabrasseparadas = text.split(" ");// separa el texto en palabras
+    const esnumero = n => !!Number(n);
+    let sumanumeros = 0; // se declara la variable sumanumeros
+    for (let i = 0; i < palabrasseparadas.length; i++) { // por medio de for se hace un recorrido por el arreglo
+      if (esnumero(palabrasseparadas[i])) { // si el arreglo en la posición i tiene números entra en if
+        sumanumeros = Number(sumanumeros) + Number(palabrasseparadas[i]);// se van sumando
+      }
+    }
+    return sumanumeros;
+
     //TODO: esta función debe retornar la suma de todos los números que se encuentran en el parámetro `text` de tipo `string`.
+
   },
+
+
 };
 
 export default analyzer;

src/index.html

@@ -8,6 +8,27 @@
 </head>
 
 <body>
+
+  <video src="cascada.mp4" autoplay loop muted preload></video>
+  <header>
+    <h1>ANALIZADOR DE TEXTO</h1><br><br>
+  </header>
+  <main>
+    <ul class="resultados">
+      <li class="Caracteres">Caracteres</li>
+      <li class="Caracteressinespacios">Caracteres sin espacios</li>
+      <li class="Palabras">Palabras</li>
+      <li class="Numeros">Números</li>
+      <li class="Suma">Suma Total Números</li>
+      <li class="Promediolongitud">Promedio Longitud</li>
+    </ul><br>
+    <textarea name="user-input" cols="80" rows="5" placeholder="Ingrese Texto" autofocus></textarea><br><br>
+    <button id="reset-button">Limpiar Métricas</button>
+  </main>
+  <footer>
+    <p>Autora: Nancy Nallely Martínez Domínguez</p>
+  </footer>
   <script src="index.js" type="module"></script>
 </body>
+
 </html>

src/index.js

@@ -1,3 +1,45 @@
 import analyzer from './analyzer.js';
 
-//TODO: escuchar eventos del DOM e invocar  los métodos del objeto `analyzer`
+//TODO: escuchar eventos del DOM e invocar  los métodos del objeto `analyzer`
+
+// se crea la contante element para asignarle el valor del elemento que tiene el id reset-buton
+const Element = document.getElementById("reset-button");
+// a la variable elemento se le agrega un eventListener para que se ejecute al hacer click y llame a la funcion que esta entre parentesis
+Element.addEventListener("click", BorrarTexto);
+
+// se crea la constante caja de texto para asignarle el elemento con nombre user-input y que se encuentra en la posision 0
+const cajadetexto = document.getElementsByName("user-input")[0];
+// a la variable caja de texto se le agrega un eventlistener que se ejecuta al escribir con el teclado y que llama a la funcion que se encuentra entre parentesis
+cajadetexto.addEventListener("keyup", analizar);
+
+// se declara la variable resultado como global para poder usarla en todas las funciones
+let resultado = "";
+
+function BorrarTexto() {
+  // se declara la variable texto y se le asigna el elemento que tenga el nombre user-input
+  const texto = document.getElementsByName("user-input")[0];
+  // al valor que esta en la posicion cero de la variable texto se le asigna vacio para borrar el valor
+  texto.value = "";
+  resultado = "";
+  // se llama la funcion analizar para que esta se ejecute y llene los li con el nuevo valor de resultado
+  analizar();
+}
+function analizar() {
+  // saca el valor de todos los elementos que tengan el nombre user-input
+  //saca el valor del elemento que esta en la posicion cero
+  resultado = document.getElementsByName("user-input")[0].value;
+  // Selecciona el elemento que tine la clase palabras, y el innerhtml permite asignar un valor al contenido de este elemento
+  // despues del igual se concatena el valor de la palabra palabras con el valor que retorna el metodo getWordCount
+  document.querySelector(".Palabras").innerHTML = "Palabras       " + analyzer.getWordCount(resultado);
+  document.querySelector(".Caracteres").innerHTML = "Caracteres       " + analyzer.getCharacterCount(resultado);
+  document.querySelector(".Caracteressinespacios").innerHTML = "Caracteres sin espacios     " + analyzer.getCharacterCountExcludingSpaces(resultado);
+  document.querySelector(".Promediolongitud").innerHTML = "Promedio Longitud     " + analyzer.getAverageWordLength(resultado);
+  document.querySelector(".Numeros").innerHTML = "Numeros     " + analyzer.getNumberCount(resultado);
+  document.querySelector(".Suma").innerHTML = "Suma Total Numeros     " + analyzer.getNumberSum(resultado);
+}
+
+
+
+
+
+

src/style.css

@@ -0,0 +1,204 @@
+video,
+h1 {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+video {
+    object-fit: cover;
+    position: absolute;
+}
+
+header{
+color: rgba(197, 27, 69, 0.836);
+}
+h1 {
+    position: absolute;
+    font-size: 60px;
+    font-family: inter;
+    font-weight: 900;
+    line-height: 15vh;
+    text-align: center;
+    background: rgb(107, 175, 192);
+    mix-blend-mode: screen;
+    margin-bottom: 5px;
+}
+
+main {
+    position: absolute;
+    top: 140px;
+}
+
+textarea[name="user-input"] {
+    position: relative;
+    left: 20%;
+    border-radius: 2%;
+    box-shadow: 20px 20px 50px gray;
+    font-size: 20px;
+    border: 1px solid rgb(24, 89, 187);
+    margin: 35px 0;
+}
+
+.resultados {
+    font-size: 25px;
+    color: blue;
+    text-decoration: double;
+    list-style: none;
+    columns: 2;
+    line-height: 40px;
+    text-align: left;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 30px;
+    left: 14vw;
+    position: relative;
+    top: 5px;
+    margin: -20px 0 0 0;
+    background: transparent;
+
+}
+
+li {
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Palabras {
+    color: #200972;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Caracteres {
+    color: #d81d5b;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Numeros {
+    color: #054715af;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Caracteressinespacios {
+    color: #c767b7;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Suma {
+    color: #76397e;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+.Promediolongitud {
+    color: #b3693e;
+    font-weight: 900;
+    border: 2px solid rgb(14, 5, 139);
+    padding: 0 0px 0 0;
+    border-radius: 20%;
+    width: 14em;
+    background: transparent;
+    margin: auto;
+    display: block;
+    height: auto;
+    box-sizing: inherit;
+    content: normal;
+}
+
+#reset-button {
+    font-size: 28px;
+    background: #252525;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    width: 200px;
+    height: 50px;
+    margin: 0 auto;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    background: #0f28b4;
+    color: #fff;
+    font-size: 1.3rem;
+    cursor: pointer;
+    box-shadow: inset 0 0 0 0 #e7eb08;
+    transition: ease-out 0.6s;
+    position: relative;
+    display: block;
+    left: 15vw;
+}
+
+#reset-button:hover {
+    box-shadow: inset 200px 0 0 0 #c7e618;
+    color: #000;
+}
+
+main{
+   position: absolute;
+   text-align: center;
+}
+footer{
+    font-size: 20px;
+    color: #aa4105;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    position: absolute;
+}