forked from marquez.juan/clase-8-DOM
Compare commits
8 Commits
167bbaaf54
...
blas-alarc
| Author | SHA1 | Date | |
|---|---|---|---|
| b0b66c6219 | |||
| 3f372517b0 | |||
| 9b772efe73 | |||
| 46d7563665 | |||
| 1776da59d8 | |||
| 391417b4e8 | |||
| 353406174d | |||
| b3d7e12d24 |
@@ -1 +1,99 @@
|
|||||||
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
// Vincular este archivo al archivo index.html, y resolver aquí los ejercicios.
|
||||||
|
function cambiarTitulo() {
|
||||||
|
const titulo = document.querySelector("h1");
|
||||||
|
titulo.textContent = "Agua";
|
||||||
|
}
|
||||||
|
|
||||||
|
function agregarClaseItems() {
|
||||||
|
const items = document.querySelectorAll("li");
|
||||||
|
|
||||||
|
for (const item of items) {
|
||||||
|
item.classList.add("item-lista");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function agregarItem(texto) {
|
||||||
|
const lista = document.querySelector("#lista-inicial");
|
||||||
|
|
||||||
|
const nuevaLista = document.createElement("li");
|
||||||
|
nuevaLista.textContent = texto;
|
||||||
|
|
||||||
|
lista.appendChild(nuevaLista);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parrafos = document.querySelectorAll("#parrafos p");
|
||||||
|
|
||||||
|
for (const p of parrafos) {
|
||||||
|
|
||||||
|
if (p.textContent.includes("importante")) {
|
||||||
|
p.classList.add("destacado");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function agregarDiv() {
|
||||||
|
const nuevoDiv = document.createElement("div");
|
||||||
|
|
||||||
|
const nuevoh2 = document.createElement("h2");
|
||||||
|
nuevoh2.textContent = "Comidas tipicas de la region del litoral";
|
||||||
|
|
||||||
|
const pintroductorio = document.createElement("p");
|
||||||
|
pintroductorio.textContent = "Estas son algunas comidas tradicionales de la región del litoral argentino.";
|
||||||
|
|
||||||
|
const nuevoul = document.createElement("ul");
|
||||||
|
|
||||||
|
const comida1 = document.createElement("li");
|
||||||
|
comida1.textContent = "Chipa";
|
||||||
|
|
||||||
|
const comida2 = document.createElement("li");
|
||||||
|
comida2.textContent = "Pescado";
|
||||||
|
|
||||||
|
const comida3 = document.createElement("li");
|
||||||
|
comida3.textContent = "Sopa paraguaya";
|
||||||
|
|
||||||
|
nuevoul.appendChild(comida1);
|
||||||
|
nuevoul.appendChild(comida2);
|
||||||
|
nuevoul.appendChild(comida3);
|
||||||
|
|
||||||
|
nuevoDiv.appendChild(nuevoh2);
|
||||||
|
nuevoDiv.appendChild(pintroductorio);
|
||||||
|
nuevoDiv.appendChild(nuevoul);
|
||||||
|
|
||||||
|
document.body.appendChild(nuevoDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
function limpiarLista(idLista) {
|
||||||
|
const items = document.querySelectorAll(`#${idLista} li`);
|
||||||
|
|
||||||
|
for (const li of items) {
|
||||||
|
li.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const foto = document.querySelector("#foto");
|
||||||
|
|
||||||
|
foto.src = "foto2.jpg";
|
||||||
|
foto.alt = "Locro";
|
||||||
|
|
||||||
|
function construirLista(array) {
|
||||||
|
|
||||||
|
const nuevoDiv2 = document.createElement("div")
|
||||||
|
nuevoDiv2.classList.add("grupo-comidas");
|
||||||
|
|
||||||
|
const titulo2 = document.createElement("h2");
|
||||||
|
titulo2.textContent = array[0];
|
||||||
|
|
||||||
|
const ul2 = document.createElement("ul")
|
||||||
|
|
||||||
|
for (let i = 1; i < array.length; i++) {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
li.textContent = array[i];
|
||||||
|
ul2.appendChild(li);
|
||||||
|
}
|
||||||
|
|
||||||
|
nuevoDiv2.appendChild(titulo2);
|
||||||
|
nuevoDiv2.appendChild(ul2);
|
||||||
|
|
||||||
|
return nuevoDiv2;
|
||||||
|
}
|
||||||
@@ -101,6 +101,12 @@ h1 {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-lista {
|
||||||
|
color: red;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
IMAGEN
|
IMAGEN
|
||||||
========================= */
|
========================= */
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
comunes.</p>
|
comunes.</p>
|
||||||
<p>¿Y este párrafo? ¿Será importante?</p>
|
<p>¿Y este párrafo? ¿Será importante?</p>
|
||||||
<p>Este es otro párrafo del montón.</p>
|
<p>Este es otro párrafo del montón.</p>
|
||||||
|
<script src="ejercicios-clase-8.js"></script>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user