1. Structurer un HTML Sémantique
Rédigez un code accessible dans le volet HTML. L’éditeur intègre automatiquement votre balisage dans un document HTML5 conforme.
<div class="interactive-card">
<h2>Gestionnaire de Tâches</h2>
<input type="text" id="taskInput" placeholder="Nouvelle tâche..." />
<button id="addBtn">Ajouter</button>
<ul id="taskList"></ul>
</div>2. Styliser en CSS avec Rendu Instantané
Appliquez vos styles CSS dans le volet dédié. L’aperçu se met à jour immédiatement tout en préservant le défilement.
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. Ajouter la Logique JavaScript ES2024
Programmez votre logique en JavaScript. Les messages console sont capturés dans la console virtuelle intégrée.
document.getElementById('addBtn').onclick = () => {
const input = document.getElementById('taskInput');
if (!input.value) return;
const li = document.createElement('li');
li.textContent = input.value;
document.getElementById('taskList').appendChild(li);
input.value = '';
};4. Test sur Mobile et Fenêtre Détachable
Détachez la prévisualisation dans une fenêtre séparée pour un poste multi-écrans ou scannez le QR code pour tester sur smartphone.