Actividad - 9no 6 - Practicando con JavaScript

Plan de Actividad: ¡Dando Vida a tu Página con JavaScript!

Tema: Interacción con JavaScript.
Objetivo: Añadir un botón a tu página anterior que permita mostrar y ocultar la tabla de detalles usando conceptos básicos de JavaScript.
Requisito: Tener a mano tu proyecto de CodePen de la clase anterior.

Introducción 

¡Vamos a darle interacción a nuestra página! Ya tenes la estructura (HTML) y el estilo (CSS). Ahora, con JavaScript (JS), le agregamos comportamiento e interactividad.

Tu trabajo: Añadir un botón que, al hacerle clic, ocultará o mostrará la tabla con los detalles de los desafíos de la IA.

Abre tu Pen de la actividad anterior y comienza ⚡

Paso 1: Preparando el Terreno en HTML 

Para que JavaScript pueda "encontrar" los elementos con los que va a trabajar, necesitamos darles un nombre único, un id.

Añade el botón: Justo antes de tu <table>, añade esta línea de código HTML para crear el botón. El id nos servirá para identificarlo en JS.

<button id="cambio-btn">Mostrar / Ocultar Detalles</button>

Identifica la tabla: Ahora, ve a tu etiqueta <table> y añádele un id para que JS también sepa cuál es la tabla que debe ocultar.

<table id="detalles-tabla">
  ... (contenido de la tabla sin cambios)
</table>

Paso 2: La programacion con JavaScript 

Ahora, ve a la pestaña de JS en CodePen. Vamos a escribir nuestro script. ¡Te guiaré paso a paso!

Escribe el siguiente código. Lee los comentarios (//) para entender qué hace cada línea.

// Paso A: Conectar JavaScript con nuestros elementos HTML.
// Guardamos el botón y la tabla en "variables" para usarlos fácilmente.
const boton = document.getElementById('cambio-btn');
const tabla = document.getElementById('detalles-tabla');

// Paso B: Crear la función que hará el cambio en la tabla.
// Esta función revisa si la tabla está visible o no, y cambia su estado.
function cambioTabla() {
  if (tabla.style.display === 'none') {
    // Si la tabla está oculta (display es 'none')...
    tabla.style.display = 'block'; // ...la mostramos cambiando display a 'block'.
  } else {
    // Si está visible...
    tabla.style.display = 'none'; // ...la ocultamos.
  }
}

// Paso C: "Escuchar" el clic en el botón.
// Le decimos al botón que, cuando alguien haga clic en él, ejecute nuestra función.
boton.addEventListener('click', cambioTabla);

En resumen, lo que hicimos fue:

• Seleccionar el botón y la tabla por su id.
• Crear una función que cambia el estilo display de la tabla para ocultarla o mostrarla.
• Asignar esa funciˆn al evento click del botón.

Paso 3: ¡Prueba y Cierre! 

¡Es el momento de la verdad!

• Haz clic varias veces en tu nuevo botón "Mostrar / Ocultar Detalles".
• ¡Observa cómo la tabla aparece y desaparece! 

Reflexiona: Acabas de programar funcionalidad interactiva. Con solo unas pocas líneas de JavaScript, hiciste que tu página responda a las acciones del usuario.