GoldenCode
New
Run
Save
index.html
style.css
script.js
<!DOCTYPE html> <html> <head> <title>My GoldenCode Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello, GoldenCode!</h1> <p>Start editing to see live changes.</p> <button id="demoBtn">Click Me</button> <div id="output"></div> <div class="console-output"></div> </body> </html>
HTML
body { font-family: 'Arial', sans-serif; text-align: center; padding: 2rem; background-color: #f5f5f5; margin: 0; } h1 { color: #D4AF37; margin-bottom: 1rem; } p { color: #333; margin-bottom: 1.5rem; } #demoBtn { background-color: #D4AF37; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; font-size: 1rem; } #demoBtn:hover { background-color: #FFD700; } #output { margin-top: 1rem; padding: 1rem; border-radius: 4px; background-color: #eee; } .console-output { margin-top: 2rem; padding: 1rem; background-color: #1A1A1A; color: #F5F5F5; border-radius: 4px; text-align: left; font-family: 'Fira Code', monospace; max-height: 200px; overflow-y: auto; }
CSS
// Console logging will appear in both preview and console panel console.log('GoldenCode Editor initialized!'); document.getElementById('demoBtn').addEventListener('click', function() { const output = document.getElementById('output'); output.innerHTML = 'Button clicked! Welcome to GoldenCode Editor.'; output.style.color = '#D4AF37'; // Log to console console.log('Button clicked at: ' + new Date().toLocaleTimeString()); console.warn('This is a warning message'); // Display in the preview console const previewConsole = document.querySelector('.console-output'); previewConsole.innerHTML += '> Button clicked\\n'; }); // Example error try { const nonExistent = someUndefinedVariable; } catch (error) { console.error('Error caught:', error.message); }
JavaScript
PREVIEW (index.html)
PROBLEMS • OUTPUT • DEBUG CONSOLE • TERMINAL
Clear
main
Prettier
Ln 1, Col 1
UTF-8
LF