Mortgage calculator web app

475 developers have joined this project.

What you will practice

You'll practice how to use DOM manipulation. Additionally, you'll learn how to update the UI using JavaScript and apply your skills to real-world products (i.e. online banking services).

Introduction

Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!

Requirements

Set up a React App(Vanilla JS or your favorite framework works too)
Users can set purchase prices
Users can set down payment
Users can set repayment time
Users can set interest rate
Show users loan amount (purchase price - down payment)
Show users the estimated amount they'll pay on a monthly basis

Here is an example of the UI for this project but you're welcome to make any changes you'd like! 🙂
Mortgage_Calculator_(web).png

Suggested Implementation

This project can be implemented using any of the following technologies:

Vanilla JS
React JS (or your favorite framework works too)
For cross-platform, Progressive Web App in React is recommended

References

Create React App
DOM Manipulation
Input Event listener
Input Slider Docs
Formula for mortgage payments: M = P[r(1+r)^n/((1+r)^n)-1)]
- M = the total monthly mortgage payment
- P = the principal loan amount(Purchase Price - Down Payment)
- r = your monthly interest rate
- n = number of payments over the loan’s lifetime.

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

Angular React JavaScript Vue.js

Difficulty

medium

Contributed by

Rishi Purwar

Full-stack Web Developer

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

medium

Vocabulary memorization website

Nowadays, everyone is learning languages to advance careers or broaden horizons. Although there are many online resources to learn from, lack of vocabulary is often a pain point for many learners. We'll create an application for foreign language learners to manage their vocabulary. You can start with a simple form for inserting words - one for your native language and another for the foreign language.

JavaScriptReactAngularVue.js

medium

Joke telling bot web app

Whether it's smartphones, cars, or speakers, voice assistants are becoming more and more integral to our everyday lives. Not only so, voice assistants are gaining traction in companies to help streamline operations like Customer Service. In this project, you'll build a full-fledged Joke telling robot web app using Web Speech APIs, which can be applied to both web apps and mobile apps.

JavaScriptReactAngularVue.js

easy