â°
QuickCompile
đ
A fast, free, and offline-capable web playground to test HTML, CSS, and JavaScript in real time
đē
YouTube
đŽ
Online Games
âšī¸
About Us
HTML
CSS
JavaScript
<div class="demo-container"> <h1>Welcome to QuickCompile!</h1> <p>Edit the code to see live changes.</p> <div class="card"> <h2>Interactive Demo</h2> <p>Change the code, then click "Run" to see updates</p> <button id="demo-btn">Click Me!</button> </div> </div>
.demo-container { text-align: center; padding: 30px; font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #4361ee, #3a0ca3); color: white; min-height: 100%; } .card { background: rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 20px; max-width: 500px; margin: 30px auto; backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } h1 { font-size: 2.5rem; margin-bottom: 15px; } h2 { font-size: 1.8rem; margin-bottom: 15px; } p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; } #demo-btn { background: white; color: #4361ee; border: none; padding: 12px 30px; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; } #demo-btn:hover { background: #f0f0f0; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
document.getElementById('demo-btn').addEventListener('click', function() { const colors = ['#4361ee', '#3a0ca3', '#4cc9f0', '#f72585', '#7209b7']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.querySelector('.card').style.backgroundColor = `rgba(255, 255, 255, ${Math.random() * 0.3})`; document.body.style.background = `linear-gradient(135deg, ${randomColor}, ${colors[Math.floor(Math.random() * colors.length)]})`; this.textContent = ['Clicked!', 'Again!', 'Wow!', 'Awesome!', 'Try More!'][Math.floor(Math.random() * 5)]; });
Output Preview
Advertisement
Ad can be skipped in 5 seconds
Ad will close in
5
seconds
Close Ad & Download