← BEUVAULT
100219
Course
U1
U2
U3
U4
U5
U6
Playground
☾
HTML
CSS
JS
<div style="padding:2rem;font-family:system-ui;"> <h2>Welcome to the Playground</h2> <p>Edit HTML, CSS, and JS — preview updates live.</p> <button id="demoBtn" style="padding:0.5rem 1rem;">Click Me</button> <p id="demoOutput" style="margin-top:1rem;color:#3b82f6;"></p> </div>
body { background: #f8fafc; } h2 { color: #3b82f6; border-bottom: 2px solid #3b82f6; padding-bottom: 0.5rem; } button { background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #2563eb; }
document.getElementById('demoBtn').addEventListener('click', function() { document.getElementById('demoOutput').textContent = 'Button clicked at ' + new Date().toLocaleTimeString(); console.log('Demo button was clicked!'); });
Live Preview
▶ Run
⤓ Export HTML
↺ Reset
Console
Clear