150 lines
3.7 KiB
JavaScript
150 lines
3.7 KiB
JavaScript
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
|
|
|
// Ejercicio 1
|
|
/*
|
|
|
|
Crear una función que seleccione el primer <h1> de la página y cambie su texto a otro mensaje.
|
|
Verificar el resultado en el navegador invocando a la función desde las devtools.
|
|
|
|
*/
|
|
|
|
function cambiarTitulo () {
|
|
|
|
let titulo = document.querySelector("h1");
|
|
|
|
titulo.textContent = ("Las mejores comidas de Argentina");
|
|
|
|
}
|
|
|
|
// Ejercicio 2
|
|
|
|
/*
|
|
Crear otra función que, usando querySelectorAll y for...of, agregue la clase item-lista a cada uno de los items de la lista.
|
|
Verificar el resultado en el navegador invocando a la función desde las devtools.
|
|
Debería observarse un cambio de estilo, intenten explicarse por qué sucede esto.
|
|
|
|
*/
|
|
|
|
function agregarClaseLista () {
|
|
|
|
let items = document.querySelectorAll("li");
|
|
|
|
for (let item of items) {
|
|
item.classList.add("item-lista");
|
|
}
|
|
}
|
|
|
|
// Ejercicio 3
|
|
|
|
/*
|
|
Crear una función agregarItem que reciba un texto como parámetro,
|
|
cree un nuevo <li> con ese texto y lo agregue al final de la lista con id="lista-inicial".
|
|
Llamarla tres veces con textos distintos desde las devtools.
|
|
|
|
*/
|
|
|
|
function agregarItem(texto) {
|
|
|
|
let lista = document.querySelector("#lista-inicial");
|
|
|
|
let nuevoLi = document.createElement("li");
|
|
|
|
nuevoLi.textContent = texto;
|
|
|
|
lista.appendChild(nuevoLi);
|
|
}
|
|
|
|
// Ejercicio 4
|
|
|
|
/*
|
|
Seleccionar todos los párrafos que estén dentro del div con id="parrafos".
|
|
Si un párrafo contiene la palabra "importante" en su texto, agregarle la clase "destacado".
|
|
|
|
*/
|
|
|
|
let parrafos = document.querySelectorAll("#parrafos p");
|
|
|
|
function addPalabra () {
|
|
|
|
for (let parrafo of parrafos) {
|
|
|
|
if (parrafo.textContent.includes("importante")) {
|
|
|
|
parrafo.classList.add("destacado");
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ejercicio 5
|
|
/*
|
|
Crear una función que agregue un nuevo div a la página, que incluya comidas típicas de la región del litoral.
|
|
Este div debe incluir un h2, un párrafo introductorio y una lista de comidas típicas.
|
|
Probarla utilizando las devtools.
|
|
|
|
* Al ejercicio le agregue que el nuevo div y la nueva lista tengan el mismo estilo que lo otros.
|
|
*/
|
|
|
|
function addLitoral() {
|
|
|
|
let comidasLitoral = document.createElement("div");
|
|
comidasLitoral.classList.add("grupo-comidas");
|
|
|
|
let titulo = document.createElement("h2");
|
|
titulo.textContent = "Comidas típicas de la region del litoral";
|
|
|
|
let parrafoLitoral = document.createElement("p");
|
|
parrafoLitoral.textContent = "La región del litoral cuenta con comidas tradicionales muy populares.";
|
|
|
|
let lista = document.createElement("ul");
|
|
|
|
lista.classList.add("lista-comidas");
|
|
lista.id = "lista-final";
|
|
|
|
let comida1 = document.createElement("li");
|
|
comida1.textContent = "Chipá";
|
|
|
|
let comida2 = document.createElement("li");
|
|
comida2.textContent = "Pacú asado";
|
|
|
|
let comida3 = document.createElement("li");
|
|
comida3.textContent = "Mbejú";
|
|
|
|
lista.appendChild(comida1);
|
|
lista.appendChild(comida2);
|
|
lista.appendChild(comida3);
|
|
|
|
comidasLitoral.appendChild(titulo);
|
|
comidasLitoral.appendChild(parrafoLitoral);
|
|
comidasLitoral.appendChild(lista);
|
|
|
|
document.body.appendChild(comidasLitoral);
|
|
}
|
|
|
|
|
|
// Ejercicio 6
|
|
|
|
/*
|
|
|
|
Crear una función limpiarLista que reciba por parámetro el id de una lista, y que elimine todos los <li> de esa lista. Llamarla sobre la lista del ejercicio 2.
|
|
Pista: querySelectorAll + for...of + remove.
|
|
Probarla utilizando las devtools, tanto con la lista original de la página como con la lista agregada en el ejercicio anterior.
|
|
|
|
*/
|
|
|
|
function limpiarLista(idLista) {
|
|
|
|
let items = document.querySelectorAll(`#${idLista} li`);
|
|
|
|
for (let item of items) {
|
|
|
|
item.remove();
|
|
|
|
}
|
|
}
|
|
|
|
// Ejercicio 7
|
|
|
|
/*
|
|
|