Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <style> body { font-family: sans-serif; text-align: center; padding: 30px; background: #f8fafc; } .counter-card { background: white; padding: 30px; border-radius: 12px; display: inline-block; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .angka { font-size: 54px; font-weight: bold; color: #0d2e5c; margin: 15px 0; } .btn { padding: 10px 20px; font-size: 16px; font-weight: bold; border-radius: 6px; border: none; cursor: pointer; margin: 0 5px; } .btn-plus { background: #04AA6D; color: white; } .btn-minus { background: #e34f26; color: white; } .btn-reset { background: #94a3b8; color: white; } </style> </head> <body> <div class="counter-card"> <h3>Proyek: Interactive Counter</h3> <div id="nilaiHitung" class="angka">0</div> <div> <button class="btn btn-minus" onclick="ubah(-1)">- Kurang</button> <button class="btn btn-reset" onclick="reset()">Reset</button> <button class="btn btn-plus" onclick="ubah(1)">+ Tambah</button> </div> </div> <script> let counter = 0; function ubah(delta) { counter += delta; document.getElementById('nilaiHitung').innerText = counter; } function reset() { counter = 0; document.getElementById('nilaiHitung').innerText = counter; } </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang