diff --git a/package-lock.json b/package-lock.json
index ef1c093..b531843 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "card-validation",
+  "name": "text-analyzer",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "card-validation",
+      "name": "text-analyzer",
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
diff --git a/src/analyzer.js b/src/analyzer.js
index 85797a8..dd3039a 100644
--- 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
index 3f32ea9..71b28ad 100644
--- 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>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 58ba255..eb8e817 100644
--- 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`
\ No newline at end of file
+//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 = ''; 
+    
+});
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index e69de29..6c1f13a 100644
--- 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;
+}
+
