1. Structuring Semantic HTML in the Canvas
Begin by crafting clean, accessible semantic HTML in the HTML pane. The Static Editor automatically wraps your markup in a standards-compliant HTML5 document shell, so you can focus directly on the interactive elements without writing boilerplate <!doctype html> tags.
<div class="interactive-card">
<header class="card-header">
<span class="badge">Live Prototyping</span>
<h2>Interactive Task Tracker</h2>
</header>
<div class="card-body">
<div class="input-row">
<input type="text" id="taskInput" placeholder="Add a new engineering task..." />
<button id="addBtn" class="btn-primary">Add Task</button>
</div>
<ul id="taskList" class="task-list"></ul>
</div>
</div>2. Applying Scoped CSS Styles with Instant Feedback
Switch to the CSS pane to style the component using modern CSS variables, Flexbox, and CSS Grid. The live preview updates smoothly as you type, preserving input focus and scroll coordinates so you never lose context during visual polish.
: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);
}
.input-row {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
input {
flex: 1;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-line);
border-radius: 4px;
}
.btn-primary {
background: var(--accent-color);
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}3. Adding Modern ES2024 Logic and Logging
In the JavaScript pane, write standard ECMAScript code. All console.log, console.warn, and console.error messages are mirrored to both the browser DevTools and GB Coder’s virtual runtime console below the editor.
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;
li.onclick = () => li.classList.toggle('done');
list.appendChild(li);
input.value = '';
console.log('[Task Added]:', title);
}
addBtn.addEventListener('click', () => addTask(input.value));
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') addTask(input.value);
});4. Testing on Real Devices with Popout & QR Codes
To verify responsive behavior on physical smartphones or dual-monitor setups, click "Popout Preview" in the toolbar to detach the rendering iframe into a clean external window, or generate a mobile preview QR code to test immediately on your phone.