📚 5 Ejercicios DOM - ¡Completa el Código!
📝 Ejercicio 10: Cambiar Texto y Estilos
🎯 Tu Misión:
- Completa la función
cambiarTitulo() para cambiar el texto del h3
- Completa la función
cambiarParrafo() para cambiar el contenido del párrafo
- Completa la función
cambiarColores() para cambiar los colores
- Completa la función
resetearEjercicio1() para volver al estado original
💡 Pistas: Usa document.getElementById(), textContent, style.color
// EJEMPLO - Cómo seleccionar y cambiar texto:
var elemento = document.getElementById('mi-id');
elemento.textContent = 'Nuevo texto';
elemento.style.color = '#ff0000';
🌟 Título Original
Este es el párrafo original que cambiará.
➕ Ejercicio 11: Crear y Eliminar Elementos
🎯 Tu Misión:
- Completa
agregarElemento() para crear nuevos elementos <li>
- Completa
eliminarEste() para eliminar el elemento clickeado
- Completa
eliminarUltimo() para quitar el último elemento
- Completa
limpiarLista() para vaciar toda la lista
💡 Pistas: Usa createElement(), appendChild(), remove(), innerHTML = ''
// EJEMPLO - Cómo crear y agregar elementos:
var nuevoElemento = document.createElement('li');
nuevoElemento.textContent = 'Mi texto';
lista.appendChild(nuevoElemento);
- 🎯 Elemento inicial (click para eliminar)
🔢 Ejercicio 13: Contador Interactivo
🎯 Tu Misión:
- Completa
actualizarContador() para mostrar el valor y cambiar color según estado
- Completa las funciones de incrementar, decrementar, multiplicar
- Completa
resetearContador() y numeroRandom()
- Haz que el color sea verde si es positivo, rojo si negativo, gris si es cero
💡 Pistas: Usa una variable global contadorValor, condicionales if, Math.random()
// EJEMPLO - Variable global y condicionales:
let miVariable = 0;
if (miVariable > 0) {
elemento.style.color = '#27ae60'; // verde
} else if (miVariable < 0) {
elemento.style.color = '#e74c3c'; // rojo
}
0
Valor actual: 0 | Estado: Neutro
🎨 Ejercicio 14: Galería de Emojis Interactiva
🎯 Tu Misión:
- Completa
generarGaleria() para crear elementos con emojis
- Completa
seleccionarEmoji() para mostrar el emoji seleccionado
- Completa
limpiarGaleria() para vaciar la galería
- Usa el array
emojis que está proporcionado
💡 Pistas: Usa forEach(), createElement('div'), onclick = function
// EJEMPLO - Cómo usar forEach con arrays:
miArray.forEach(item => {
var div = document.createElement('div');
div.textContent = item;
div.onclick = () => miFuncion(item);
contenedor.appendChild(div);
});
Selecciona un emoji de la galería...