<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Arrays en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-array { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .caja-lista { background: #f1f5f9; border-radius: 6px; padding: 12px; margin: 15px 0; font-family: monospace; }
    .btn-group button { margin-right: 5px; margin-bottom: 5px; padding: 7px 12px; border-radius: 6px; border: 1px solid #94a3b8; background: white; cursor: pointer; font-weight: 600; }
    .btn-group button:hover { background: #0284c7; color: white; border-color: #0284c7; }
  </style>
</head>
<body>

  <div class="card-array">
    <h3 style="margin-top: 0; color: #0f172a;">Cola de Tareas en Memoria</h3>

    <div class="caja-lista">
      <strong>Contenido del Array:</strong><br>
      <span id="visualizador-array"></span>
    </div>

    <div class="btn-group">
      <button onclick="agregarFinal()">+ push("Tarea Final")</button>
      <button onclick="eliminarFinal()">- pop()</button>
      <button onclick="agregarInicio()">+ unshift("Urgente")</button>
      <button onclick="eliminarInicio()">- shift()</button>
    </div>

    <script>
      let tareas = ["Aprender HTML", "Estudiar CSS", "Practicar JS"];

      function actualizarVista() {
        const span = document.getElementById('visualizador-array');
        span.textContent = JSON.stringify(tareas, null, 2);
      }

      function agregarFinal() {
        tareas.push(`Tarea #${tareas.length + 1}`);
        actualizarVista();
      }

      function eliminarFinal() {
        if (tareas.length > 0) tareas.pop();
        actualizarVista();
      }

      function agregarInicio() {
        tareas.unshift(`Urgente #${Math.floor(Math.random() * 90) + 10}`);
        actualizarVista();
      }

      function eliminarInicio() {
        if (tareas.length > 0) tareas.shift();
        actualizarVista();
      }

      actualizarVista();
    </script>
  </div>

</body>
</html>