marquez.juan/clase-9-eventos
1
0
Fork 16
Code Issues Pull Requests 10 Projects Releases Wiki Activity

feat: add character count functionality to text input

Browse Source
This commit is contained in:
Facundo Saucedo
2026-05-20 16:03:21 -03:00
parent 0b8e8b5bd7
commit b97fb32d67
2 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
clase-9.js
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;
});

22
index.html
View File

@@ -1,12 +1,14 @@
<!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">
<p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p> <p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p>
@@ -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">
@@ -29,5 +40,6 @@
<!-- Agregar acá el código HTML que haga falta para el ejercicio 5 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 5 -->
</div> </div>
<script src="clase-9.js"></script> <script src="clase-9.js"></script>
</body> </body>
</html> </html>