Build a savings calculator in JavaScript.
Your challenge is to build a basic, yet interactive, savings calculator using JavaScript. The purpose of a savings calculator is to help an individual see how money, invested over time, at an interest rate, added to monthly, grows exponentially. Simply Google "savings calculator" to find countless examples. For your challenge, ask the user for these inputs:
- Starting amount
- Monthly savings
- Years to save
- Interest rate
The outputs of the calculator should be the following:
- Total saved
- Interest earned
- Line graph showing annual savings with interest
- Line graph showing annual savings without interest (it's useful to see the difference)
Here is a proposed UI for the completed calculator:
Note, Banzai has already developed a host of calculators like the one above—use them as a guide.
Write your application in JavaScript. You're encouraged to build a "reactive" solution—without submit or calculate buttons (again, see Banzai's existing calculators)—that updates as the inputs are changed. Use React, Vue.js, or another framework of your choice to simplify DOM updates.
Emphasize correctness and completeness over aesthetics. Do not feel compelled to match Banzai's designs, nor UI controls—simply use them as examples for functionality. Write as much of the calculations and logic of the calculator in JavaScript, however, consider using a charting library for the graph. The sample image above has ideas for the UI, however, don't feel compelled to match them—do your best with the time you have.
NOTE ON COMPOUND INTEREST: The formula for calculating compound interest can be calculated monthly, annually, quarterly, and so on. Keep it simple and use monthly.
The code you produce may be used on a real website. You will, therefore, be paid $100.00 for a working solution, whether or not it's chosen.
Don't hesitate to ask. While you won't be given tips for solving the problem, feel free to ask questions about the expectations of the challenge.