Estructura html

package.json

@@ -29,7 +29,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "jsdom": "^21.1.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
@@ -42,4 +42,4 @@
     "version": "8.3.0",
     "commit": "bd8a1a73329ce2b8362a65193c9468240ac8d9c7"
   }
-}
+}

src/analyzer.js

@@ -1,21 +1,111 @@
-const analyzer = {  
+const analyzer = {
   getWordCount: (text) => {
     //TODO: esta función debe retornar el recuento de palabras que se encuentran en el parámetro `text` de tipo `string`.
+    const word = text.split(" ");
+    //no tener en cuenta el " "
+    let count = 0;
+    for (let i = 0; i < word.length; i++) {
+      if (word[i] !== "") {
+        count++;
+      }
+    }
+    return count;
   },
   getCharacterCount: (text) => {
     //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`.
+    return text.length;
   },
   getCharacterCountExcludingSpaces: (text) => {
     //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`.
+    //contar caracteres excluyendo Espacios y signos puntuación . , ; :  ¿? ! " " - () [] /
+    const punctuation = [
+      ".",
+      ",",
+      ";",
+      ":",
+      "¿",
+      "?",
+      "!",
+      '"',
+      "(",
+      ")",
+      "[",
+      "]",
+      "/",
+      "-",
+    ];
+    let cleanText = "";
+    for (let i = 0; i < text.length; i++) {
+      if (!punctuation.includes(text[i]) && text[i] !== " ") {
+        cleanText += text[i];
+      }
+    }
+    const characterCount = cleanText.length;
+    return characterCount;
   },
-  getAverageWordLength: (text) => {    
+  getAverageWordLength: (text) => {
     //TODO: esta función debe retornar la longitud media de palabras que se encuentran en el parámetro `text` de tipo `string`.
+    let wordL = text.split(" ");
+    wordL = wordL.filter((word) => {
+      //función tipo lambda
+      return word !== "";
+    }); //devuelve todo lo que no esta vacio
+    let totalLength = 0;
+    for (const word of wordL) {
+      totalLength += word.length;
+    }
+    const averageLength = totalLength / wordL.length;
+    return parseFloat(averageLength.toFixed(2)) || 0; // si es NaN se pone en 0
   },
   getNumberCount: (text) => {
-    //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+    //TODO: esta función debe retornar cuántos números se encuentran en el parámetro `text` de tipo `string`.
+    if (!text.trim()) {
+      // Verificar si el texto está vacío o contiene solo espacios en blanco
+      return 0;
+    }
+    if (text[text.length - 1] === ".") {
+      // el ultimo caracter de mi texto.
+      text = text.substring(0, text.length - 1);
+    }
+    const words = text.split(" ");
+    let count = 0;
+    for (let i = 0; i < words.length; i++) {
+      const numero = parseFloat(words[i]); // Utilizar parseFloat para manejar números decimales
+      while (words[i].endsWith("0")) {
+        //mientras mi palabra termine en 0 esto va a ser true
+        words[i] = words[i].substring(0, words[i].length - 1); //substring retira lo solicitado
+      }
+      if (!isNaN(numero) && words[i] === numero.toString()) {
+        // Verificar si la conversión fue exitosa y no es NaN
+        count++;
+      }
+    }
+    return count;
   },
   getNumberSum: (text) => {
     //TODO: esta función debe retornar la suma de todos los números que se encuentran en el parámetro `text` de tipo `string`.
+    if (!text.trim()) {
+      // Verificar si el texto está vacío o contiene solo espacios en blanco
+      return 0;
+    }
+    if (text[text.length - 1] === ".") {
+      // el ultimo caracter de mi texto.
+      text = text.substring(0, text.length - 1);
+    }
+    const words = text.split(" ");
+    let count = 0;
+    for (let i = 0; i < words.length; i++) {
+      const numero = parseFloat(words[i]); // Utilizar parseFloat para manejar números decimales
+      while (words[i].endsWith("0")) {
+        //mientras mi palabra termine en 0 esto va a ser true
+        words[i] = words[i].substring(0, words[i].length - 1); //substring retira lo solicitado
+      }
+      if (!isNaN(numero) && words[i] === numero.toString()) {
+        // Verificar si la conversión fue exitosa y no es NaN
+        count = count + numero;
+      }
+    }
+    return count;
   },
 };
 

src/index.html

@@ -1,13 +1,43 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Analizador de texto</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>Analizador de texto</title>
-  <link rel="stylesheet" href="style.css" />
-</head>
-
-<body>
-  <script src="index.js" type="module"></script>
-</body>
-</html>
+  <body>
+    <header>
+      <h1>Analizador de texto</h1>
+      <!--estos elementos no pueden tener atributos id, ni name, ni class.-->
+      <textarea
+        name="user-input"
+        cols="30"
+        rows="40"
+        placeholder="Escribe tu mensaje aquí"
+      ></textarea>
+      <!-- Para que puedas practicar más, este elemento no puede tener atributos id, ni class. -->
+      <button id="reset-button">Limpiar</button>
+    </header>
+    <main>
+      <ul>
+        <!-- estos elementos no pueden tener atributos id ni name ni hijos. -->
+        <li class="count1" data-testid="word-count">Palabras:</li>
+        <li class="count2" data-testid="character-count">Caracteres:</li>
+        <li class="count3" data-testid="character-no-spaces-count">
+          Caracteres sin espacios:
+        </li>
+        <li class="count1" data-testid="number-count">Números:</li>
+        <li class="count2" data-testid="number-sum">Suma de números:</li>
+        <li class="count3" data-testid="word-length-average">
+          Longitud promedio palabra:
+        </li>
+      </ul>
+    </main>
+    <footer>
+      <p>Denis Alvarez - Deniisolo</p>
+      <!-- estos elementos no pueden tener atributos id ni name ni hijos. -->
+    </footer>
+    <script src="index.js" type="module"></script>
+  </body>
+</html>

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`
+//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()
+});

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;
+  }
+}