mortgage-calculator-package 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/calculator.d.ts +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.html +5 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +4 -0
- package/dist/styles.css.map +1 -0
- package/package.json +6 -3
- package/src/calculator.ts +0 -13
- package/src/fonts/Mont-ExtraLight.otf +0 -0
- package/src/fonts/Mont-Heavy.otf +0 -0
- package/src/index.ts +0 -101
- package/src/styles.scss +0 -232
- package/src/test-webpage.html +0 -22
- package/tsconfig.json +0 -16
- package/webpack.config.js +0 -45
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function calculateMortgage(principal: number, interestRate: number, amortizationYears: number, paymentFrequency: string): number;
|
package/dist/index.d.ts
ADDED
package/dist/index.html
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mortgage Calculator Test</title><script defer="defer" src="index.js"></script><link href="styles.css" rel="stylesheet"></head><body><div id="mortgage-calculator-container"></div><script>window.addEventListener('DOMContentLoaded', () => {
|
|
2
|
+
MortgageCalculator.init({
|
|
3
|
+
containerId: 'mortgage-calculator-container',
|
|
4
|
+
});
|
|
5
|
+
});</script></body></html>
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("MortgageCalculator",[],t):"object"==typeof exports?exports.MortgageCalculator=t():e.MortgageCalculator=t()}(self,(()=>(()=>{"use strict";var e={264:(e,t,n)=>{n.r(t)},846:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.calculateMortgage=function(e,t,n,a){const o=t/100/2,l=Math.pow(1+o,2/12)-1,i=12*n,r=e*(l*Math.pow(1+l,i))/(Math.pow(1+l,i)-1);let d;switch(a){case"weekly":d=12*r/52;break;case"biweekly":d=12*r/26;break;default:d=r}return d}}},t={};function n(a){var o=t[a];if(void 0!==o)return o.exports;var l=t[a]={exports:{}};return e[a](l,l.exports,n),l.exports}n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.init=function(e){const t=document.getElementById(e.containerId);if(!t)return void console.error("Mortgage Calculator container not found");t.innerHTML='\n <div class="mortgage-calculator">\n <div class="section-heading"><span>Mortgage</span> Payment <span>Calculator</span></div>\n <div class="calculator-fields">\n <div class="mortgage-amount-wrapper">\n <div class="calculator-floating-label-field">\n <label>Mortgage Amount</label>\n <input type="text" id="mortgage-amount-field" />\n </div>\n </div>\n <div class="rate-amortization-period-wrapper">\n <div class="calculator-fixed-label-field">\n <label>Rates</label>\n <input type="text" id="rate-field" />\n </div>\n <div class="calculator-fixed-label-field">\n <label>Amortization</label>\n <select id="amortization-field">\n <option value="10">10 years</option>\n <option value="15">15 years</option>\n <option value="20">20 years</option>\n <option value="25">25 years</option>\n </select>\n </div>\n <div class="calculator-fixed-label-field">\n <label>Payment Period</label>\n <select id="payment-period-field">\n <option value="monthly">Monthly</option>\n <option value="biweekly">Bi-weekly</option>\n <option value="weekly">Weekly</option>\n </select>\n </div>\n </div>\n <div class="apply-wrapper">\n <div id="mortagage-payment"></div>\n <button>Apply</button>\n </div>\n </div>\n </div>\n ';const n=document.getElementById("mortgage-amount-field"),a=document.getElementById("rate-field"),l=document.getElementById("amortization-field"),i=document.getElementById("payment-period-field"),r=(e,t)=>{e.addEventListener("input",(e=>{const n=e.target;if(n){let e=n.value;e=e.replace(/[^0-9.]/g,""),n.value=e?"$"===t?`${t}${parseInt(e).toLocaleString("en-US")}`:`${e}${t}`:""}}))};r(n,"$"),r(a,"%"),n.addEventListener("input",o),a.addEventListener("input",o),l.addEventListener("change",o),i.addEventListener("change",o)},n(264);const t=n(846);function o(){const e=document.getElementById("mortgage-amount-field"),n=document.getElementById("rate-field"),a=document.getElementById("amortization-field"),o=document.getElementById("payment-period-field"),l=document.getElementById("mortagage-payment"),i=parseFloat(e.value.replace(/\$/g,"").replace(/\,/g,"")),r=parseFloat(n.value.replace(/%/g,"")),d=parseInt(a.value),c=o.value;if(isNaN(i)||isNaN(r)||isNaN(d)||!c)return;const u=(0,t.calculateMortgage)(i,r,d,c);l.textContent=`$${parseFloat(u.toFixed(2)).toLocaleString("en-US")}`}})(),a})()));
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","mappings":"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","sources":["webpack://MortgageCalculator/webpack/universalModuleDefinition","webpack://MortgageCalculator/./src/calculator.ts","webpack://MortgageCalculator/webpack/bootstrap","webpack://MortgageCalculator/webpack/runtime/make namespace object","webpack://MortgageCalculator/./src/index.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"MortgageCalculator\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"MortgageCalculator\"] = factory();\n\telse\n\t\troot[\"MortgageCalculator\"] = factory();\n})(self, () => {\nreturn ","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.calculateMortgage = calculateMortgage;\nfunction calculateMortgage(principal, interestRate, amortizationYears, paymentFrequency) {\n const annualRate = interestRate / 100;\n const semiAnnualRate = annualRate / 2;\n const equivalentRate = Math.pow(1 + semiAnnualRate, 2 / 12) - 1;\n const totalMonthlyPayments = amortizationYears * 12;\n // Adjusted formula to get $2,908 for the given inputs\n const monthlyPayment = principal * (equivalentRate * Math.pow(1 + equivalentRate, totalMonthlyPayments)) / (Math.pow(1 + equivalentRate, totalMonthlyPayments) - 1);\n let payment;\n switch (paymentFrequency) {\n case \"weekly\":\n payment = (monthlyPayment * 12) / 52;\n break;\n case \"biweekly\":\n payment = (monthlyPayment * 12) / 26;\n break;\n case \"monthly\":\n default:\n payment = monthlyPayment;\n }\n return payment;\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.init = init;\nrequire(\"./styles.scss\");\nconst calculator_1 = require(\"./calculator\");\nfunction handleCalculation() {\n const mortgageAmountInput = document.getElementById('mortgage-amount-field');\n const rateInput = document.getElementById('rate-field');\n const amortizationSelect = document.getElementById('amortization-field');\n const paymentPeriodSelect = document.getElementById('payment-period-field');\n const mortagagePaymentElement = document.getElementById('mortagage-payment');\n const mortgageAmount = parseFloat(mortgageAmountInput.value.replace(/\\$/g, '').replace(/\\,/g, ''));\n const rate = parseFloat(rateInput.value.replace(/%/g, ''));\n const amortization = parseInt(amortizationSelect.value);\n const paymentPeriod = paymentPeriodSelect.value;\n if (isNaN(mortgageAmount) || isNaN(rate) || isNaN(amortization) || !paymentPeriod) {\n return;\n }\n const payment = (0, calculator_1.calculateMortgage)(mortgageAmount, rate, amortization, paymentPeriod);\n mortagagePaymentElement.textContent = `$${parseFloat(payment.toFixed(2)).toLocaleString('en-US')}`;\n}\nfunction init(options) {\n const container = document.getElementById(options.containerId);\n if (!container) {\n console.error('Mortgage Calculator container not found');\n return;\n }\n container.innerHTML = `\n <div class=\"mortgage-calculator\">\n <div class=\"section-heading\"><span>Mortgage</span> Payment <span>Calculator</span></div>\n <div class=\"calculator-fields\">\n <div class=\"mortgage-amount-wrapper\">\n <div class=\"calculator-floating-label-field\">\n <label>Mortgage Amount</label>\n <input type=\"text\" id=\"mortgage-amount-field\" />\n </div>\n </div>\n <div class=\"rate-amortization-period-wrapper\">\n <div class=\"calculator-fixed-label-field\">\n <label>Rates</label>\n <input type=\"text\" id=\"rate-field\" />\n </div>\n <div class=\"calculator-fixed-label-field\">\n <label>Amortization</label>\n <select id=\"amortization-field\">\n <option value=\"10\">10 years</option>\n <option value=\"15\">15 years</option>\n <option value=\"20\">20 years</option>\n <option value=\"25\">25 years</option>\n </select>\n </div>\n <div class=\"calculator-fixed-label-field\">\n <label>Payment Period</label>\n <select id=\"payment-period-field\">\n <option value=\"monthly\">Monthly</option>\n <option value=\"biweekly\">Bi-weekly</option>\n <option value=\"weekly\">Weekly</option>\n </select>\n </div>\n </div>\n <div class=\"apply-wrapper\">\n <div id=\"mortagage-payment\"></div>\n <button>Apply</button>\n </div>\n </div>\n </div>\n `;\n const mortgageAmountInput = document.getElementById('mortgage-amount-field');\n const rateInput = document.getElementById('rate-field');\n const amortizationSelect = document.getElementById('amortization-field');\n const paymentPeriodSelect = document.getElementById('payment-period-field');\n // Reusable function for handling dollar sign and percentage symbol formatting\n const formatInput = (inputElement, symbol) => {\n inputElement.addEventListener('input', (event) => {\n const target = event.target;\n if (target) {\n let value = target.value;\n value = value.replace(/[^0-9.]/g, ''); // Remove non-numeric characters\n // Reapply the symbol (either $ or %)\n target.value = value ? symbol === '$' ? `${symbol}${parseInt(value).toLocaleString('en-US')}` : `${value}${symbol}` : '';\n }\n });\n };\n // Add formatting for currency and percentage inputs\n formatInput(mortgageAmountInput, '$');\n formatInput(rateInput, '%');\n // Attach event listeners to each input/select field to auto-calculate on change\n mortgageAmountInput.addEventListener('input', handleCalculation);\n rateInput.addEventListener('input', handleCalculation);\n amortizationSelect.addEventListener('change', handleCalculation);\n paymentPeriodSelect.addEventListener('change', handleCalculation);\n}\n"],"names":["root","factory","exports","module","define","amd","self","Object","defineProperty","value","calculateMortgage","principal","interestRate","amortizationYears","paymentFrequency","semiAnnualRate","equivalentRate","Math","pow","totalMonthlyPayments","monthlyPayment","payment","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","r","Symbol","toStringTag","init","options","container","document","getElementById","containerId","console","error","innerHTML","mortgageAmountInput","rateInput","amortizationSelect","paymentPeriodSelect","formatInput","inputElement","symbol","addEventListener","event","target","replace","parseInt","toLocaleString","handleCalculation","calculator_1","mortagagePaymentElement","mortgageAmount","parseFloat","rate","amortization","paymentPeriod","isNaN","textContent","toFixed"],"sourceRoot":""}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;0,800;1,200;1,400;1,600;1,800&display=swap);
|
|
2
|
+
.mortgage-calculator{max-width:fit-content;margin:auto;font-family:"Poppins",serif}.mortgage-calculator .section-heading{font-size:56px;font-weight:200;line-height:74px;text-align:center;padding-bottom:2rem}.mortgage-calculator .section-heading span{font-weight:800}@media(max-width: 991px){.mortgage-calculator .section-heading{font-size:42px;line-height:50px;padding-bottom:0}}.mortgage-calculator .calculator-fields{position:relative;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.1)}@media(max-width: 991px){.mortgage-calculator .calculator-fields{background:unset;box-shadow:unset}}.mortgage-calculator .calculator-fields .mortgage-amount-wrapper{display:grid;grid-template-columns:auto;justify-content:center;align-items:center;padding-top:3rem}@media(max-width: 991px){.mortgage-calculator .calculator-fields .mortgage-amount-wrapper{grid-template-columns:1fr;padding:3rem 1rem 0 1rem}}.mortgage-calculator .calculator-fields .rate-amortization-period-wrapper{display:grid;grid-template-columns:repeat(3, auto);justify-content:center;align-items:center;grid-gap:1rem;padding:2rem 0 6rem 0}@media(max-width: 991px){.mortgage-calculator .calculator-fields .rate-amortization-period-wrapper{grid-template-columns:1fr;padding:1rem}}.mortgage-calculator .calculator-fields .calculator-floating-label-field{position:relative}.mortgage-calculator .calculator-fields .calculator-floating-label-field label{font-size:16px;font-weight:200;line-height:20px;background-color:#fff;position:absolute;top:-0.75rem;left:1rem;padding:.25rem .5rem}.mortgage-calculator .calculator-fields .calculator-floating-label-field input,.mortgage-calculator .calculator-fields .calculator-floating-label-field select{font-family:"Poppins",serif;font-size:22px;font-weight:800;line-height:30px;max-width:250px;border-radius:4px;border:1px solid #ccc;padding:1rem}@media(max-width: 991px){.mortgage-calculator .calculator-fields .calculator-floating-label-field input,.mortgage-calculator .calculator-fields .calculator-floating-label-field select{max-width:unset;width:-webkit-fill-available}}.mortgage-calculator .calculator-fields .calculator-floating-label-field select{padding:1.3rem}.mortgage-calculator .calculator-fields .calculator-fixed-label-field{display:grid;border:1px solid #ccc;border-radius:4px;padding:.5rem 1rem}.mortgage-calculator .calculator-fields .calculator-fixed-label-field label{font-size:14px;font-weight:200;line-height:14px;background-color:#fff;padding:.25rem 0}.mortgage-calculator .calculator-fields .calculator-fixed-label-field input,.mortgage-calculator .calculator-fields .calculator-fixed-label-field select{font-family:"Poppins",serif;font-size:22px;font-weight:800;line-height:22px;max-width:250px;padding:0;border:none;outline:none;box-shadow:none}@media(max-width: 991px){.mortgage-calculator .calculator-fields .calculator-fixed-label-field input,.mortgage-calculator .calculator-fields .calculator-fixed-label-field select{max-width:unset;width:-webkit-fill-available}}.mortgage-calculator .calculator-fields .calculator-fixed-label-field input:focus,.mortgage-calculator .calculator-fields .calculator-fixed-label-field select:focus{border:none;outline:none;box-shadow:none}.mortgage-calculator .calculator-fields .calculator-fixed-label-field select{padding:.2rem 0}.mortgage-calculator .calculator-fields .masked-input{display:grid;grid-template-columns:repeat(2, auto);align-items:center}.mortgage-calculator .calculator-fields .apply-wrapper{display:grid;grid-template-columns:repeat(2, 250px);justify-items:center;align-items:center;grid-gap:.5rem;background:#1a1a30;border-radius:30px;position:absolute;bottom:-4rem;left:10rem;padding:2rem}@media(max-width: 991px){.mortgage-calculator .calculator-fields .apply-wrapper{position:unset;grid-template-columns:auto;padding:1rem;margin:1rem}}.mortgage-calculator .calculator-fields .apply-wrapper #mortagage-payment{font-size:42px;font-weight:200;line-height:56px;color:#fff}.mortgage-calculator .calculator-fields .apply-wrapper button{font-family:"Poppins",serif;font-size:20px;font-weight:200;line-height:27px;color:#1a1a30;text-transform:uppercase;background:#fff;width:200px;border-radius:2rem;padding:.5rem;border:none;cursor:pointer}
|
|
3
|
+
|
|
4
|
+
/*# sourceMappingURL=styles.css.map*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css","mappings":";AAsBA,qBACI,sBACA,YACA,4BAEA,sCACI,eACA,gBACA,iBACA,kBACA,oBAEA,2CACI,gBAxBR,yBAgBA,sCAYQ,eACA,iBACA,kBAIR,wCACI,kBACA,qBA7C0B,CA8C1B,mCArCJ,yBAkCA,wCAMQ,iBACA,kBAGJ,iEACI,aACA,2BACA,uBACA,mBACA,iBAjDR,yBA4CI,iEAQQ,0BACA,0BAIR,0EACI,aACA,sCACA,uBACA,mBACA,cACA,sBA/DR,yBAyDI,0EASQ,0BACA,cAIR,yEACI,kBAEA,+EACI,eACA,gBACA,iBACA,qBAvFkB,CAyFlB,kBACA,aACA,UACA,qBAGJ,+JAEI,4BACA,eACA,gBACA,iBACA,gBACA,kBACA,sBACA,aA/FZ,yBAsFQ,+JAYQ,gBACA,8BAIR,gFACI,eAIR,sEACI,aACA,sBACA,kBACA,mBAEA,4EACI,eACA,gBACA,iBACA,qBA/HkB,CAiIlB,iBAGJ,yJAEI,4BACA,eACA,gBACA,iBACA,gBAEA,UACA,YACA,aACA,gBAtIZ,yBA2HQ,yJAcQ,gBACA,8BAGJ,qKACI,YACA,aACA,gBAIR,6EACI,gBAIR,sDACI,aACA,sCACA,mBAGJ,uDACI,aACA,uCACA,qBACA,mBACA,eACA,mBACA,mBAEA,kBACA,aACA,WACA,aA3KR,yBA+JI,uDAeQ,eACA,2BACA,aACA,aAIJ,0EACI,eACA,gBACA,iBACA,UAlMkB,CAqMtB,8DACI,4BACA,eACA,gBACA,iBACA,cACA,yBACA,eA5MkB,CA6MlB,YACA,mBACA,cACA,YACA,e","sources":["webpack://MortgageCalculator/./src/styles.scss"],"names":[],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mortgage-calculator-package",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A simple, embeddable mortgage calculator that dynamically generates an interactive and styled calculator widget. It allows users to input mortgage amount, interest rate, amortization period, and payment frequency, and calculates the monthly payment based on these inputs. The package handles both the mortgage calculation logic and the HTML/CSS rendering, making it easy to integrate into any webpage by simply providing a container ID. Ideal for real estate websites, financial tools, and blogs.",
|
|
5
|
-
"main": "index.js",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
6
9
|
"scripts": {
|
|
7
10
|
"build": "webpack --config webpack.config.js",
|
|
8
11
|
"dev": "webpack serve --open",
|
|
@@ -53,4 +56,4 @@
|
|
|
53
56
|
"webpack-cli": "^5.1.4",
|
|
54
57
|
"webpack-dev-server": "^5.1.0"
|
|
55
58
|
}
|
|
56
|
-
}
|
|
59
|
+
}
|
package/src/calculator.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export function calculateMortgage(
|
|
2
|
-
principal: number,
|
|
3
|
-
interestRate: number,
|
|
4
|
-
years: number,
|
|
5
|
-
paymentFrequency: number
|
|
6
|
-
): number {
|
|
7
|
-
const months = years * paymentFrequency;
|
|
8
|
-
const monthlyInterestRate = interestRate / paymentFrequency / 100;
|
|
9
|
-
return (
|
|
10
|
-
(principal * monthlyInterestRate) /
|
|
11
|
-
(1 - Math.pow(1 + monthlyInterestRate, -months))
|
|
12
|
-
);
|
|
13
|
-
}
|
|
Binary file
|
package/src/fonts/Mont-Heavy.otf
DELETED
|
Binary file
|
package/src/index.ts
DELETED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import './styles.scss';
|
|
2
|
-
import { calculateMortgage } from './calculator';
|
|
3
|
-
|
|
4
|
-
function handleCalculation() {
|
|
5
|
-
const mortgageAmountInput = document.getElementById('mortgage-amount-field') as HTMLInputElement;
|
|
6
|
-
const rateInput = document.getElementById('rate-field') as HTMLInputElement;
|
|
7
|
-
const amortizationSelect = document.getElementById('amortization-field') as HTMLSelectElement;
|
|
8
|
-
const paymentPeriodSelect = document.getElementById('payment-period-field') as HTMLSelectElement;
|
|
9
|
-
const mortagagePaymentElement = document.getElementById('mortagage-payment') as HTMLParagraphElement;
|
|
10
|
-
|
|
11
|
-
const mortgageAmount = parseFloat(mortgageAmountInput.value.replace(/\$/g, '').replace(/\,/g, ''));
|
|
12
|
-
const rate = parseFloat(rateInput.value.replace(/%/g, ''));
|
|
13
|
-
const amortization = parseInt(amortizationSelect.value);
|
|
14
|
-
const paymentPeriod = parseInt(paymentPeriodSelect.value);
|
|
15
|
-
|
|
16
|
-
if (isNaN(mortgageAmount) || isNaN(rate) || isNaN(amortization) || isNaN(paymentPeriod)) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const payment = calculateMortgage(mortgageAmount, rate, amortization, paymentPeriod);
|
|
21
|
-
mortagagePaymentElement.textContent = `$${parseFloat(payment.toFixed(2)).toLocaleString('en-US')}`;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export function init(options: { containerId: string }) {
|
|
25
|
-
const container = document.getElementById(options.containerId);
|
|
26
|
-
|
|
27
|
-
if (!container) {
|
|
28
|
-
console.error('Mortgage Calculator container not found');
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
container.innerHTML = `
|
|
33
|
-
<div class="mortgage-calculator">
|
|
34
|
-
<div class="section-heading"><span>Mortgage</span> Payment <span>Calculator</span></div>
|
|
35
|
-
<div class="calculator-fields">
|
|
36
|
-
<div class="mortgage-amount-wrapper">
|
|
37
|
-
<div class="calculator-floating-label-field">
|
|
38
|
-
<label>Mortgage Amount</label>
|
|
39
|
-
<input type="text" id="mortgage-amount-field" />
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
<div class="rate-amortization-period-wrapper">
|
|
43
|
-
<div class="calculator-fixed-label-field">
|
|
44
|
-
<label>Rates</label>
|
|
45
|
-
<input type="text" id="rate-field" />
|
|
46
|
-
</div>
|
|
47
|
-
<div class="calculator-fixed-label-field">
|
|
48
|
-
<label>Amortization</label>
|
|
49
|
-
<select id="amortization-field">
|
|
50
|
-
<option value="10">10 years</option>
|
|
51
|
-
<option value="15">15 years</option>
|
|
52
|
-
<option value="20">20 years</option>
|
|
53
|
-
<option value="25">25 years</option>
|
|
54
|
-
</select>
|
|
55
|
-
</div>
|
|
56
|
-
<div class="calculator-fixed-label-field">
|
|
57
|
-
<label>Payment Period</label>
|
|
58
|
-
<select id="payment-period-field">
|
|
59
|
-
<option value="12">Monthly</option>
|
|
60
|
-
<option value="6">Bi-Annually</option>
|
|
61
|
-
<option value="1">Annually</option>
|
|
62
|
-
</select>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
<div class="apply-wrapper">
|
|
66
|
-
<div id="mortagage-payment"></div>
|
|
67
|
-
<button>Apply</button>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
`;
|
|
72
|
-
|
|
73
|
-
const mortgageAmountInput = document.getElementById('mortgage-amount-field') as HTMLInputElement;
|
|
74
|
-
const rateInput = document.getElementById('rate-field') as HTMLInputElement;
|
|
75
|
-
const amortizationSelect = document.getElementById('amortization-field') as HTMLSelectElement;
|
|
76
|
-
const paymentPeriodSelect = document.getElementById('payment-period-field') as HTMLSelectElement;
|
|
77
|
-
|
|
78
|
-
// Reusable function for handling dollar sign and percentage symbol formatting
|
|
79
|
-
const formatInput = (inputElement: HTMLInputElement, symbol: string) => {
|
|
80
|
-
inputElement.addEventListener('input', (event) => {
|
|
81
|
-
const target = event.target as HTMLInputElement;
|
|
82
|
-
if (target) {
|
|
83
|
-
let value = target.value;
|
|
84
|
-
value = value.replace(/[^0-9.]/g, ''); // Remove non-numeric characters
|
|
85
|
-
|
|
86
|
-
// Reapply the symbol (either $ or %)
|
|
87
|
-
target.value = value ? symbol === '$' ? `${symbol}${parseInt(value).toLocaleString('en-US')}` : `${value}${symbol}` : '';
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
// Add formatting for currency and percentage inputs
|
|
93
|
-
formatInput(mortgageAmountInput, '$');
|
|
94
|
-
formatInput(rateInput, '%');
|
|
95
|
-
|
|
96
|
-
// Attach event listeners to each input/select field to auto-calculate on change
|
|
97
|
-
mortgageAmountInput.addEventListener('input', handleCalculation);
|
|
98
|
-
rateInput.addEventListener('input', handleCalculation);
|
|
99
|
-
amortizationSelect.addEventListener('change', handleCalculation);
|
|
100
|
-
paymentPeriodSelect.addEventListener('change', handleCalculation);
|
|
101
|
-
}
|
package/src/styles.scss
DELETED
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
$mortgage-calculator-bg-color: #f7f7f7;
|
|
2
|
-
$mortgage-calculator-border-color: #ccc;
|
|
3
|
-
$mortgage-calculator-color-white: #ffffff;
|
|
4
|
-
$mortgage-calculator-border-radius: 8px;
|
|
5
|
-
$mortgage-calculator-button-bg-color: #007BFF;
|
|
6
|
-
|
|
7
|
-
@font-face {
|
|
8
|
-
font-family: 'Mont Extra Light';
|
|
9
|
-
src: url('./fonts/Mont-ExtraLight.otf') format('opentype');
|
|
10
|
-
font-weight: normal;
|
|
11
|
-
font-style: normal;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@font-face {
|
|
15
|
-
font-family: 'Mont Heavy';
|
|
16
|
-
src: url('./fonts/Mont-Heavy.otf') format('opentype');
|
|
17
|
-
font-weight: normal;
|
|
18
|
-
font-style: normal;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
$desktop-breakpoint: 992px;
|
|
22
|
-
|
|
23
|
-
@mixin respond-to-mobile {
|
|
24
|
-
@media (max-width: ($desktop-breakpoint - 1)) {
|
|
25
|
-
@content;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@mixin respond-to-desktop {
|
|
30
|
-
@media (min-width: $desktop-breakpoint) {
|
|
31
|
-
@content;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.mortgage-calculator {
|
|
36
|
-
max-width: fit-content;
|
|
37
|
-
margin: auto;
|
|
38
|
-
|
|
39
|
-
.section-heading {
|
|
40
|
-
font-family: 'Mont Extra Light', sans-serif;
|
|
41
|
-
font-size: 56px;
|
|
42
|
-
font-weight: 600;
|
|
43
|
-
line-height: 74px;
|
|
44
|
-
text-align: center;
|
|
45
|
-
padding-bottom: 2rem;
|
|
46
|
-
|
|
47
|
-
span {
|
|
48
|
-
font-family: 'Mont Heavy', sans-serif;
|
|
49
|
-
font-weight: 800;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@include respond-to-mobile {
|
|
53
|
-
font-size: 42px;
|
|
54
|
-
line-height: 50px;
|
|
55
|
-
padding-bottom: 0;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.calculator-fields {
|
|
60
|
-
position: relative;
|
|
61
|
-
background-color: $mortgage-calculator-color-white;
|
|
62
|
-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
63
|
-
|
|
64
|
-
@include respond-to-mobile {
|
|
65
|
-
background: unset;
|
|
66
|
-
box-shadow: unset;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.mortgage-amount-wrapper {
|
|
70
|
-
display: grid;
|
|
71
|
-
grid-template-columns: auto;
|
|
72
|
-
justify-content: center;
|
|
73
|
-
align-items: center;
|
|
74
|
-
padding-top: 3rem;
|
|
75
|
-
|
|
76
|
-
@include respond-to-mobile {
|
|
77
|
-
grid-template-columns: 1fr;
|
|
78
|
-
padding: 3rem 1rem 0 1rem;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.rate-amortization-period-wrapper {
|
|
83
|
-
display: grid;
|
|
84
|
-
grid-template-columns: repeat(3, auto);
|
|
85
|
-
justify-content: center;
|
|
86
|
-
align-items: center;
|
|
87
|
-
grid-gap: 1rem;
|
|
88
|
-
padding: 2rem 0 6rem 0;
|
|
89
|
-
|
|
90
|
-
@include respond-to-mobile {
|
|
91
|
-
grid-template-columns: 1fr;
|
|
92
|
-
padding: 1rem;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.calculator-floating-label-field {
|
|
97
|
-
position: relative;
|
|
98
|
-
|
|
99
|
-
label {
|
|
100
|
-
font-family: 'Mont Extra Light', sans-serif;
|
|
101
|
-
font-size: 16px;
|
|
102
|
-
font-weight: 400;
|
|
103
|
-
line-height: 20px;
|
|
104
|
-
background-color: $mortgage-calculator-color-white;
|
|
105
|
-
|
|
106
|
-
position: absolute;
|
|
107
|
-
top: -0.75rem;
|
|
108
|
-
left: 1rem;
|
|
109
|
-
padding: 0.25rem 0.5rem;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
input,
|
|
113
|
-
select {
|
|
114
|
-
font-family: 'Mont Heavy', sans-serif;
|
|
115
|
-
font-size: 22px;
|
|
116
|
-
font-weight: 800;
|
|
117
|
-
line-height: 30px;
|
|
118
|
-
max-width: 250px;
|
|
119
|
-
border-radius: 4px;
|
|
120
|
-
border: 1px solid $mortgage-calculator-border-color;
|
|
121
|
-
padding: 1rem;
|
|
122
|
-
|
|
123
|
-
@include respond-to-mobile {
|
|
124
|
-
max-width: unset;
|
|
125
|
-
width: -webkit-fill-available;
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
select {
|
|
130
|
-
padding: 1.3rem;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.calculator-fixed-label-field {
|
|
135
|
-
display: grid;
|
|
136
|
-
border: 1px solid #ccc;
|
|
137
|
-
border-radius: 4px;
|
|
138
|
-
padding: 0.5rem 1rem;
|
|
139
|
-
|
|
140
|
-
label {
|
|
141
|
-
font-family: 'Mont Extra Light', sans-serif;
|
|
142
|
-
font-size: 14px;
|
|
143
|
-
font-weight: 400;
|
|
144
|
-
line-height: 14px;
|
|
145
|
-
background-color: $mortgage-calculator-color-white;
|
|
146
|
-
|
|
147
|
-
padding: 0.25rem 0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
input,
|
|
151
|
-
select {
|
|
152
|
-
font-family: 'Mont Heavy', sans-serif;
|
|
153
|
-
font-size: 22px;
|
|
154
|
-
font-weight: 800;
|
|
155
|
-
line-height: 22px;
|
|
156
|
-
max-width: 250px;
|
|
157
|
-
|
|
158
|
-
padding: 0;
|
|
159
|
-
border: none;
|
|
160
|
-
outline: none;
|
|
161
|
-
box-shadow: none;
|
|
162
|
-
|
|
163
|
-
@include respond-to-mobile {
|
|
164
|
-
max-width: unset;
|
|
165
|
-
width: -webkit-fill-available;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&:focus {
|
|
169
|
-
border: none;
|
|
170
|
-
outline: none;
|
|
171
|
-
box-shadow: none;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
select {
|
|
176
|
-
padding: 0.2rem 0;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.masked-input {
|
|
181
|
-
display: grid;
|
|
182
|
-
grid-template-columns: repeat(2, auto);
|
|
183
|
-
align-items: center;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.apply-wrapper {
|
|
187
|
-
display: grid;
|
|
188
|
-
grid-template-columns: repeat(2, 250px);
|
|
189
|
-
justify-items: center;
|
|
190
|
-
align-items: center;
|
|
191
|
-
grid-gap: 0.5rem;
|
|
192
|
-
background: #1A1A30;
|
|
193
|
-
border-radius: 30px;
|
|
194
|
-
|
|
195
|
-
position: absolute;
|
|
196
|
-
bottom: -4rem;
|
|
197
|
-
left: 10rem;
|
|
198
|
-
padding: 2rem;
|
|
199
|
-
|
|
200
|
-
@include respond-to-mobile {
|
|
201
|
-
position: unset;
|
|
202
|
-
grid-template-columns: auto;
|
|
203
|
-
padding: 1rem;
|
|
204
|
-
margin: 1rem;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
#mortagage-payment {
|
|
209
|
-
font-family: 'Mont Extra Light', sans-serif;
|
|
210
|
-
font-size: 42px;
|
|
211
|
-
font-weight: 700;
|
|
212
|
-
line-height: 56px;
|
|
213
|
-
color: $mortgage-calculator-color-white;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
button {
|
|
217
|
-
font-family: 'Mont Extra Light', sans-serif;
|
|
218
|
-
font-size: 20px;
|
|
219
|
-
font-weight: 800;
|
|
220
|
-
line-height: 27px;
|
|
221
|
-
color: #1A1A30;
|
|
222
|
-
text-transform: uppercase;
|
|
223
|
-
background: $mortgage-calculator-color-white;
|
|
224
|
-
width: 200px;
|
|
225
|
-
border-radius: 2rem;
|
|
226
|
-
padding: 0.5rem;
|
|
227
|
-
border: none;
|
|
228
|
-
cursor: pointer;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}
|
package/src/test-webpage.html
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mortgage Calculator Test</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<div id="mortgage-calculator-container"></div>
|
|
12
|
-
|
|
13
|
-
<script>
|
|
14
|
-
window.addEventListener('DOMContentLoaded', () => {
|
|
15
|
-
MortgageCalculator.init({
|
|
16
|
-
containerId: 'mortgage-calculator-container',
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
</script>
|
|
20
|
-
</body>
|
|
21
|
-
|
|
22
|
-
</html>
|
package/tsconfig.json
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"outDir": "./dist",
|
|
4
|
-
"rootDir": "./src",
|
|
5
|
-
"target": "es6",
|
|
6
|
-
"module": "commonjs",
|
|
7
|
-
"esModuleInterop": true,
|
|
8
|
-
"strict": true,
|
|
9
|
-
"skipLibCheck": true,
|
|
10
|
-
"declaration": true
|
|
11
|
-
},
|
|
12
|
-
"exclude": [
|
|
13
|
-
"node_modules",
|
|
14
|
-
"dist"
|
|
15
|
-
]
|
|
16
|
-
}
|
package/webpack.config.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
const path = require("path");
|
|
2
|
-
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
3
|
-
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
4
|
-
|
|
5
|
-
module.exports = {
|
|
6
|
-
entry: "./src/index.ts",
|
|
7
|
-
output: {
|
|
8
|
-
filename: "index.js",
|
|
9
|
-
path: path.resolve(__dirname, "dist"),
|
|
10
|
-
library: "MortgageCalculator",
|
|
11
|
-
libraryTarget: "umd",
|
|
12
|
-
umdNamedDefine: true,
|
|
13
|
-
clean: true,
|
|
14
|
-
},
|
|
15
|
-
resolve: {
|
|
16
|
-
extensions: [".ts", ".js"],
|
|
17
|
-
},
|
|
18
|
-
module: {
|
|
19
|
-
rules: [
|
|
20
|
-
{
|
|
21
|
-
test: /\.ts$/,
|
|
22
|
-
use: "ts-loader",
|
|
23
|
-
exclude: /node_modules/,
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
test: /\.scss$/,
|
|
27
|
-
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
},
|
|
31
|
-
plugins: [
|
|
32
|
-
new MiniCssExtractPlugin({
|
|
33
|
-
filename: "styles.css",
|
|
34
|
-
}),
|
|
35
|
-
new HtmlWebpackPlugin({
|
|
36
|
-
template: "./src/test-webpage.html", // Path to your HTML template
|
|
37
|
-
}),
|
|
38
|
-
],
|
|
39
|
-
mode: "development",
|
|
40
|
-
devtool: "source-map",
|
|
41
|
-
devServer: {
|
|
42
|
-
port: 8080,
|
|
43
|
-
hot: true,
|
|
44
|
-
},
|
|
45
|
-
};
|