Code Viewer Playground

Code Playground

Write HTML, CSS, and JavaScript and see the results in real-time

HTML

CSS

JS

<!-- Welcome to the Code Playground --> <div class="cp-demo-container"> <h1>Interactive Code Editor</h1> <p>Edit the code and see the results in real-time!</p> <div class="cp-card"> <h2>Features</h2> <ul> <li>Real-time preview</li> <li>Responsive design</li> <li>Works in Blogger</li> <li>Easy to use</li> </ul> </div> <button id="cp-action-btn">Click Me!</button> <div id="cp-output">Welcome to the code playground</div> </div>

/* Custom styles */ .cp-demo-container { max-width: 800px; margin: 0 auto; background: white; padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .cp-demo-container h1 { color: #1a2a6c; margin-bottom: 20px; } .cp-demo-container p { color: #666; line-height: 1.6; margin-bottom: 20px; } .cp-card { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; text-align: left; border-left: 4px solid #1a2a6c; } .cp-card h2 { color: #1a2a6c; margin-bottom: 15px; } .cp-card ul { padding-left: 20px; } .cp-card li { margin-bottom: 8px; } #cp-action-btn { background: #1a2a6c; color: white; border: none; padding: 12px 24px; border-radius: 5px; cursor: pointer; font-size: 16px; transition: all 0.3s; margin-top: 15px; } #cp-action-btn:hover { background: #253a8d; transform: translateY(-2px); } #cp-output { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px; font-weight: bold; }

// Interactive JavaScript example document.addEventListener('DOMContentLoaded', function() { const button = document.getElementById('cp-action-btn'); const output = document.getElementById('cp-output'); let clickCount = 0; button.addEventListener('click', function() { clickCount++; output.innerHTML = `Button clicked ${clickCount} times!`; // Add animation output.style.transition = 'all 0.3s'; output.style.transform = 'scale(1.05)'; setTimeout(() => { output.style.transform = 'scale(1)'; }, 300); // Change background color randomly const colors = ['#1a2a6c', '#b21f1f', '#fdbb2d', '#28a745', '#dc3545']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; document.body.style.background = `linear-gradient(135deg, ${randomColor}, #${Math.floor(Math.random()*16777215).toString(16)})`; }); });

Live Preview

Code executed successfully!