feat/excersices #2

Open
saucedo.facundo wants to merge 5 commits from saucedo.facundo/clase-9-eventos:feat/excersices into main
2 changed files with 52 additions and 31 deletions
Showing only changes of commit b97fb32d67 - Show all commits

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;
});

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>
</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">
<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>