Back
HTML / CSS / JS
Clear
Run
HTML
<div class="container"> <h1>Hello World!</h1> <p>This is a demo page.</p> <button id="btn">Click Me!</button> <p id="result"></p> </div>
CSS
.container { font-family: Arial, sans-serif; max-width: 400px; margin: 40px auto; padding: 30px; text-align: center; background: #f9f9f9; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } h1 { color: #333; margin-bottom: 10px; } p { color: #666; } button { padding: 12px 30px; font-size: 16px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px; } button:hover { background: #45a049; } #result { margin-top: 20px; font-size: 18px; font-weight: bold; color: #4CAF50; }
JavaScript
var count = 0; document.getElementById('btn').addEventListener('click', function() { count++; document.getElementById('result').textContent = 'Clicked ' + count + ' times!'; });
Output