Savings Calculator

Overview

Savings Calculator is a lightweight, single-page web app that projects how your savings grow over time — adjusted for inflation. Enter your initial balance, monthly contribution, expected return, and inflation rate, and instantly see the real purchasing power of your future nest egg. No server, no framework, no dependencies — just plain HTML, CSS, and JavaScript deployed to GitHub Pages.

Live Demo

Try it out at jadujoel.github.io/savings-calculator.

Features

• Real-Return Math — Converts nominal interest and inflation into a real rate using the Fisher equation, so the result reflects actual purchasing power rather than inflated numbers
• Instant Feedback — Every input fires oninput, recalculating on each keystroke with no submit button needed
• Inflation Adjustment — A dedicated inflation field lets you model different economic scenarios side-by-side
• Zero Dependencies — The entire app is a single index.html (< 200 lines) with inline CSS and JS — nothing to install, bundle, or break
• Dark UI — Clean dark-themed interface with a CSS Grid layout that stays centered on any viewport
• CI/CD via GitHub Actions — Pushes to main automatically deploy the public/ folder to GitHub Pages

How It Works

The core calculation converts the nominal interest rate and inflation into a single real rate of return, then compounds monthly contributions over the chosen number of years:

function realFromPercent(nominal, inflation) {
    return (1 + nominal / 100) / (1 + inflation / 100) - 1;
}

const real = realFromPercent(interest, inflation);
const multiplier = 1 + real;
let total = initial;

for (let i = 0; i < nyears; i++) {
    for (let j = 0; j < 12; j++) {
        total += monthly;
    }
    total *= multiplier;
}

Monthly savings are added throughout the year, then the annual real-return multiplier is applied — giving a conservative approximation of compound growth in today’s dollars.

Tech Stack

Language	HTML / CSS / JavaScript
Layout	CSS Grid
Hosting	GitHub Pages
CI/CD	GitHub Actions (actions/deploy-pages@v4)
Dependencies	None

Source Code

The source code is available on the project’s GitHub repository.