@lyonfinancial/loan-calculator
Version:
Loads a loan calculator into a specific div.
69 lines (64 loc) • 1.94 kB
Markdown
# lyon-financial-loan-calculator
## A loader script to inject a loan-calculator component automatically
### Usage on any website
1. Inject the loading script in the head (ideally) of the website
```diff
<head>
<title>My Website</title>
+ <script src="https://unpkg.com/@lyonfinancial/loan-calculator/dist/loader.js" />
</head>
```
2. Create a div with an id of your choice where you want to display the calculator
```diff
<p>Some existing content.</p>
+ <div id="loan-calculator"></div>
<p>Some other existing content.</p>
```
3. Initialize the loader as follows (ideally near the end of the body)
```diff
<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:
```diff
<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>
```