Code Editor (Editor Window)

HTML

<div class="wrap">
  <h1>Selamat Datang!</h1>
  <p>Ini adalah contoh halaman HTML.</p>
  <button id="demo-btn">Klik Saya!</button>
</div>

CSS

:root{color-scheme:light}
body{font-family:Arial, sans-serif;background:#eef6ff;margin:0}
.wrap{min-height:80vh;display:grid;place-items:center;background:#eef6ff}
h1{color:#1f2937;margin-bottom:8px}
p{color:#6b7280;font-size:18px;margin:0 0 16px}
#demo-btn{background:#3498db;color:#fff;border:0;padding:12px 24px;border-radius:8px;font-size:16px;cursor:pointer;transition:.2s}
#demo-btn:hover{filter:brightness(0.9)}

JavaScript

document.addEventListener('click', (e) => {
  if(e.target.id === 'demo-btn'){
    alert('Tombol diklik!');
  }
});