@lyonfinancial/loan-calculator NPM

lyon-financial-loan-calculator

A loader script to inject a loan-calculator component automatically

Usage on any website

Inject the loading script in the head (ideally) of the website

<head>
    <title>My Website</title>
+   <script src="https://unpkg.com/@lyonfinancial/loan-calculator/dist/loader.js" />
</head>

Create a div with an id of your choice where you want to display the calculator

    <p>Some existing content.</p>
+   <div id="loan-calculator"></div>
    <p>Some other existing content.</p>

Initialize the loader as follows (ideally near the end of the body)

        <p>Some existing content</p>
+       <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", () => {
+            const loader = new LoanCalculator("#loan-calculator");
+            loader.load();
+        });
+    </script>
    </body>

Full change example:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Website</title>
+        <script src="loader.js" defer></script>
    </head>
    <body>
        <header>My Website</header>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
        </nav>
        <main>
            <div class="pane">
                <h2>Pane 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="pane">
+                <div id="loan-calculator"></div>
            </div>
        </main>
        <footer>
            <p>Copyright ...</p>
        </footer>
+       <script type="text/javascript">
+        document.addEventListener("DOMContentLoaded", () => {
+            const loader = new LoanCalculator("#loan-calculator");
+            loader.load();
+        });
+    </script>
    </body>
</html>

loan-calculator lyon-financial

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago