JS Projects New

<!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>