1. Estructura HTML Semántica en el Lienzo
Comienza escribiendo marcado limpio y accesible en el panel de HTML. El editor estático envuelve automáticamente tu código en una estructura HTML5 válida para que puedas centrarte en la interfaz.
<div class="interactive-card">
<header class="card-header">
<span class="badge">Prototipado en Vivo</span>
<h2>Gestor de Tareas</h2>
</header>
<div class="card-body">
<div class="input-row">
<input type="text" id="taskInput" placeholder="Añade una tarea técnica..." />
<button id="addBtn" class="btn-primary">Añadir</button>
</div>
<ul id="taskList" class="task-list"></ul>
</div>
</div>2. Aplicación de Estilos CSS con Respuesta Inmediata
Pasa al panel de CSS para estilizar el componente con variables modernas, Flexbox y Grid. La vista previa se actualiza mientras escribes, preservando el foco y la posición del cursor.
:root {
--surface-bg: #ffffff;
--accent-color: #cc785c;
--text-dark: #141413;
--border-line: #e6dfd8;
}
.interactive-card {
max-width: 480px;
margin: 2rem auto;
background: var(--surface-bg);
border: 1px solid var(--border-line);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}3. Incorporación de Lógica ES2024 y Consola
Escribe código JavaScript estándar. Todas las llamadas a console.log, console.warn y console.error se muestran tanto en las herramientas del navegador como en la consola virtual integrada.
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const list = document.getElementById('taskList');
function addTask(title) {
if (!title.trim()) return;
const li = document.createElement('li');
li.textContent = title;
list.appendChild(li);
input.value = '';
console.log('[Tarea creada]:', title);
}
addBtn.addEventListener('click', () => addTask(input.value));4. Pruebas Móviles y Ventana Desacoplada
Haz clic en "Separar Vista Previa" en la barra de herramientas para abrir la interfaz en una ventana externa independiente, o escanea el código QR con tu móvil para probar en dispositivos reales.