</>
Advanced Code Runner
Build, test, save, and export HTML projects.
Device
Desktop
Tablet
Mobile
Font
Light Theme
Save
Download
▶ Run Code
HTML
CSS
JavaScript
Write the structure of your webpage.
Copy
Reset
<div class="hero"> <div class="card"> <p class="tag">MY MINI PROJECT</p> <h1>Welcome, Creator.</h1> <p>Try changing the HTML, CSS, and JavaScript tabs.</p> <button id="magicButton">Click me</button> <p id="message"></p> </div> </div>
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #111827, #312e81); color: white; font-family: Arial, sans-serif; } .card { width: min(460px, 88vw); padding: 38px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 22px; background: rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); backdrop-filter: blur(12px); } .tag { color: #c4b5fd; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.14em; } h1 { margin: 10px 0; font-size: clamp(2rem, 8vw, 3.5rem); } button { margin-top: 14px; padding: 12px 20px; border: none; border-radius: 10px; background: #a78bfa; color: #1f1147; font-weight: bold; cursor: pointer; transition: 0.2s; } button:hover { transform: translateY(-3px); background: white; } #message { min-height: 24px; color: #ddd6fe; font-weight: bold; }
const button = document.getElementById("magicButton"); const message = document.getElementById("message"); button.addEventListener("click", () => { const messages = [ "Nice! Your JavaScript is working.", "You just ran custom code.", "Keep building cool projects!" ]; const randomMessage = messages[Math.floor(Math.random() * messages.length)]; message.textContent = randomMessage; console.log("Button was clicked."); });
Lines: 1
Press Ctrl + Enter to run
Live Preview
Ready
Auto-run: On
↻ Refresh
Console
Clear
Console messages will appear here.