feat: add character count functionality to text input

This commit is contained in:
2026-05-20 16:03:21 -03:00
parent 0b8e8b5bd7
commit b97fb32d67
2 changed files with 52 additions and 31 deletions

View File

@@ -11,3 +11,12 @@ clickButton.addEventListener('click', () => {
count++; count++;
clickCounter.textContent = count; clickCounter.textContent = count;
}); });
// Ejercicio 2
const textInput = document.getElementById('textInput');
const charCount = document.getElementById('charCount');
textInput.addEventListener('input', () => {
charCount.textContent = textInput.value.length;
});

View File

@@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Clase 9 - Eventos</title> <title>Clase 9 - Eventos</title>
<link rel="stylesheet" href="estilo.css"> <link rel="stylesheet" href="estilo.css">
</head> </head>
<body> <body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
@@ -14,7 +16,16 @@
</div> </div>
<hr> <hr>
<div id="ejercicio-2"> <div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 --> <label for="textInput">
Esto es un campo de texto, probá escribir en él:
</label>
<input type="text" id="textInput">
<p>
Caracteres ingresados:
<span id="charCount">0</span>
</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
@@ -30,4 +41,5 @@
</div> </div>
<script src="clase-9.js"></script> <script src="clase-9.js"></script>
</body> </body>
</html> </html>