Annuity Mortgage Calculator with Source Code

JavaScript, jQuery, and React Versions available

Whether you’re a seasoned homeowner or an aspiring one, understanding mortgage payments is crucial in making informed decisions about home financing. However, computing mortgage payments involves intricate financial computations that may not be easily grasped by everyone. This is where a mortgage calculator can come in handy. It can simplify complex calculations, turning them into easily understandable results. This article presents a piece of code that accomplishes exactly that.

Try out!

Free code snippet, jQuery & JavaScript Mortgage Calculator for websites, and modification with source code with basic styling. Code provided below.

Mortgage Calculator

Open Source

You are welcome to copy and modify our code. I released the code under the OpenBSD Licensee, meaning you are free to use it, copy it, or modify it. Modify it at your own risk.

How to Install?

Gutenberg is a new block-based editing environment in WordPress. It’s designed to provide more flexibility in how you create your content:

  1. Open your WordPress site and navigate to the page or post where you want to add the mortgage calculator.
  2. Click “Edit” to open the Gutenberg editor.
  3. Click the “+” button at the top left of the page to add a new block, then search for “Custom HTML” block.
  4. Select the “Custom HTML” block and paste the entire mortgage calculator code into the HTML area.
  5. Click “Update” or “Publish” to save your changes.

Elementor is a visual page builder for WordPress, enabling you to create high-end, pixel perfect websites at record speeds, with no coding required. Here’s how to add the calculator using Elementor:

  1. Open your WordPress site and navigate to the page where you want to add the mortgage calculator.
  2. Click “Edit with Elementor” button to open Elementor.
  3. In the Elementor builder, search for the “HTML” widget in the widget panel on the left side.
  4. Drag and drop the “HTML” widget to the section of the page where you want the mortgage calculator to appear.
  5. Paste the entire calculator code into the HTML Code area of the HTML widget.
  6. Click the “Update” button on the lower left corner to save your changes.

If you’re comfortable editing HTML directly, you can insert the mortgage calculator code into a WordPress page or post like this:

  1. Open your WordPress site and navigate to the page or post where you want to add the mortgage calculator.
  2. Click “Edit” to open the page or post in the editor.
  3. If you’re using the Gutenberg editor, add a “Custom HTML” block as described in the Gutenberg instructions above.
  4. If you’re using the Classic editor, click the “Text” tab on the upper right corner of the editor to switch to text mode.
  5. Paste the entire mortgage calculator code where you want the calculator to appear.
  6. Click “Update” or “Publish” to save your changes.

Remember to always keep a backup of your original page or post content before adding new code or making other significant changes, just in case you need to revert back.

Source Code

For most WordPress Websites, please consider using the jQuery code. If it doesn’t work, try the Vanilla JavaScript. React version provided for developers, without styling.

<style>
	.calculator {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background-color: white;
		padding: 20px;
	}

	.calculator h2 {
		text-align: center;
		color: #333;
	}

	.calculator .input-group {
		margin-bottom: 20px;
	}

	.calculator .input-group label {
		display: block;
		font-weight: bold;
		color: #666;
		margin-bottom: 10px;
	}

	.calculator .input-group input {
		width: 100%;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid #ddd;
	}

	.calculator button {
		width: 100%;
		padding: 10px;
		background-color: #007BFF;
		border: none;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}

	.calculator .output-group {
		margin-top: 20px;
	}

	.calculator .output-group p {
		font-size: 1.2em;
		color: #333;
	}
</style>
<div class="calculator">
	<h2>Mortgage Calculator</h2>
	<div class="input-group">
		<label for="principal">Principal</label>
		<input id="principal" type="number" min="1">
	</div>
	<div class="input-group">
		<label for="rate">Annual Interest Rate (%)</label>
		<input id="rate" type="number" min="1" max="100">
	</div>
	<div class="input-group">
		<label for="years">Term (Years)</label>
		<input id="years" type="number" min="1">
	</div>
	<button id="calculate">Calculate</button>
	<div class="output-group">
		<p id="output"></p>
	</div>
</div>
<script>
	jQuery('#calculate').on('click', function () {
		var principal = jQuery('#principal').val();
		var rate = jQuery('#rate').val();
		var years = jQuery('#years').val();

		if (principal > 0 && rate > 0 && years > 0) {
			rate = rate / 100 / 12;
			var months = years * 12;

			var x = Math.pow(1 + rate, months);
			var monthly = (principal * x * rate) / (x - 1);

			jQuery('#output').html('Monthly payment: $' + monthly.toFixed(2));
		} else {
			jQuery('#output').html('Please enter valid inputs.');
		}
	});
</script>
<style>
	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f0f0f0;
	}

	.calculator {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background-color: white;
		padding: 20px;
	}

	.calculator h2 {
		text-align: center;
		color: #333;
	}

	.calculator .input-group {
		margin-bottom: 20px;
	}

	.calculator .input-group label {
		display: block;
		font-weight: bold;
		color: #666;
		margin-bottom: 10px;
	}

	.calculator .input-group input {
		width: 100%;
		padding: 10px;
		border-radius: 5px;
		border: 1px solid #ddd;
	}

	.calculator button {
		width: 100%;
		padding: 10px;
		background-color: #007BFF;
		border: none;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}

	.calculator .output-group {
		margin-top: 20px;
	}

	.calculator .output-group p {
		font-size: 1.2em;
		color: #333;
	}
</style>
<div class="calculator">
	<h2>Mortgage Calculator</h2>
	<div class="input-group">
		<label for="principal">Principal</label>
		<input id="principal" type="number" min="1">
	</div>
	<div class="input-group">
		<label for="rate">Annual Interest Rate (%)</label>
		<input id="rate" type="number" min="1" max="100">
	</div>
	<div class="input-group">
		<label for="years">Term (Years)</label>
		<input id="years" type="number" min="1">
	</div>
	<button id="calculate">Calculate</button>
	<div class="output-group">
		<p id="output"></p>
	</div>
</div>

<script>
	document.getElementById('calculate').addEventListener('click', function () {
		var principal = document.getElementById('principal').value;
		var rate = document.getElementById('rate').value;
		var years = document.getElementById('years').value;

		if (principal > 0 && rate > 0 && years > 0) {
			rate = rate / 100 / 12;
			var months = years * 12;

			var x = Math.pow(1 + rate, months);
			var monthly = (principal * x * rate) / (x - 1);

			document.getElementById('output').innerHTML = 'Monthly payment: $' + monthly.toFixed(2);
		} else {
			document.getElementById('output').innerHTML = 'Please enter valid inputs.';
		}
	});
</script>
import React, {useState} from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';

const MortgageCalculator = () => {
	const [principal, setPrincipal] = useState('');
	const [rate, setRate] = useState('');
	const [years, setYears] = useState('');
	const [payment, setPayment] = useState('');
	const [copied, setCopied] = useState(false);

	const calculatePayment = () => {
		if (principal > 0 && rate > 0 && years > 0) {
			let r = rate / 100 / 12;
			let n = years * 12;
			let x = Math.pow(1 + r, n);
			let monthly = (principal * x * r) / (x - 1);
			setPayment(monthly.toFixed(2));
		} else {
			setPayment('Please enter valid inputs.');
		}
	}

	return (
		<div className="calculator">
			<h2>Mortgage Calculator</h2>
			<div className="input-group">
				<label>Principal</label>
				<input type="number" min="1" value={principal} onChange={(e) => setPrincipal(e.target.value)}/>
			</div>
			<div className="input-group">
				<label>Annual Interest Rate (%)</label>
				<input type="number" min="1" max="100" value={rate} onChange={(e) => setRate(e.target.value)}/>
			</div>
			<div className="input-group">
				<label>Term (Years)</label>
				<input type="number" min="1" value={years} onChange={(e) => setYears(e.target.value)}/>
			</div>
			<button onClick={calculatePayment}>Calculate</button>
			<div className="output-group">
				<p>{payment ? `Monthly payment: $${payment}` : ''}</p>
				{payment && (
					<CopyToClipboard text={`Monthly payment: $${payment}`} onCopy={()
						=> setCopied(true)}>
						<button>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
					</CopyToClipboard>
				)}
			</div>
		</div>
	)
};

export default MortgageCalculator;

Leave a Reply