Laboratoria · Barbara24ar · May 20, 2024 · May 21, 2024 · May 24, 2024 · May 27, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Rectangle.png b/src/Rectangle.png
diff --git a/src/analyzer.js b/src/analyzer.js
@@ -1,21 +1,61 @@
-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`.
+    text = text.trim();
+    if (text === "") {
+      return 0;
+    }
+    const words = text.split(/\s+/);
+    return words.length;
   },
   getCharacterCount: (text) => {
-    //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`.
+    const numero_de_caracteres = text.length;
+    return numero_de_caracteres;
   },
   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`.
+    if (typeof text !== "string") {
+      return 0;
+    }
+    let count = 0;
+    for (let i = 0; i < text.length; i++) {
+      const char = text[i];
+      if (char.match(/[\w]/)) {
+        count++;
+      }
+    }
+    return count;
   },
-  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) => {
+    if (typeof text !== "string") {
+      return 0;
+    }
+    text = text.trim();
+    if (text === "") {
+      return 0;
+    }
+    const words = text.split(/\s+/);
+    if (words.length === 0) {
+      return 0;
+    }
+    let totalCharacters = 0;
+    for (const word of words) {
+      totalCharacters += word.length;
+    }
+    return totalCharacters / words.length;
   },
   getNumberCount: (text) => {
-    //TODO: esta función debe retornar cúantos números se encuentran en el parámetro `text` de tipo `string`.
+    const numbers = text.match(/\b-?\d+(\.\d+)?\b/g);
+    if (numbers === null) {
+      return 0;
+    }
+    return numbers.length;
   },
   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`.
+    const numbers = text.match(/\b-?\d+(\.\d+)?\b/g);
+    if (numbers === null) {
+      return 0;
+    }
+    const sum = numbers.reduce((acc, num) => acc + parseFloat(num), 0);
+    return sum;
   },
 };
 

diff --git a/src/index.html b/src/index.html
@@ -5,9 +5,38 @@
   <meta charset="utf-8">
   <title>Analizador de texto</title>
   <link rel="stylesheet" href="style.css" />
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 </head>
 
 <body>
   <script src="index.js" type="module"></script>
+  <header>
+    <h1>Text - analyzer</h1>
+  </header>
+
+  <textarea placeholder="Aquí escribe tu texto" name="user-input" cols="30" rows="10"></textarea>
+
+
+  <button id="reset-button">Reset</button>
+  <section>
+    <h2>Calculo de metricas</h2>
+    <ul>
+      <li class="item one" data-testid="word-count">Recuento de palabras</li>
+      <li class="item two" data-testid="character-count">Recuento de caracteres</li>
+      <li class="item three" data-testid="character-no-spaces-count">Recuento de caracteres excluyendo espacios y signos de puntuacion</li>
+      <li class="item four" data-testid="number-count">Recuento de numeros</li>
+      <li class="item five" data-testid="number-sum">Suma total de numeros</li>
+      <li class="item six" data-testid="word-length-average">Longitud media de las palabras</li>
+    </ul>
+  </section>
+  <footer>
+    <p>Barbara Evelin Rolon</p>
+  </footer>
 </body>
-</html>
+
+</html>
+
+
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,45 @@
-import analyzer from './analyzer.js';
+import analyzer from "./analyzer.js";
 
-//TODO: escuchar eventos del DOM e invocar  los métodos del objeto `analyzer`
+const textarea = document.querySelector("[name=user-input]");
+
+const button = document.getElementById("reset-button");
+
+textarea.addEventListener("input", function (event) {
+  const wordCount = analyzer.getWordCount(event.target.value);
+  document.querySelector(
+    ".one"
+  ).textContent = `Recuento de palabras: ${wordCount}`;
+
+  const charCount = analyzer.getCharacterCount(event.target.value);
+  document.querySelector(
+    ".two"
+  ).textContent = `Recuento de caracteres: ${charCount}`;
+
+  const charCountNoSpaces = analyzer.getCharacterCountExcludingSpaces(
+    event.target.value
+  );
+  document.querySelector(
+    ".three"
+  ).textContent = `Recuento de caracteres excluyendo espacios y signos de puntuacion: ${charCountNoSpaces}`;
+
+  const numberCount = analyzer.getNumberCount(event.target.value);
+  document.querySelector(
+    ".four"
+  ).textContent = `Recuento de numeros: ${numberCount}`;
+
+  const numberSum = analyzer.getNumberSum(event.target.value);
+  document.querySelector(
+    ".five"
+  ).textContent = `Suma total de numeros: ${numberSum}`;
+
+  const averageWordLength = analyzer.getAverageWordLength(event.target.value);
+  document.querySelector(
+    ".six"
+  ).textContent = `Longitud media de las palabras: ${averageWordLength.toFixed(
+    2
+  )}`;
+});
+
+button.addEventListener("click", function () {
+  textarea.value = "";
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,193 @@
+ul {
+    list-style-type: none;
+}
+
+.item {
+    margin: 0%;
+    background: none;
+    border: 0cm;
+    box-sizing: border-box;
+    padding: 16px;
+    padding-top: 10px;
+    padding-right: 1px;
+    padding-bottom: 10px;
+    padding-left: 4px;
+    border-bottom: 1px solid #cdcdcd;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    color: black;
+    width: 525px;
+    font-family: "Inter", sans-serif;
+
+    font-weight: 500; 
+
+}
+
+.item:last-child {
+    border-bottom: none;
+    font-family: "Inter", sans-serif;
+}
+
+
+footer {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 0.9em;
+    color: #555;
+    font-family: "Inter", sans-serif;
+}
+
+section {
+    width: 100%;
+    max-width: 615px;
+    background-color: #ececec;
+    padding: 5px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-bottom: 1px;
+    padding-left: 1px
+    border-radius: 8px;
+    margin-top: 21px;
+    margin-left: 1px;
+    border: 2px solid #d6d6d6;
+    border-radius: 8px;
+}
+
+
+
+
+#reset-button {
+    background-color: black;
+    color: white;
+    font-size: 1.1rem; /* Tamaño grande del texto */
+    padding: 12px 27px; /* Espaciado interior grande */
+    border: none; /* Sin bordes */
+    border-radius: 8px; /* Bordes redondeados */
+    cursor: pointer; /* Cambiar el cursor al pasar por encima */
+    display: inline-block; /* Asegurarse de que el botón se comporte como un bloque en línea */
+    font-family: "Inter", sans-serif; /* Fuente del texto */
+    text-align: center; /* Centrar el texto */
+    margin-top: 8px;
+    margin-left: 524px;
+}
+
+#resetButton:hover {
+    background-color: #333; /* Color de fondo un poco más claro al pasar el cursor */
+}
+
+
+
+
+
+header {
+    text-align: center; /* Centrar el contenido del header */
+    padding: 20px; /* Espaciado alrededor del header */
+    padding-top: 1px;
+    padding-right: 508px;
+    padding-bottom: 6px;
+    padding-left: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    background-color: #d6d6d6; /* Color de fondo gris claro */
+    color: black; /* Color del texto */
+    font-size: 1.3rem; /* Tamaño del texto */
+    padding: 5px 137px; /* Espaciado interior */
+    padding-top: 5px;
+    padding-right: 137px;
+    padding-bottom: 5px;
+    padding-left: 137px;
+    display: inline-block; /* Comportamiento de bloque en línea */
+    font-family: "Inter", sans-serif; /* Fuente del texto */
+    font-weight: 500; /* Texto en negrita */
+    margin-top: 133px;
+    margin-left: 111px;
+    border-radius: 3px;
+
+}
+
+
+
+
+
+
+body {
+    margin: 0;
+    padding: 0;
+    padding-top: 0px;
+    padding-right: 0px;
+    padding-bottom: 0px;
+    padding-left: 878px;
+    margin-top: 0px;
+    margin-right: 0px;
+    margin-bottom: 0px;
+}
+
+
+
+/* Selector de atributo para textarea con name="user-input" */
+textarea[name="user-input"] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100vh - 100px); /* Ajusta según la altura del header */
+}
+
+/* Selector de atributo para textarea con name="user-input" */
+textarea[name="user-input"] {
+    width: 100%;
+    max-width: 624px; /* Ancho máximo del textarea */
+    height: 179px;
+    background-color: #e0e0e0; /* Color de fondo gris claro */
+    resize: none; /* No redimensionable */
+    padding: 10px; /* Espacio interno */
+    padding-top: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    font-size: 16px; /* Tamaño de fuente */
+    font-family: "Inter", sans-serif; /* Familia de fuentes */
+    color: #666; /* Color del texto */
+    box-sizing: border-box; /* Incluye el padding en el ancho total */
+    border-radius: 8px;
+    border: 0px solid #d6d6d6;
+}
+
+textarea[name="user-input"]::placeholder {
+    color: #999; /* Color del texto del placeholder */
+}
+
+
+
+
+
+
+
+/* Asegúrate de que el html y el body ocupen toda la altura de la ventana */
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex-direction: column; 
+    align-items: center; /* Centrar verticalmente */
+    justify-content: center; /* Centrar horizontalmente */
+    background-image: url('./Rectangle.png'); /* URL de tu imagen de fondo */
+    background-size: cover; /* Cubrir toda la pantalla */
+    background-position: center; /* Centrar la imagen de fondo */
+    background-repeat: no-repeat; /* No repetir la imagen de fondo */
+}
+
+
+h2 { 
+    font-family: "Inter", sans-serif;
+    font-weight: 600;
+    display: block;
+    font-size: 20px;
+    margin-block-start: 0.83em;
+    margin-block-end: 1.83em;
+    margin-inline-start: 100px;
+    margin-inline-end: 0px;
+    unicode-bidi: isolate;
+}