mortgage-calculator-package 1.0.1 → 1.0.3
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 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.html +1 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -1
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
- package/dist/7500479912b782061a72.otf +0 -0
- package/dist/a1c041a8d8e27fc771db.otf +0 -0
package/dist/calculator.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function calculateMortgage(principal: number, interestRate: number,
|
|
1
|
+
export declare function calculateMortgage(principal: number, interestRate: number, amortizationYears: number, paymentFrequency: string): number;
|
package/dist/index.d.ts
CHANGED
package/dist/index.html
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
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
2
|
MortgageCalculator.init({
|
|
3
3
|
containerId: 'mortgage-calculator-container',
|
|
4
|
+
applyUrl: 'https://staging.kreateable.com/template-canvas'
|
|
4
5
|
});
|
|
5
6
|
});</script></body></html>
|
package/dist/index.js
CHANGED
|
@@ -1,2 +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,
|
|
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,a)=>{a.r(t)},846:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.calculateMortgage=function(e,t,a,n){const l=t/100/2,o=Math.pow(1+l,2/12)-1,i=12*a,d=e*(o*Math.pow(1+o,i))/(Math.pow(1+o,i)-1);let r;switch(n){case"weekly":r=12*d/52;break;case"biweekly":r=12*d/26;break;default:r=d}return r}}},t={};function a(n){var l=t[n];if(void 0!==l)return l.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,a),o.exports}a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{var e=n;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 <a class="mortgage-apply-link disabled" href="${e.applyUrl?e.applyUrl:""}" target="_blank">Apply</button>\n </div>\n </div>\n </div>\n `;const a=document.getElementById("mortgage-amount-field"),n=document.getElementById("rate-field"),o=document.getElementById("amortization-field"),i=document.getElementById("payment-period-field"),d=(e,t)=>{e.addEventListener("input",(e=>{const a=e.target;if(a){let e=a.value;e=e.replace(/[^0-9.]/g,""),a.value=e?"$"===t?`${t}${parseInt(e).toLocaleString("en-US")}`:`${e}${t}`:""}}))};d(a,"$"),d(n,"%"),a.addEventListener("input",l),n.addEventListener("input",l),o.addEventListener("change",l),i.addEventListener("change",l),n.addEventListener("focus",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.add("child-input-focused")})),n.addEventListener("blur",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.remove("child-input-focused")})),o.addEventListener("focus",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.add("child-input-focused")})),o.addEventListener("blur",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.remove("child-input-focused")})),i.addEventListener("focus",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.add("child-input-focused")})),i.addEventListener("blur",(e=>{var t;null===(t=e.target.parentElement)||void 0===t||t.classList.remove("child-input-focused")}))},a(264);const t=a(846);function l(){const e=document.getElementById("mortgage-amount-field"),a=document.getElementById("rate-field"),n=document.getElementById("amortization-field"),l=document.getElementById("payment-period-field"),o=document.getElementById("mortagage-payment"),i=document.querySelector(".mortgage-apply-link"),d=parseFloat(e.value.replace(/\$/g,"").replace(/\,/g,"")),r=parseFloat(a.value.replace(/%/g,"")),s=parseInt(n.value),c=l.value;if(isNaN(d)||isNaN(r)||isNaN(s)||!c)return o.textContent="",void(i.classList.contains("disabled")||i.classList.add("disabled"));const u=(0,t.calculateMortgage)(d,r,s,c);o.textContent=`$${parseFloat(u.toFixed(2)).toLocaleString("en-US")}`,i.classList.contains("disabled")&&i.classList.remove("disabled")}})(),n})()));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,qBAAsB,GAAIH,GACP,iBAAZC,QACdA,QAA4B,mBAAID,IAEhCD,EAAyB,mBAAIC,GAC9B,CATD,CASGK,MAAM,I,4DCRTC,OAAOC,eAAeN,EAAS,aAAc,CAAEO,OAAO,IACtDP,EAAQQ,kBACR,SAA2BC,EAAWC,EAAcC,EAAOC,GACvD,MAAMC,EAASF,EAAQC,EACjBE,EAAsBJ,EAAeE,EAAmB,IAC9D,OAASH,EAAYK,GAChB,EAAIC,KAAKC,IAAI,EAAIF,GAAsBD,GAChD,C,GCPII,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAapB,QAGrB,IAAIC,EAASgB,EAAyBE,GAAY,CAGjDnB,QAAS,CAAC,GAOX,OAHAsB,EAAoBH,GAAUlB,EAAQA,EAAOD,QAASkB,GAG/CjB,EAAOD,OACf,CCrBAkB,EAAoBK,EAAKvB,IACH,oBAAXwB,QAA0BA,OAAOC,aAC1CpB,OAAOC,eAAeN,EAASwB,OAAOC,YAAa,CAAElB,MAAO,WAE7DF,OAAOC,eAAeN,EAAS,aAAc,CAAEO,OAAO,GAAO,E,6BCJ9DF,OAAOC,eAAeN,EAAS,aAAc,CAAEO,OAAO,IACtDP,EAAQ0B,KAmBR,SAAcC,GACV,MAAMC,EAAYC,SAASC,eAAeH,EAAQI,aAClD,IAAKH,EAED,YADAI,QAAQC,MAAM,2CAGlBL,EAAUM,UAAY,ilDAwCtB,MAAMC,EAAsBN,SAASC,eAAe,yBAC9CM,EAAYP,SAASC,eAAe,cACpCO,EAAqBR,SAASC,eAAe,sBAC7CQ,EAAsBT,SAASC,eAAe,wBAE9CS,EAAc,CAACC,EAAcC,KAC/BD,EAAaE,iBAAiB,SAAUC,IACpC,MAAMC,EAASD,EAAMC,OACrB,GAAIA,EAAQ,CACR,IAAIrC,EAAQqC,EAAOrC,MACnBA,EAAQA,EAAMsC,QAAQ,WAAY,IAElCD,EAAOrC,MAAQA,EAAmB,MAAXkC,EAAiB,GAAGA,IAASK,SAASvC,GAAOwC,eAAe,WAAa,GAAGxC,IAAQkC,IAAW,EAC1H,IACF,EAGNF,EAAYJ,EAAqB,KACjCI,EAAYH,EAAW,KAEvBD,EAAoBO,iBAAiB,QAASM,GAC9CZ,EAAUM,iBAAiB,QAASM,GACpCX,EAAmBK,iBAAiB,SAAUM,GAC9CV,EAAoBI,iBAAiB,SAAUM,EACnD,EAxFA,EAAQ,KACR,MAAMC,EAAe,EAAQ,KAC7B,SAASD,IACL,MAAMb,EAAsBN,SAASC,eAAe,yBAC9CM,EAAYP,SAASC,eAAe,cACpCO,EAAqBR,SAASC,eAAe,sBAC7CQ,EAAsBT,SAASC,eAAe,wBAC9CoB,EAA0BrB,SAASC,eAAe,qBAClDqB,EAAiBC,WAAWjB,EAAoB5B,MAAMsC,QAAQ,MAAO,IAAIA,QAAQ,MAAO,KACxFQ,EAAOD,WAAWhB,EAAU7B,MAAMsC,QAAQ,KAAM,KAChDS,EAAeR,SAAST,EAAmB9B,OAC3CgD,EAAgBT,SAASR,EAAoB/B,OACnD,GAAIiD,MAAML,IAAmBK,MAAMH,IAASG,MAAMF,IAAiBE,MAAMD,GACrE,OAEJ,MAAME,GAAU,EAAIR,EAAazC,mBAAmB2C,EAAgBE,EAAMC,EAAcC,GACxFL,EAAwBQ,YAAc,IAAIN,WAAWK,EAAQE,QAAQ,IAAIZ,eAAe,UAC5F,C","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, years, paymentFrequency) {\n const months = years * paymentFrequency;\n const monthlyInterestRate = interestRate / paymentFrequency / 100;\n return ((principal * monthlyInterestRate) /\n (1 - Math.pow(1 + monthlyInterestRate, -months)));\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 = parseInt(paymentPeriodSelect.value);\n if (isNaN(mortgageAmount) || isNaN(rate) || isNaN(amortization) || isNaN(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=\"12\">Monthly</option>\n <option value=\"6\">Bi-Annually</option>\n <option value=\"1\">Annually</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","years","paymentFrequency","months","monthlyInterestRate","Math","pow","__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","payment","textContent","toFixed"],"sourceRoot":""}
|
|
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 applyLink = document.querySelector('.mortgage-apply-link');\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 mortagagePaymentElement.textContent = \"\";\n if (!applyLink.classList.contains(\"disabled\")) {\n applyLink.classList.add(\"disabled\");\n }\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 if (applyLink.classList.contains(\"disabled\")) {\n applyLink.classList.remove(\"disabled\");\n }\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 <a class=\"mortgage-apply-link disabled\" href=\"${options.applyUrl ? options.applyUrl : ''}\" target=\"_blank\">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 rateInput.addEventListener(\"focus\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add(\"child-input-focused\");\n });\n rateInput.addEventListener(\"blur\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"child-input-focused\");\n });\n amortizationSelect.addEventListener(\"focus\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add(\"child-input-focused\");\n });\n amortizationSelect.addEventListener(\"blur\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"child-input-focused\");\n });\n paymentPeriodSelect.addEventListener(\"focus\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add(\"child-input-focused\");\n });\n paymentPeriodSelect.addEventListener(\"blur\", (event) => {\n var _a;\n const target = event.target;\n (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove(\"child-input-focused\");\n });\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","applyUrl","mortgageAmountInput","rateInput","amortizationSelect","paymentPeriodSelect","formatInput","inputElement","symbol","addEventListener","event","target","replace","parseInt","toLocaleString","handleCalculation","_a","parentElement","classList","add","remove","calculator_1","mortagagePaymentElement","applyLink","querySelector","mortgageAmount","parseFloat","rate","amortization","paymentPeriod","isNaN","textContent","contains","toFixed"],"sourceRoot":""}
|
package/dist/styles.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
@
|
|
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{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{max-width:unset;width:-webkit-fill-available}}.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.child-input-focused{outline:2px solid #005fcc;outline-offset:-1px}.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;height:56px;color:#fff}.mortgage-calculator .calculator-fields .apply-wrapper .mortgage-apply-link{font-family:"Poppins",serif;font-size:20px;font-weight:600;line-height:27px;color:#1a1a30;text-transform:uppercase;background:#fff;width:200px;border-radius:2rem;padding:.5rem;border:none;cursor:pointer;text-align:center;text-decoration:none}.mortgage-calculator .calculator-fields .apply-wrapper .mortgage-apply-link.disabled{pointer-events:none;cursor:none}
|
|
2
3
|
|
|
3
4
|
/*# sourceMappingURL=styles.css.map*/
|
package/dist/styles.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css","mappings":"
|
|
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,+EACI,4BACA,eACA,gBACA,iBACA,gBACA,kBACA,sBACA,aA9FZ,yBAsFQ,+EAWQ,gBACA,8BAKZ,sEACI,aACA,sBACA,kBACA,mBAEA,4EACI,eACA,gBACA,iBACA,qBA1HkB,CA4HlB,iBAGJ,yJAEI,4BACA,eACA,gBACA,iBACA,gBAEA,UACA,YACA,aACA,gBAjIZ,yBAsHQ,yJAcQ,gBACA,8BAGJ,qKACI,YACA,aACA,gBAIR,0FACI,0BACA,oBAIR,sDACI,aACA,sCACA,mBAGJ,uDACI,aACA,uCACA,qBACA,mBACA,eACA,mBACA,mBAEA,kBACA,aACA,WACA,aAvKR,yBA2JI,uDAeQ,eACA,2BACA,aACA,aAIJ,0EACI,eACA,gBACA,iBACA,YACA,UA/LkB,CAkMtB,4EACI,4BACA,eACA,gBACA,iBACA,cACA,yBACA,eAzMkB,CA0MlB,YACA,mBACA,cACA,YACA,eACA,kBACA,qBAEA,qFACI,oBACA,Y","sources":["webpack://MortgageCalculator/./src/styles.scss"],"names":[],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mortgage-calculator-package",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
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
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
Binary file
|
|
Binary file
|