@lyonfinancial/loan-calculator
v1.4.0
Published
Loads a loan calculator into a specific div.
Downloads
723
Maintainers
davidpoindexterReadme
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>