arreglos- tres versiones interactivas del ejercicio,

 Te voy a preparar tres versiones interactivas del ejercicio, cada una con su propio tema para que los alumnos trabajen con arreglos pero de manera entretenida.

1️⃣ Películas favoritas 🎬

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Películas favoritas</title>
<style>
    body { font-family: Arial, sans-serif; background: #f4f4f4; text-align: center; padding: 20px; }
    table { margin: 20px auto; border-collapse: collapse; width: 60%; background: white; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background: #333; color: white; }
    button { padding: 6px 12px; cursor: pointer; border: none; }
    .btn-eliminar { background: red; color: white; }
    .btn-eliminar:hover { background: darkred; }
    .btn-agregar { background: #3498db; color: white; }
    .btn-agregar:hover { background: #2980b9; }
</style>
</head>
<body>
<h1>🎬 Mis Películas Favoritas</h1>
<input type="text" id="entrada" placeholder="Escribe una película">
<button class="btn-agregar" onclick="agregarElemento()">Agregar</button>
<table>
    <thead><tr><th>#</th><th>Película</th><th>Acción</th></tr></thead>
    <tbody id="tablaCuerpo"></tbody>
</table>
<script>
let peliculas = [];
function agregarElemento() {
    let valor = document.getElementById("entrada").value.trim();
    if (valor) { peliculas.push(valor); document.getElementById("entrada").value = ""; mostrarTabla(); }
}
function mostrarTabla() {
    let cuerpo = document.getElementById("tablaCuerpo");
    cuerpo.innerHTML = "";
    peliculas.forEach((item, index) => {
        cuerpo.innerHTML += `<tr><td>${index+1}</td><td>${item}</td>
        <td><button class="btn-eliminar" onclick="eliminarElemento(${index})">❌ Eliminar</button></td></tr>`;
    });
}
function eliminarElemento(i) { peliculas.splice(i, 1); mostrarTabla(); }
</script>
</body>
</html>

2️⃣ Puntajes de fútbol ⚽

Incluye suma y promedio.

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Puntajes de Fútbol</title>
<style>
    body { font-family: Arial, sans-serif; background: #f4f4f4; text-align: center; padding: 20px; }
    table { margin: 20px auto; border-collapse: collapse; width: 60%; background: white; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background: #333; color: white; }
    button { padding: 6px 12px; cursor: pointer; border: none; }
    .btn-eliminar { background: red; color: white; }
    .btn-eliminar:hover { background: darkred; }
    .btn-agregar { background: #2ecc71; color: white; }
    .btn-agregar:hover { background: #27ae60; }
</style>
</head>
<body>
<h1>⚽ Puntajes de Fútbol</h1>
<input type="number" id="entrada" placeholder="Goles del partido">
<button class="btn-agregar" onclick="agregarElemento()">Agregar</button>
<table>
    <thead><tr><th>#</th><th>Goles</th><th>Acción</th></tr></thead>
    <tbody id="tablaCuerpo"></tbody>
</table>
<h3 id="resumen"></h3>
<script>
let goles = [];
function agregarElemento() {
    let valor = document.getElementById("entrada").value;
    if (valor !== "") { goles.push(Number(valor)); document.getElementById("entrada").value = ""; mostrarTabla(); }
}
function mostrarTabla() {
    let cuerpo = document.getElementById("tablaCuerpo");
    cuerpo.innerHTML = "";
    goles.forEach((item, index) => {
        cuerpo.innerHTML += `<tr><td>${index+1}</td><td>${item}</td>
        <td><button class="btn-eliminar" onclick="eliminarElemento(${index})">❌ Eliminar</button></td></tr>`;
    });
    let total = goles.reduce((a,b) => a+b, 0);
    let promedio = goles.length ? (total / goles.length).toFixed(2) : 0;
    document.getElementById("resumen").textContent = `Total de goles: ${total} | Promedio por partido: ${promedio}`;
}
function eliminarElemento(i) { goles.splice(i, 1); mostrarTabla(); }
</script>
</body>
</html>

3️⃣ Comidas favoritas 🍕

html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Comidas favoritas</title>
<style>
    body { font-family: Arial, sans-serif; background: #f4f4f4; text-align: center; padding: 20px; }
    table { margin: 20px auto; border-collapse: collapse; width: 60%; background: white; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background: #333; color: white; }
    button { padding: 6px 12px; cursor: pointer; border: none; }
    .btn-eliminar { background: red; color: white; }
    .btn-eliminar:hover { background: darkred; }
    .btn-agregar { background: orange; color: white; }
    .btn-agregar:hover { background: darkorange; }
</style>
</head>
<body>
<h1>🍕 Mis Comidas Favoritas</h1>
<input type="text" id="entrada" placeholder="Escribe una comida">
<button class="btn-agregar" onclick="agregarElemento()">Agregar</button>
<table>
    <thead><tr><th>#</th><th>Comida</th><th>Acción</th></tr></thead>
    <tbody id="tablaCuerpo"></tbody>
</table>
<script>
let comidas = [];
function agregarElemento() {
    let valor = document.getElementById("entrada").value.trim();
    if (valor) { comidas.push(valor); document.getElementById("entrada").value = ""; mostrarTabla(); }
}
function mostrarTabla() {
    let cuerpo = document.getElementById("tablaCuerpo");
    cuerpo.innerHTML = "";
    comidas.forEach((item, index) => {
        cuerpo.innerHTML += `<tr><td>${index+1}</td><td>${item}</td>
        <td><button class="btn-eliminar" onclick="eliminarElemento(${index})">❌ Eliminar</button></td></tr>`;
    });
}
function eliminarElemento(i) { comidas.splice(i, 1); mostrarTabla(); }
</script>
</body>
</html>

Con estos tres archivos (peliculas.html, futbol.html, comidas.html) ya tienes tres ejercicios divertidos y fáciles para trabajar crear, mostrar y eliminar elementos de arreglos.

Si quieres, también puedo unirlos en un solo archivo con un menú para elegir el tema y que los niños cambien de ejercicio sin cambiar de página.
¿Quieres que te lo combine así en versión todo-en-uno?

Comentarios

Publicar un comentario

Entradas más populares de este blog

1-valores duplicados en un arreglo

 Debes encontrar valores duplicados en un arreglo de números enteros y  regresar un arreglo con los números que se repitan exactamente 2 veces. Prueba tu algoritmo para los siguientes casos: [4,3,2,7,8,3,1]=[32] [1,1,2] = [1] [1]=[] ¿Qué es un arreglo? Un   arreglo   (o array) es una estructura de datos que almacena una colección de elementos en un orden específico. Piensa en él como una   lista ordenada   donde cada elemento tiene una posición numerada. Características principales: Elementos : Pueden ser números, texto, objetos, etc. Índices : Cada elemento tiene una posición (empezando desde 0) Orden : Los elementos mantienen el orden en que fueron agregados Ejemplo visual: javascript // Arreglo de números let numeros = [ 4 , 3 , 2 , 7 , 8 , 3 , 1 ] ; // Posiciones (índices): // índice: 0 1 2 3 4 5 6 // valor: 4 3 2 7 8 3 1 Acceso a elementos: javascript console . log ( numeros [ 0 ] ) ; // 4 (primer elemento) console . log (...
Leer más

Pseudocódigo de la Máquina Expendedora

  Pseudocódigo de la Máquina Expendedora Pseudocódigo Completo text INICIAR_PROGRAMA: total_dinero ← 0 // Variable para acumular el dinero MIENTRAS verdadero HACER: mostrar "Máquina expendedora lista. Comandos: [moneda], [código producto], RETIRAR, PARA" comando ← leer entrada del usuario SI comando = "PARA" ENTONCES: mostrar "Apagando máquina..." TERMINAR_PROGRAMA SINO SI comando = "RETIRAR" ENTONCES: SI total_dinero > 0 ENTONCES: mostrar "Devolviendo " + total_dinero + " pesos" total_dinero ← 0 SINO: mostrar "No hay dinero para devolver" FIN SI SINO SI comando es un número ENTONCES: valor_moneda ← convertir comando a número SI valor_moneda está en [1, 2, 5, 10, 20] ENTONCES: tota...
Leer más

Trabajas en una compañía que ofrece seguros de vida y de gastos

 Trabajas en una compañía que ofrece seguros de vida y de gastos médicos. La empresa está desarrollando una herramienta tecnológica, para que los agentes puedan calcular el monto de una póliza. Para dicho cálculo, se consideran varios factores de riesgo, entre los que se encuentra 6 la edad. Por ello, el contratante debe llenar un formulario, incluyendo su fecha de nacimiento. Como primer reto, deberás calcular la edad del cliente al momento de la cotización. La captura de la fecha de nacimiento debe ser en  una sola cadena de texto con formato DD-MM-AA Debes validar que es una fecha valida: Para simplificar el algoritmo tomaremos el  dia 29 de febrero como invalido El año de nacimiento debe ser mayor 1900 No olvides validar si el cliente ya cumplio años en  la fecha de captura o aun no Cálculo de Edad para Seguros - Explicación Paso a Paso 📋 PROBLEMA COMPLETO Necesitamos calcular la edad de un cliente para una póliza de seguros, validando que: La fecha de nacimient...
Leer más