Learn JavaScript by creating a financial application that will calculate the mortgage using JavaScript event listeners like click event and key up event.
In this javascript project you will learn how to create a web application bie using functional programing and javascript DOM event listeners.
Table of content
- Create the HTML5 Boilerplate
- Use Materialize CSS and Bootstrap in HTML
- Create the HTML main container class using Bootstrap
- Create a form using HTML
- Create Form lable and input tags in HTML
- Make a html input tag readonly
- Create the Form submission button using Bootstrap CSS
- Create the javascript logic for the mortgage calculator
- Get elements from the DOM using JavaScript
- Calculate the Loan Amount using JavaScript keyUp event listener
- Calculate Mortgage
- Convert percent to decimal
- Convert years to months using JavaScript
- Use JavaScript on Submit event listener
- Export results to the DOM
- Create form validation using Alerts with JavaScript
- Create custom alert using HTML CSS and JavaScript DOM Manipulation
- Create a HTML Element using JavaScript createElement
- Add HTML Element to the DOM using javascript insertBefore method
- Use JavaScript Click event to remove HTML element from the DOM
- Remove HTML element from the DOM using JavaScript setTimeout function
Useful links
Application styling
You will style the application using two CSS Frameworks simulatiniasly like Bootstrap and Materialize CSS. You will use different CSS classes from each of them to style the Form, input and lable tags and the buttons.
You can find all of the links for this CSS Frameworks following the links above.
Most of the application functionality happens in the HTML form. By assigning event listeners to the input tags and the submit buttons different functionalities will be triggered.
HTML Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
/>
<!-- Compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title>Mortgage Calculator</title>
</head>
<body class="silver">
<div class="container shadow rounded-3 p-3 white my-5">
<h1 class="display-1 text-center">Mortgage Calculator</h1>
<form id="mortgage">
<main class="row mx-5">
<div class="input-field">
<input type="number" class="autocomplete" id="homeValue" />
<label>Home Value</label>
</div>
<div class="input-field">
<input type="number" class="autocomplete" id="downPayment" />
<label>Down Payment</label>
</div>
<div class="input-field">
<input
type="number"
class="autocomplete"
id="loanAmount"
readonly
placeholder="Loan Amount"
/>
<label>Loan Amount</label>
</div>
<div class="input-field">
<input type="text" class="autocomplete" id="interestRate" />
<label>Interest Rate</label>
</div>
<div class="input-field">
<input type="number" class="autocomplete" id="loanDuration" />
<label>Loan Duration (years)</label>
</div>
</main>
<footer class="row-cols-1 align-items-center m-5">
<button class="btn btn-large" type="submit">Calculate</button>
<button class="btn btn-large rounded-pill orange mt-5" type="button">
<b style="text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)">
Mon. payment: <span id="monthlyPayment"></span>
</b>
</button>
</footer>
</form>
</div>
<script src="mortgage.js"></script>
</body>
</html>
JavaScript Source Code
// console.log("Mortgage");
// Inputs / DOM Elements
const homeValue = document.getElementById("homeValue");
const downPayment = document.getElementById("downPayment");
const loanAmount = document.getElementById("loanAmount");
const interestRate = document.getElementById("interestRate");
const loanDuration = document.getElementById("loanDuration");
const form = document.getElementById("mortgage");
// console.log(homeValue, downPayment, loanAmount, interestRate, form);
downPayment.addEventListener("keyup", () => {
loanAmount.value = homeValue.value - downPayment.value;
var loanAmountValue = loanAmount.value;
return loanAmountValue;
});
function calculateMortgage(loanAmount, interestRate, numberMonthlyPayments) {
interestRate = percentageToDecimal(interestRate);
function percentageToDecimal(percent) {
return percent / 12 / 100;
}
numberMonthlyPayments = yearsToMonths(numberMonthlyPayments);
function yearsToMonths(year) {
return year * 12;
}
let mortgage =
(interestRate * loanAmount) /
(1 - Math.pow(1 + interestRate, -numberMonthlyPayments));
console.log(mortgage);
return parseFloat(mortgage.toFixed(2));
}
form.onsubmit = (e) => {
e.preventDefault();
validate();
let loanAmount = homeValue.value - downPayment.value;
let monthlyPayment = calculateMortgage(
loanAmount,
interestRate.value,
loanDuration.value
);
document.getElementById("monthlyPayment").innerHTML = `$ ${monthlyPayment}`;
};
function validate() {
if (
homeValue.value === "" ||
downPayment.value === "" ||
interestRate.value === "" ||
loanDuration.value === ""
) {
// alert("complete all fileds");
let alert = document.createElement("div");
alert.className = "btn red btn-large";
alert.innerHTML = `<span>Complete all fields</span>`;
alert.style.margin = ".5rem 35%";
form.parentNode.insertBefore(alert, form);
alert.onclick = () => alert.remove();
setTimeout(() => alert.remove(), "3000");
}
}
Video Tutorial
Watch the full video tutorial to get more inside and a deeper understanding of this project