mortgage-calculator-package 1.0.0

package/README.md

@@ -0,0 +1 @@
+# mortgage-calculator-package

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "mortgage-calculator-package",
+  "version": "1.0.0",
+  "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.",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "webpack serve --open",
+    "sass": "sass src/styles.scss dist/styles.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Admin-Kreate/mortgage-calculator-package.git"
+  },
+  "keywords": [
+    "mortgage",
+    "calculator",
+    "mortgage-calculator",
+    "finance",
+    "loan",
+    "interest-rate",
+    "amortization",
+    "payments",
+    "mortgage-tool",
+    "real-estate",
+    "home-loan",
+    "npm-package",
+    "embeddable-widget",
+    "web-calculator"
+  ],
+  "author": "Muhammad Rehan Abbasi <rehanabbasi120@gmail.com>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Admin-Kreate/mortgage-calculator-package/issues"
+  },
+  "homepage": "https://github.com/Admin-Kreate/mortgage-calculator-package#readme",
+  "devDependencies": {
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.7",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.2",
+    "jest": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "sass": "^1.80.3",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.3",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
+  }
+}

package/src/calculator.ts

@@ -0,0 +1,13 @@
+export function calculateMortgage(
+    principal: number,
+    interestRate: number,
+    years: number,
+    paymentFrequency: number
+): number {
+    const months = years * paymentFrequency;
+    const monthlyInterestRate = interestRate / paymentFrequency / 100;
+    return (
+        (principal * monthlyInterestRate) /
+        (1 - Math.pow(1 + monthlyInterestRate, -months))
+    );
+}

package/src/index.ts

@@ -0,0 +1,101 @@
+import './styles.scss';
+import { calculateMortgage } from './calculator';
+
+function handleCalculation() {
+  const mortgageAmountInput = document.getElementById('mortgage-amount-field') as HTMLInputElement;
+  const rateInput = document.getElementById('rate-field') as HTMLInputElement;
+  const amortizationSelect = document.getElementById('amortization-field') as HTMLSelectElement;
+  const paymentPeriodSelect = document.getElementById('payment-period-field') as HTMLSelectElement;
+  const mortagagePaymentElement = document.getElementById('mortagage-payment') as HTMLParagraphElement;
+
+  const mortgageAmount = parseFloat(mortgageAmountInput.value.replace(/\$/g, '').replace(/\,/g, ''));
+  const rate = parseFloat(rateInput.value.replace(/%/g, ''));
+  const amortization = parseInt(amortizationSelect.value);
+  const paymentPeriod = parseInt(paymentPeriodSelect.value);
+
+  if (isNaN(mortgageAmount) || isNaN(rate) || isNaN(amortization) || isNaN(paymentPeriod)) {
+    return;
+  }
+
+  const payment = calculateMortgage(mortgageAmount, rate, amortization, paymentPeriod);
+  mortagagePaymentElement.textContent = `$${parseFloat(payment.toFixed(2)).toLocaleString('en-US')}`;
+}
+
+export function init(options: { containerId: string }) {
+  const container = document.getElementById(options.containerId);
+
+  if (!container) {
+    console.error('Mortgage Calculator container not found');
+    return;
+  }
+
+  container.innerHTML = `
+    <div class="mortgage-calculator">
+        <div class="section-heading"><span>Mortgage</span> Payment <span>Calculator</span></div>
+        <div class="calculator-fields">
+          <div class="mortgage-amount-wrapper">
+            <div class="calculator-floating-label-field">
+              <label>Mortgage Amount</label>
+              <input type="text" id="mortgage-amount-field" />
+            </div>
+          </div>
+          <div class="rate-amortization-period-wrapper">
+            <div class="calculator-fixed-label-field">
+              <label>Rates</label>
+              <input type="text" id="rate-field" />
+            </div>
+            <div class="calculator-fixed-label-field">
+              <label>Amortization</label>
+              <select id="amortization-field">
+                <option value="10">10 years</option>
+                <option value="15">15 years</option>
+                <option value="20">20 years</option>
+                <option value="25">25 years</option>
+              </select>
+            </div>
+            <div class="calculator-fixed-label-field">
+              <label>Payment Period</label>
+              <select id="payment-period-field">
+                <option value="12">Monthly</option>
+                <option value="6">Bi-Annually</option>
+                <option value="1">Annually</option>
+              </select>
+            </div>
+          </div>
+          <div class="apply-wrapper">
+            <div id="mortagage-payment"></div>
+            <button>Apply</button>
+          </div>
+        </div>
+    </div>
+  `;
+
+  const mortgageAmountInput = document.getElementById('mortgage-amount-field') as HTMLInputElement;
+  const rateInput = document.getElementById('rate-field') as HTMLInputElement;
+  const amortizationSelect = document.getElementById('amortization-field') as HTMLSelectElement;
+  const paymentPeriodSelect = document.getElementById('payment-period-field') as HTMLSelectElement;
+
+  // Reusable function for handling dollar sign and percentage symbol formatting
+  const formatInput = (inputElement: HTMLInputElement, symbol: string) => {
+    inputElement.addEventListener('input', (event) => {
+      const target = event.target as HTMLInputElement;
+      if (target) {
+        let value = target.value;
+        value = value.replace(/[^0-9.]/g, ''); // Remove non-numeric characters
+
+        // Reapply the symbol (either $ or %)
+        target.value = value ? symbol === '$' ? `${symbol}${parseInt(value).toLocaleString('en-US')}` : `${value}${symbol}` : '';
+      }
+    });
+  };
+
+  // Add formatting for currency and percentage inputs
+  formatInput(mortgageAmountInput, '$');
+  formatInput(rateInput, '%');
+
+  // Attach event listeners to each input/select field to auto-calculate on change
+  mortgageAmountInput.addEventListener('input', handleCalculation);
+  rateInput.addEventListener('input', handleCalculation);
+  amortizationSelect.addEventListener('change', handleCalculation);
+  paymentPeriodSelect.addEventListener('change', handleCalculation);
+}

package/src/styles.scss

@@ -0,0 +1,232 @@
+$mortgage-calculator-bg-color: #f7f7f7;
+$mortgage-calculator-border-color: #ccc;
+$mortgage-calculator-color-white: #ffffff;
+$mortgage-calculator-border-radius: 8px;
+$mortgage-calculator-button-bg-color: #007BFF;
+
+@font-face {
+    font-family: 'Mont Extra Light';
+    src: url('./fonts/Mont-ExtraLight.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Mont Heavy';
+    src: url('./fonts/Mont-Heavy.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+$desktop-breakpoint: 992px;
+
+@mixin respond-to-mobile {
+    @media (max-width: ($desktop-breakpoint - 1)) {
+        @content;
+    }
+}
+
+@mixin respond-to-desktop {
+    @media (min-width: $desktop-breakpoint) {
+        @content;
+    }
+}
+
+.mortgage-calculator {
+    max-width: fit-content;
+    margin: auto;
+
+    .section-heading {
+        font-family: 'Mont Extra Light', sans-serif;
+        font-size: 56px;
+        font-weight: 600;
+        line-height: 74px;
+        text-align: center;
+        padding-bottom: 2rem;
+
+        span {
+            font-family: 'Mont Heavy', sans-serif;
+            font-weight: 800;
+        }
+
+        @include respond-to-mobile {
+            font-size: 42px;
+            line-height: 50px;
+            padding-bottom: 0;
+        }
+    }
+
+    .calculator-fields {
+        position: relative;
+        background-color: $mortgage-calculator-color-white;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+        @include respond-to-mobile {
+            background: unset;
+            box-shadow: unset;
+        }
+
+        .mortgage-amount-wrapper {
+            display: grid;
+            grid-template-columns: auto;
+            justify-content: center;
+            align-items: center;
+            padding-top: 3rem;
+
+            @include respond-to-mobile {
+                grid-template-columns: 1fr;
+                padding: 3rem 1rem 0 1rem;
+            }
+        }
+
+        .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;
+
+            @include respond-to-mobile {
+                grid-template-columns: 1fr;
+                padding: 1rem;
+            }
+        }
+
+        .calculator-floating-label-field {
+            position: relative;
+
+            label {
+                font-family: 'Mont Extra Light', sans-serif;
+                font-size: 16px;
+                font-weight: 400;
+                line-height: 20px;
+                background-color: $mortgage-calculator-color-white;
+
+                position: absolute;
+                top: -0.75rem;
+                left: 1rem;
+                padding: 0.25rem 0.5rem;
+            }
+
+            input,
+            select {
+                font-family: 'Mont Heavy', sans-serif;
+                font-size: 22px;
+                font-weight: 800;
+                line-height: 30px;
+                max-width: 250px;
+                border-radius: 4px;
+                border: 1px solid $mortgage-calculator-border-color;
+                padding: 1rem;
+
+                @include respond-to-mobile {
+                    max-width: unset;
+                    width: -webkit-fill-available;
+                }
+            }
+
+            select {
+                padding: 1.3rem;
+            }
+        }
+
+        .calculator-fixed-label-field {
+            display: grid;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            padding: 0.5rem 1rem;
+
+            label {
+                font-family: 'Mont Extra Light', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 14px;
+                background-color: $mortgage-calculator-color-white;
+
+                padding: 0.25rem 0;
+            }
+
+            input,
+            select {
+                font-family: 'Mont Heavy', sans-serif;
+                font-size: 22px;
+                font-weight: 800;
+                line-height: 22px;
+                max-width: 250px;
+
+                padding: 0;
+                border: none;
+                outline: none;
+                box-shadow: none;
+
+                @include respond-to-mobile {
+                    max-width: unset;
+                    width: -webkit-fill-available;
+                }
+
+                &:focus {
+                    border: none;
+                    outline: none;
+                    box-shadow: none;
+                }
+            }
+
+            select {
+                padding: 0.2rem 0;
+            }
+        }
+
+        .masked-input {
+            display: grid;
+            grid-template-columns: repeat(2, auto);
+            align-items: center;
+        }
+
+        .apply-wrapper {
+            display: grid;
+            grid-template-columns: repeat(2, 250px);
+            justify-items: center;
+            align-items: center;
+            grid-gap: 0.5rem;
+            background: #1A1A30;
+            border-radius: 30px;
+
+            position: absolute;
+            bottom: -4rem;
+            left: 10rem;
+            padding: 2rem;
+
+            @include respond-to-mobile {
+                position: unset;
+                grid-template-columns: auto;
+                padding: 1rem;
+                margin: 1rem;
+            }
+
+
+            #mortagage-payment {
+                font-family: 'Mont Extra Light', sans-serif;
+                font-size: 42px;
+                font-weight: 700;
+                line-height: 56px;
+                color: $mortgage-calculator-color-white;
+            }
+
+            button {
+                font-family: 'Mont Extra Light', sans-serif;
+                font-size: 20px;
+                font-weight: 800;
+                line-height: 27px;
+                color: #1A1A30;
+                text-transform: uppercase;
+                background: $mortgage-calculator-color-white;
+                width: 200px;
+                border-radius: 2rem;
+                padding: 0.5rem;
+                border: none;
+                cursor: pointer;
+            }
+        }
+    }
+}

package/src/test-webpage.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mortgage Calculator Test</title>
+</head>
+
+<body>
+    <div id="mortgage-calculator-container"></div>
+
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            MortgageCalculator.init({
+                containerId: 'mortgage-calculator-container',
+            });
+        });
+    </script>
+</body>
+
+</html>

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "target": "es6",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,45 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  entry: "./src/index.ts",
+  output: {
+    filename: "index.js",
+    path: path.resolve(__dirname, "dist"),
+    library: "MortgageCalculator",
+    libraryTarget: "umd",
+    umdNamedDefine: true,
+    clean: true,
+  },
+  resolve: {
+    extensions: [".ts", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.scss$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "styles.css",
+    }),
+    new HtmlWebpackPlugin({
+      template: "./src/test-webpage.html", // Path to your HTML template
+    }),
+  ],
+  mode: "development",
+  devtool: "source-map",
+  devServer: {
+    port: 8080,
+    hot: true,
+  },
+};