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++;
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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clase 9 - Eventos</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1">
<p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p>
<button id="clickButton">Clickeame!</button>
</div>
<hr>
<div id="ejercicio-2">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
</div>
<hr>
<div id="ejercicio-3">
<!-- 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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clase 9 - Eventos</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1">
<p> Este boton ha sido clickeado <span id="clickCounter">0</span> veces</p>
<button id="clickButton">Clickeame!</button>
</div>
<hr>
<div id="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>
<hr>
<div id="ejercicio-3">
<!-- 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>