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

Compare commits

base: marquez.juan:main
Branches Tags
marquez.juan:main tocaymasa.bruno:eventos-clase9-BrunoTL tocaymasa.bruno:main
..
compare: tocaymasa.bruno:eventos-clase9-BrunoTL
Branches Tags
tocaymasa.bruno:eventos-clase9-BrunoTL tocaymasa.bruno:main marquez.juan:main

4 Commits
main ... eventos-cl

Author SHA1 Message Date
Bruno
f569704b34 Inicio del 4to ejercicio 2026-05-27 20:28:02 -03:00
Bruno
d2c918537f Resolucion del 3er ejercicio 2026-05-27 20:21:45 -03:00
Bruno
47730f361f Resolucion del 2do ejercicio 2026-05-27 20:02:55 -03:00
Bruno
e725cc5cb9 Resolucion del primer ejercicio 2026-05-27 19:52:04 -03:00
3 changed files with 48 additions and 4 deletions
Expand all files Collapse all files

27
clase-9.js
View File

@@ -1 +1,28 @@
// Agregar acá el código javascript para los ejercicios // Agregar acá el código javascript para los ejercicios
//ejercicio 1
const boton = document.querySelector("#boton");
let contadorClicks = 0;
boton.addEventListener("click", () => {
contadorClicks = contadorClicks + 1;
boton.textContent = `Botón clickeado ${contadorClicks} veces`;
})
//ejercicio 2
const campo = document.querySelector("#input2");
const resultado = document.querySelector("#resultado");
campo.addEventListener("input", () => {
const cantidad = campo.value.length;
resultado.textContent = `Caracteres: ${cantidad}`;
})
//ejercicio 3
const lista = document.querySelector("#lista");
lista.addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
const yaSeleccionado = document.querySelector(".seleccionado");
if (yaSeleccionado) {
yaSeleccionado.classList.remove("seleccionado");
}
e.target.classList.add("seleccionado");
}
});

6
estilo.css
View File

@@ -3,3 +3,9 @@ div {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
li.seleccionado {
background-color: blue;
color: white;
font-weight: bold;
}

19
index.html
View File

@@ -9,19 +9,30 @@
<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="boton">Botón clickeado 0 veces</button>
</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 --> <input type="text" id="input2">
<p id="resultado">Caracteres: 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="lista">
<li>Pan</li>
<li>Queso</li>
<li>Paleta</li>
<li>Sprite</li>
<li>Doritos</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>Click</button>
</div>
</div>
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <div id="ejercicio-5">