Try It Editor
← Back to Tutorial
Code Editor
Reset
Run
HTML
CSS
JavaScript
My First Page
Hello World!
Welcome to the Try It Editor!
Edit the HTML, CSS, and JavaScript tabs to create your own web page.
Click Me
body { font-family: Arial, sans-serif; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; } .container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } h1 { color: #333; margin-top: 0; } p { color: #666; line-height: 1.6; } button { padding: 12px 24px; background: #667eea; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { background: #5a6fd6; } #output { margin-top: 15px; padding: 10px; background: #f0f0f0; border-radius: 4px; min-height: 20px; }
// JavaScript code here document.getElementById('myBtn').addEventListener('click', function() { document.getElementById('output').textContent = 'Button clicked at ' + new Date().toLocaleTimeString(); }); console.log('JavaScript loaded!');
Result