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