While working on a side project recently, I needed a way to help users quickly understand how their savings could grow over time. Nothing fancy — just input a principal, an interest rate, and a timeframe, and see the future value. But here's the thing: I didn't want to spin up a server, manage a database, or deal with API rate limits. I wanted something that would work instantly, even on a slow connection, and that wouldn't cost me a cent in hosting.
So I built a compound interest calculator that runs entirely in the browser. No backend. No dependencies. Just pure JavaScript and a bit of math.
The "Why Not Just Use an Existing Tool?"
Good question. There are plenty of compound interest calculators out there. But most of them are either:
- Buried in a finance website with a million other widgets
- Require JavaScript from external CDNs that might fail
- Don't let you customize the compounding frequency
- Or my personal favorite: they call an API to do the math. Seriously. A compound interest calculation is about 10 lines of code, and some sites will make a network request to compute it.
I wanted something self-contained. A single HTML file that could be hosted anywhere, even on a static file server, and just work. Plus, I'm an indie developer — I enjoy reinventing wheels when the wheel design is fun.
The Math (It's Not That Scary)
The core formula for compound interest with regular contributions isn't as intimidating as it looks:
FV = P(1 + i)^N + PMT × ((1 + i)^N − 1) / i
Where:
- P is the initial principal
- i is the periodic interest rate (annual rate divided by compounding periods per year)
- N is the total number of periods (years × periods per year)
- PMT is the periodic contribution amount
The tricky part? When i is zero. If you have a 0% interest rate, the formula ((1+i)^N − 1) / i becomes 0/0, which is undefined. Classic division by zero situation.
function compute(p, rPct, years, n, monthlyAdd, sym) {
const i = rPct / 100 / n;
const N = n * years;
const PMT = monthlyAdd * 12 / n;
const principalFV = p * Math.pow(1 + i, N);
const contribFV = i > 0
? PMT * (Math.pow(1 + i, N) - 1) / i
: PMT * N; // fallback for 0% interest
const fv = principalFV + contribFV;
const invested = p + monthlyAdd * 12 * years;
const interest = fv - invested;
return { fv, invested, interest, series: generateSeries(...) };
}
That fallback for i = 0 was something I initially got wrong. The AI I was working with (more on that in a bit) wrote the formula without the edge case, and the first time I tested with 0% interest, I got NaN displayed. That's not a great user experience.
The Decision: Pure Frontend vs. API
Let me explain why I went with pure frontend:
- Cost: Zero server costs. Host it on any static host (GitHub Pages, Netlify, even a simple CDN).
- Privacy: Users' financial data never leaves their browser. No tracking, no analytics, no "we store your data for research purposes."
- Speed: Instant response. No network latency.
- Reliability: No server to crash, no API to rate-limit.
The trade-off? I can't update the calculation logic without redeploying. But honestly, the math for compound interest hasn't changed in centuries. I think it's safe.
Building the Chart Without a Library
The second challenge was the growth chart. Most people would reach for Chart.js or D3. But I wanted to keep this dependency-free. So I wrote a tiny SVG chart generator.
function drawChart(series, sym) {
const width = 600, height = 200;
const maxVal = Math.max(...series);
const points = series.map((v, i) => {
const x = (i / (series.length - 1)) * width;
const y = height - (v / maxVal) * height;
return `${x},${y}`;
}).join(' ');
return `<svg viewBox="0 0 ${width} ${height}">
<polyline points="${points}" fill="none" stroke="#3b82f6" stroke-width="2"/>
</svg>`;
}
That's the essence of it. A polyline with points scaled to fit the viewBox. It's not going to win any design awards, but it shows the growth curve clearly, and it's about 15 lines of code.
The challenge here was handling the edge case where all values are zero. If maxVal is 0, you get a division by zero in the scaling. I had to add a check: if the max is 0, just draw a flat line at the bottom.
The AI-Assisted Development Experience
Now, the part I promised I'd talk about: building this with AI assistance. I used ChatGPT for most of the initial implementation, and honestly, it was a mixed bag.
What I asked for:
"Write a compound interest calculator in vanilla JavaScript. It should take principal, annual rate, years, compounding frequency, and monthly contribution. Return the future value and a series of values for each year to plot on a chart."
What I got:
A pretty solid implementation of the formula, with the series generation, and a basic chart. The AI handled the core math correctly on the first try — which was impressive. But here's where it went wrong:
-
The 0% interest edge case — as I mentioned, it returned
NaNwithout the fallback. - The series generation — it initially generated points for every compounding period, not every year. For daily compounding over 30 years, that's 10,950 points in the SVG. The chart was... let's say "visually noisy."
- Input validation — it didn't handle negative numbers or non-numeric input gracefully.
How I iterated:
I went back with specific feedback:
"The 0% case returns NaN. Also, I only want yearly points in the series for the chart, not every compounding period."
The AI fixed both issues. But it introduced a new one: it started generating the series using a different formula than the main calculation, so the chart didn't match the final value. Classic inconsistency bug.
At that point, I stepped in and rewrote the series generation to use the same iterative formula as the main calculation. This is where I think the human still has an edge — understanding that two separate code paths computing the "same" thing will inevitably drift apart.
What AI Got Right vs. Where I Had to Step In
AI handled well:
- The core math formula
- The HTML/CSS structure for the form
- The SVG chart generation (once I specified the requirements clearly)
Where AI struggled:
- Edge cases (zero interest, zero principal, zero contribution)
- Consistency between different parts of the calculation
- Understanding the UX implications of its choices (like generating 10,000 data points)
My honest take: for a tool like this, AI-assisted development saved me maybe 60-70% of the time. It's excellent for getting a working skeleton quickly. But the last 30% — the edge cases, the polish, the consistency — that's where I had to bring my own experience.
Lessons Learned
Always test the edge cases. The AI didn't, and I nearly shipped a calculator that showed
NaNfor a very valid input (0% interest).Keep it dependency-free when you can. For a single-purpose tool, a full charting library is overkill. A polyline SVG does the job.
The "periodic contribution" assumption matters. I chose to model contributions at the end of each period (which is standard for most investment scenarios). But this is a subtle detail that affects results, and it's worth documenting for users.
AI is a great pair programmer, not a replacement. It wrote the first draft in minutes. But I had to review every line with a skeptical eye.
The Final Result
During this process, I built a small browser-based tool to make this workflow easier. It's a single HTML file that calculates compound interest with optional monthly contributions and displays a growth chart. You can try it out if you want to see the approach in action.
The whole thing is about 200 lines of HTML/CSS/JavaScript. No build step, no dependencies, no server. Just open the file and it works.
If you're building similar utility tools, I'd encourage you to think about whether you really need a backend. For calculation-heavy tools, the browser is surprisingly capable. And with AI to help you scaffold the initial implementation, you can go from idea to working tool in a single afternoon.
Just remember to test the edge cases. The AI probably didn't.
Top comments (0)