Agregue un campo de texto a la pagina y abajo un parrafo que cuenta cuantos caracteres hay ingresados en el campo

clase-9.js

@@ -1,10 +1,18 @@
 // Agregar acá el código javascript para los ejercicios
-const boton = document.querySelector("button");
+const boton1 = document.querySelector("button");
-const parrafo = document.querySelector("p");
+const parrafo1 = document.querySelector("p");
 var i = 0
 
-boton.addEventListener("click", function () {
+boton1.addEventListener("click", function () {
     i = i + 1
-    parrafo.textContent = `Este boton ha sido clickeado ${i} veces`;
+    parrafo1.textContent = `Este boton ha sido clickeado ${i} veces`;
     console.log(`El botón fue clickeado ${i} veces`);
 });
+
+const campo = document.querySelector("input");
+const parrafo2 = document.querySelector("#contadorCaracteres");
+
+campo.addEventListener("input", (e) => {
+    parrafo2.textContent = `El campo de texto tiene ${e.target.value.length} caracteres`;
+    console.log(e.target.value); 
+});

index.html

@@ -14,7 +14,8 @@
         </div>
         <hr>
         <div id="ejercicio-2">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <input><!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
+            <p id="contadorCaracteres">El campo de texto tiene 0 caracteres.</p>
         </div>
         <hr>
         <div id="ejercicio-3">