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

clase-9-eventos #8

Open
dipaolo.lucio wants to merge 4 commits from dipaolo.lucio/clase-9-eventos:clase-9-eventos-repo into main
pull from: dipaolo.lucio/clase-9-eventos:clase-9-eventos-repo
merge into: marquez.juan:main
Conversation 0 Commits 4 Files Changed 3 +76 -5
3 changed files with 76 additions and 5 deletions
Download Patch File Download Diff File 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;
margin: 10px;
}
.seleccionado{
background-color:blue;
}

24
index.html
View File

@@ -9,19 +9,35 @@
<body>
<h1>Clase 9 - Eventos</h1>
<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>
<hr>
<div id="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>
<hr>
<div id="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>
<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="boton">Click</button>
</div>
</div>
<div id="externo2">
<div id="interno2">
<button id="boton2">Click</button>
</div>
</div>
<hr>
<div id="ejercicio-5">