index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Format Rupiah</title>
    <script src="dist/js/rupiaf.min.js"></script>
</head>
<body>
    <main id="app">
        <div class="container">
                <form method="get" action="#" id="nominalForm">
                        <label class="label" for="nominal">Rp.</label>
                        <input id="nominal" type="text" name="nominal" placeholder="Nominal" autocomplete="off">
                </form>
        </div>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
                const nominalInput = document.querySelector('#nominal');
                const nominalForm = document.querySelector('#nominalForm');
                nominalInput.addEventListener('keyup', function(event) {
                  event.target.value = new Rupiaf(event.target.value).convert();
                });
                nominalForm.addEventListener('submit', function(event) {
                  event.preventDefault();
                  nominalInput.value = new Rupiaf(nominalInput.value).clean();
                  console.log(nominalInput.value);
                });
        });
    </script>
</body>
</html>