JS Examples

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .todo-item { padding: 8px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; }
    </style>
</head>
<body>
    <h3>Contoh Aplikasi: Daftar Tugas Mini (To-Do)</h3>
    <input type="text" id="tugasBaru" placeholder="Tugas baru..." style="padding:8px; width:200px;">
    <button onclick="tambahTugas()" style="padding:8px 15px; cursor:pointer;">Tambah</button>
    <div id="listTugas" style="max-width:320px; margin-top:15px;"></div>

    <script>
        function tambahTugas() {
            const input = document.getElementById('tugasBaru');
            if (!input.value.trim()) return;

            const list = document.getElementById('listTugas');
            const div = document.createElement('div');
            div.className = 'todo-item';
            div.innerHTML = '<span>' + input.value + '</span> <button onclick="this.parentElement.remove()" style="color:red; border:none; background:none; cursor:pointer;">&times;</button>';
            list.appendChild(div);
            input.value = '';
        }
    </script>
</body>
</html>