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

Compare commits

base: dipaolo.lucio:main
Branches Tags
dipaolo.lucio:main dipaolo.lucio:clase-9-eventos-repo marquez.juan:main
..
compare: dipaolo.lucio:clase-9-eventos-repo
Branches Tags
dipaolo.lucio:clase-9-eventos-repo dipaolo.lucio:main marquez.juan:main

4 Commits
main ... clase-9-ev

Author SHA1 Message Date
lucio
eede996d16 EJ4 terminado 2026-05-28 21:41:35 -03:00
lucio
62a4502443 (ej3) terminado 2026-05-28 19:29:47 -03:00
lucio
fc768f3aa0 EJ3 terminado 2026-05-26 18:51:50 -03:00
lucio
43d20f2ac5 ej1 terminado 2026-05-23 20:03:47 -03:00
3 changed files with 76 additions and 5 deletions
Expand all files Collapse all files

54
clase-9.js
View File

@@ -1 +1,53 @@
// Agregar acá el código javascript para los ejercicios 1//
const botonContador = document.getElementById("contador-btn");
const parrafoContador = document.getElementById("contador-parrafo");
let contador = 0;
botonContador.addEventListener("click", () => {
contador += 1;
parrafoContador.textContent = `Botón clickeado ${contador} veces.`;
});
2//
const cajaTexto = document.getElementById("text-cont");
const conatdorLetras = document.getElementById("contador-text")
let Letras = 0;
cajaTexto.addEventListener("input", () => {
Letras += 1;
conatdorLetras.textContent = `Letras escritas = ${Letras} `;
});
3//
const lista = document.getElementById("ListaMarcasExoticas");
lista.addEventListener("click", function(evento) {
if (evento.target.tagName ==="LI") {
const itemPrevio = lista.querySelector(".seleccionado");
if (itemPrevio) {
itemPrevio.classList.remove("seleccionado");
}
evento.target.classList.add("seleccionado");
}
});
4//
document.querySelector("#externo").addEventListener("click", () => {
console.log("externo");
});
document.querySelector("#interno").addEventListener("click", () => {
console.log("interno");
});
document.querySelector("#boton").addEventListener("click", () => {
console.log("boton");
});
document.querySelector("#externo2").addEventListener("click", () => {
console.log("externo / capturing");
}, true);
document.querySelector("#interno2").addEventListener("click", () => {
console.log("interno");
});
document.querySelector("#boton2").addEventListener("click", () => {
console.log("boton");
});

3
estilo.css
View File

@@ -3,3 +3,6 @@ div {
padding: 10px; padding: 10px;
margin: 10px; margin: 10px;
} }
.seleccionado{
background-color:blue;
}

24
index.html
View File

@@ -9,19 +9,35 @@
<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="contador-btn">Haz clic</button>
<p id="contador-parrafo">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 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 2 -->
<input type="text" id="text-cont" placeholder="Escribe algo">
<p id="contador-text">Letras escritas = 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 --> <!-- Agregar acá el código HTML que haga falta para el ejercicio 3 -->
</div> <ul id="ListaMarcasExoticas">
<li>Lotus</li>
<li>Panoz</li>
<li>G.M.A</li>
<li>Pagani</li>
<li>Maseati</li>
</ul>
<hr> <hr>
<div id="ejercicio-4"> <div id="externo">
<!-- Agregar acá el código HTML que haga falta para el ejercicio 4 --> <div id="interno">
<button id="boton">Click</button>
</div>
</div>
<div id="externo2">
<div id="interno2">
<button id="boton2">Click</button>
</div>
</div> </div>
<hr> <hr>
<div id="ejercicio-5"> <div id="ejercicio-5">