Laboratoria · Maye85 · May 23, 2024 · May 23, 2024 · May 23, 2024 · May 23, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/analyzer.js b/src/analyzer.js
@@ -1,6 +1,8 @@
 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`.
+    if(!text) return 0;
+    return text.trim().split(/\s+/).length;
   },
   getCharacterCount: (text) => {
     //TODO: esta función debe retornar el recuento de caracteres que se encuentran en el parámetro `text` de tipo `string`.
@@ -16,7 +18,7 @@ const analyzer = {
   },
   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`.
-  },
+  }
 };
 
 export default analyzer;
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,31 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Analizador de texto</title>
+  <title>Analizador de textos</title>
   <link rel="stylesheet" href="style.css" />
 </head>
 
 <body>
+ <header> 
+  <h1>Analizador de texto</h1> 
+ </header>
+
+  <h2>Te presentamos una herramienta para contar las metricas de textos, que te ayudará a saber la cantidad de palabras para establecer tus tarifas en traducciones</h2>
   <script src="index.js" type="module"></script>
+  <textarea name="user-input" placeholder="Escribe tu texto aquí por favor"></textarea>
+  <ul class="lista">
+    <li class="caracteres">CARACTERES</li>
+    <li class="sin-espacios">CARACTERES SIN ESPACIOS</li>
+    <li class="palabras">PALABRAS</li>
+    <li class="numeros">NÚMEROS</li>
+    <li class="suma">SUMA DE NÚMEROS</li>
+    <li class="longitud">PROMEDIO DE LONGITUD</li>
+  </ul>
+
+  <button type="button" id="reset-button">Limpiar</button>
+
 </body>
+<footer>
+  <p>Mayerling Hernandez</p>
+</footer>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,19 @@
 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 textarea = document.querySelector("textarea");
+const palabras = document.querySelector('.lista .palabras');
+
+textarea.addEventListener("input", () => {
+    const text = textarea.value;
+    const wordCount = analyzer.getWordCount(text);
+    palabras.textContent = `PALABRAS: ${wordCount}`;
+});
+
+const resetButton = document.getElementById('reset-button');
+ console.log(resetButton);
+resetButton.addEventListener('click', () => {
+    textarea.value = ''; 
+
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,27 @@
+h1 {
+    color: rgb(251, 251, 252);
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
+
+h2{
+    color:rgba(208, 185, 250, 0.808);
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: medium;
+}
+p {
+    color:rgb(57, 12, 129);
+    font-family: 'Times New Roman', Times, serif;
+    font-size: small
+}
+
+html {
+    background: linear-gradient(to bottom,#8e59b6,#DEB4FF);
+}
+
+#limpiar {
+  background-color: rgb(235, 240, 239);
+  text-align: center;
+  border-radius: 35px;
+}
+