maderademarco.sergio/clase-9-eventos
1
0
Fork 0
forked from marquez.juan/clase-9-eventos
Code Pull Requests Activity

Compare commits

base: maderademarco.sergio:main
Branches Tags
maderademarco.sergio:main maderademarco.sergio:ejercicio-9 marquez.juan:main
...
compare: maderademarco.sergio:930ee7ee56397028cf83279ff59e4c45ac54ba8a
Branches Tags
maderademarco.sergio:ejercicio-9 maderademarco.sergio:main marquez.juan:main

4 Commits
main ... 930ee7ee56

Author SHA1 Message Date
Sergio Madera De Marco
930ee7ee56 ejercicio 4: bubbling y captura de eventos 2026-05-24 14:53:40 -03:00
Sergio Madera De Marco
afda7e5f0d ejercicio 3: seleccion de elementos con delegacion de eventos 2026-05-24 14:50:02 -03:00
Sergio Madera De Marco
e2d03163cb ejercicio 2: contador de caracteres en tiempo real 2026-05-24 14:44:53 -03:00
Sergio Madera De Marco
63f8bb23a3 ejercicio 1: contador de clicks con addEventListener 2026-05-24 14:37:45 -03:00
3 changed files with 67 additions and 5 deletions
Expand all files Collapse all files

33
clase-9.js
View File

@@ -1 +1,32 @@
// Agregar acá el código javascript para los ejercicios // Ejercicio 1 - Contador de clics
let clickCount = 0;
const boton = document.getElementById('miBoton');
const parrafo = document.getElementById('contadorClicks');
boton.addEventListener('click', function() {
clickCount++;
parrafo.textContent = `Botón clickeado ${clickCount} veces`;
});
// Ejercicio 2 - Contador de caracteres en tiempo real
const campoTexto = document.getElementById('campoTexto');
const contadorCaracteres = document.getElementById('contadorCaracteres');
campoTexto.addEventListener('input', function() {
contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
});
// Ejercicio 3 - Selección única en la lista con delegación de eventos
const listaItems = document.getElementById('listaItems');
listaItems.addEventListener('click', function(event) {
const item = event.target.closest('li');
if (!item || !listaItems.contains(item)) {
return;
}
listaItems.querySelectorAll('li').forEach(function(li) {
li.classList.remove('seleccionado');
});
item.classList.add('seleccionado');
});

18
estilo.css
View File

@@ -3,3 +3,21 @@ div {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
#listaItems {
list-style: none;
padding: 0;
}
#listaItems li {
cursor: pointer;
padding: 6px;
margin: 4px 0;
border: 1px solid #8a8a8a;
}
#listaItems li.seleccionado {
background-color: #7daa3c;
color: #ffffff;
}

21
index.html
View File

@@ -9,19 +9,32 @@
<body> <body>
<h1>Clase 9 - Eventos</h1> <h1>Clase 9 - Eventos</h1>
<div id="ejercicio-1"> <div id="ejercicio-1">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 1 --> <button id="miBoton">Hacer clic</button>
<p id="contadorClicks">Botón clickeado 0 veces</p>
</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="campoTexto">Escribe algo:</label>
<input type="text" id="campoTexto" />
<p id="contadorCaracteres">Caracteres ingresados: 0</p>
</div> </div>
<hr> <hr>
<div id="ejercicio-3"> <div id="ejercicio-3">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 3 --> <ul id="listaItems">
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
</div> </div>
<hr> <hr>
<div id="ejercicio-4"> <div id="ejercicio-4">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 --> <div id="externo">
<div id="interno">
<button id="botonCaptura">Click</button>
</div>
</div>
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <div id="ejercicio-5">