How I made an EMI Calculator with Vue.js, Tailwind CSS and Numeral.js
EMI Calculator
I am going to keep it simple and build a basic EMI calculator that will take user input for the loan amount, interest rate, and loan term, and display a monthly payment, and totals for the repayment amount and interest. You can also find the code for this project here: https://github.com/Bluehatcoders/EMI-CALCULATOR See it live :- https://emicalculator.vercel.app/
Screenshots ๐ธ
Why? ๐ค
Nowadays everyone buys products on EMI and they have to pay that amount and it is a little difficult to know how much they have to pay, that’s Why I have created this EMI calculator So that anyone can easily check details about their EMI. The user needs to enter values of amount, interest, and years to repay. The calculator returns the cost for the monthly payment, the total payment value, and the total interest value of the loan.
Features ๐ฅ
- Simple, Clean, Fast, and Easy to use
- Shows total amount you pay to the bank and total interest amount
- Save your last EMI Calculations
- Display a monthly payment and totals for the repayment amount
- Fully responsive design
Technologies ⚡️
Challenges I ran into ๐
I faced many challenges during the development process.
- I had a lot of difficulty in designing. I saw the design of a lot of EMI calculators, observed them, and finally created my own design.
- I also had a lot of trouble taking user input. I have given a lot of buttons and scrollbars to take input into the EMI calculator to help users, but on the contrary, I started having problems with it.
- After all these, I thought to add another feature to save the last calculus of the users so that when the user comes again, they can see their last calculation but I had some trouble in adding this feature.
What’s next
I’m still working on it and trying to make it better. In the future, I will add some features to it like:-
- I will add Dark Mode
- I will make it PWA so that users can use it as a mobile application