<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Crear y Eliminar Nodos del DOM</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-tareas { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .input-fila { display: flex; gap: 8px; margin-bottom: 15px; }
    input[type="text"] { flex: 1; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button.btn-add { background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; }
    button.btn-add:hover { background: #0369a1; }
    ul { list-style: none; padding: 0; margin: 0; }
    li.tarea-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; transition: all 0.2s; }
    li.tarea-item:hover { background: #f1f5f9; border-color: #cbd5e1; }
    .btn-borrar { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem; }
    .btn-borrar:hover { background: #ef4444; color: white; }
    .contador-info { font-size: 0.85rem; color: #64748b; margin-top: 10px; }
  </style>
</head>
<body>

  <div class="card-tareas">
    <h3 style="margin-top: 0; color: #0f172a;">Lista Interactiva de Tareas</h3>

    <div class="input-fila">
      <input type="text" id="campo-tarea" placeholder="Escribe una nueva tarea...">
      <button class="btn-add" onclick="agregarTarea(false)">+ Al Final</button>
      <button class="btn-add" style="background: #0d9488;" onclick="agregarTarea(true)">+ Al Inicio</button>
    </div>

    <ul id="lista-tareas"></ul>
    <div class="contador-info" id="info-contador">0 tareas registradas</div>
  </div>

  <script>
    let contadorId = 0;

    function actualizarContador() {
      const cantidad = document.querySelectorAll('#lista-tareas li').length;
      document.getElementById('info-contador').textContent = `${cantidad} tareas registradas`;
    }

    function agregarTarea(alInicio) {
      const input = document.getElementById('campo-tarea');
      const texto = input.value.trim();

      if (texto === "") {
        alert("Escribe una descripción para la tarea.");
        return;
      }

      contadorId++;

      // 1. createElement para crear el nodo <li>
      const li = document.createElement('li');
      li.className = 'tarea-item';

      // 2. createElement para el span con el texto
      const span = document.createElement('span');
      span.textContent = `#${contadorId} · ${texto}`;

      // 3. createElement para el botón de eliminar
      const btnEliminar = document.createElement('button');
      btnEliminar.className = 'btn-borrar';
      btnEliminar.textContent = '✕ Eliminar';

      // Evento para eliminar el nodo con .remove()
      btnEliminar.addEventListener('click', function() {
        li.remove();
        actualizarContador();
      });

      // Ensamblar los elementos hijos
      li.appendChild(span);
      li.appendChild(btnEliminar);

      // 4. Inserción condicional al inicio (prepend) o al final (appendChild)
      const lista = document.getElementById('lista-tareas');
      if (alInicio) {
        lista.prepend(li);
      } else {
        lista.appendChild(li);
      }

      input.value = "";
      input.focus();
      actualizarContador();
    }

    // Inicializar con dos tareas de ejemplo
    document.getElementById('campo-tarea').value = "Configurar entorno de desarrollo";
    agregarTarea(false);
    document.getElementById('campo-tarea').value = "Aprender selectores del DOM";
    agregarTarea(false);
  </script>

</body>
</html>