saucedo.facundo/clase-9-eventos
1
0
Fork 0
forked from marquez.juan/clase-9-eventos
Code Pull Requests 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;
});

72
index.html
View File

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