forked from marquez.juan/clase-8-DOM
Resuelto ejercicio 1,2,3,4
This commit is contained in:
@@ -1 +1,51 @@
|
||||
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
||||
|
||||
// Ejercicio 1: Cambiar el título de la página
|
||||
function cambiarTitulos(nuevoTitulo) {
|
||||
const titulo = document.querySelector('h1');
|
||||
if (titulo){
|
||||
titulo.textContent = nuevoTitulo;
|
||||
console.log(`Titulo cambiado a: ${nuevoTitulo}`);
|
||||
} else {
|
||||
console.error('No se encontro el elemento h1 en el documentio.');
|
||||
}
|
||||
}
|
||||
|
||||
// Ejercicio 2:clase item-lista
|
||||
|
||||
function estilizarLista(){
|
||||
const items = document.querySelectorAll('li');
|
||||
for ( const item of items){
|
||||
item.classList.add('item-lista');
|
||||
}
|
||||
console.log(`Se aplico la clase item-lista a ${items.length} elementos`);
|
||||
}
|
||||
|
||||
// Al invocar la función, vas a notar que los elementos de la lista cambian visualmente (por ejemplo, pueden cambiar de color, tamaño o tipografía).
|
||||
//¿Por qué pasa esto si solo escribimos JavaScript y no tocamos el diseño?
|
||||
//Porque en el archivo de estilos (estilos.css o los estilos que ya venían configurados en el repositorio que clonaste del profesor) ya existe una regla armada para la clase .item-lista.
|
||||
|
||||
|
||||
// Ejercicio 3: Agregar nuevo item a la lista
|
||||
|
||||
function agregarItem(texto) {
|
||||
const lista = document.querySelector('#lista-inicial');
|
||||
const nuevoItem = document.createElement('li');
|
||||
nuevoItem.textContent = texto;
|
||||
lista.appendChild(nuevoItem);
|
||||
console.log(`Se agrego el item: ${texto}`);
|
||||
}
|
||||
|
||||
// Ejercicio 4: parrafo
|
||||
|
||||
function destacarImportante() {
|
||||
const parrafos = document.querySelectorAll('#parrafos p');
|
||||
let contador = 0;
|
||||
for(const p of parrafos){
|
||||
if (p.textContent.includes('importante')){
|
||||
p.classList.add('destacado');
|
||||
contador++;
|
||||
}
|
||||
}
|
||||
console.log(`Se destacaron ${contador} párrafos.`);
|
||||
}
|
||||
@@ -31,5 +31,8 @@
|
||||
<p>¿Y este párrafo? ¿Será importante?</p>
|
||||
<p>Este es otro párrafo del montón.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="ejercicios-clase-8.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user