Mortgage Calculator Plugin

The Mortgage Calculator Plugin provides a convenient way to integrate a mortgage calculator into your web application. This README will walk you through the process of using this plugin to add a mortgage calculator component to your website.

Introduction
Installation
Usage
Options
Example
License

Introduction

The Mortgage Calculator Plugin offers a quick and straightforward solution for embedding a mortgage calculator in your web application. It enables users to perform mortgage-related calculations effortlessly.

Installation

To use the Mortgage Calculator Plugin in your project, follow these steps:

Download the plugin files (mortgage-calculator.js) and include them in your project directory.
Link the plugin JavaScript file in your HTML file:

<script src="path/to/mortgage-plugin.js"></script>

Link the plugin CSS file in your HTML File:

<link rel="stylesheet" href="mortgage-plugin.css">

Usage

To integrate and use the Mortgage Calculator Plugin in your application, follow these steps:

Include the plugin script in your HTML file, as described in the Installation section.
Identify the HTML element where you want to render the mortgage calculator. Give it an id or a class for easy selection.
Create a script tag after including the plugin script, and call the MortgagePlugin.initializeComponent function with the appropriate arguments. The available options are explained in the Options section below.

Options

The following options can be passed when calling the MortgagePlugin.initializeComponent function:

containerSelector: The selector for the HTML element where the mortgage calculator will be rendered.
options: An object containing various configuration options for the calculator. These options are detailed below.
- homeValue: The total value of the home.
- downPayment: The amount of the down payment.
- downPaymentPercent: The down payment as a percentage of the home value.
- loanAmount: The total loan amount.
- interestRate: The annual interest rate.
- loanTerm: The loan term in years.
- propertyTax: The annual property tax.
- PMI: The Private Mortgage Insurance cost.
- homeInsurance: The annual home insurance cost.
- monthlyHOA: The monthly Homeowners Association fee.
- startDateMonth: The month of the mortgage start date.
- startDateYear: The year of the mortgage start date.

Example

Here's an example of how to integrate and use the Mortgage Calculator Plugin:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mortgage Calculator Plugin Example</title>
    <link rel="stylesheet" href="mortgage-plugin.css">
    <script src="path/to/mortgage-plugin.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        //Your might want to wait for the DOM to be ready 
        window.addEventListener('DOMContentLoaded', () => {
            MortgagePlugin.initializeComponent("#app", {
                homeValue: 300000,
                downPaymentPercent: 20,
                interestRate: 4.5,
                loanTerm: 30,
                propertyTax: 3000,
                homeInsurance: 1000,
                monthlyHOA: 50,
                startDateMonth: 1,
                startDateYear: 2023,
            });
        });
    </script>
</body>
</html>

Customize the options based on your requirements.

License

This project is licensed under the MIT License.

If you have any questions or need further assistance, feel free to reach out. Happy mortgage calculating!

amandaalouise / mortgage-calculator-plugin Goto Github PK