1. Semantische HTML Schrijven
Begin met gestructureerde HTML in het linkerpaneel. De statische editor verpakt je invoer automatisch in een moderne HTML5-structuur.
<div class="interactive-card">
<h2>Takenlijst</h2>
<input type="text" id="taskInput" placeholder="Nieuwe taak..." />
<button id="addBtn">Toevoegen</button>
<ul id="taskList"></ul>
</div>2. Stijlen met CSS en Direct Resultaat
Gebruik het CSS-paneel om je component vorm te geven. De weergave wordt soepel bijgewerkt terwijl je typt.
.interactive-card {
max-width: 480px;
margin: 2rem auto;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e6dfd8;
border-radius: 8px;
}3. Functionaliteit Toevoegen met JavaScript
Schrijf moderne JavaScript-logica. Consoleberichten worden getoond in zowel de browserontwikkelaarstools als de ingebouwde virtuele console.
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. Mobiel Testen met QR-Code
Koppel het weergavevenster los voor gebruik op meerdere schermen of scan de QR-code om je ontwerp direct op een smartphone te bekijken.