Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/airgead-investment-calculator/llms.txt

Use this file to discover all available pages before exploring further.

Airgead is designed to be customized directly in its source files. There is no configuration file or environment variable system — changes go straight into the CSS, JavaScript, or HTML. Because the project is a fully static site with no build step, every edit is immediately visible when you reload the page in a local server or redeploy to GitHub Pages.

​
Change Brand Colors

All design tokens are CSS custom properties declared at the top of css/styles.css inside a :root block. Changing any value there updates every element that references that token across the entire site. 
:root {
  --green-950: #082d1d;
  --green-900: #0b3f29;
  --green-800: #0f5132;
  --green-700: #166b42;
  --green-100: #dfeee5;
  --gold: #c8a24a;
  --gold-200: #ead9a6;
  --canvas: #f5f3f0;
  --parchment: #fbf7ed;
  --paper: #fffefb;
  --ink: #16251e;
  --muted: #6d756f;
  --line: #e7dfd0;
  --shadow: 0 24px 70px rgba(8,45,29,.13);
  --radius: 28px;
}
Here is what each token controls:
TokenControls
--green-800Primary brand color — buttons, active nav links, chart lines, and positive values in tables
--gold / --gold-200Accent color — focus rings on inputs, callout left-borders, and summary card row values
--canvasPage background behind all cards and sections
--parchment / --paperCard and control backgrounds (navbar, control deck, article bodies, metric tiles)
--ink / --mutedPrimary and secondary text colors used throughout body copy and labels
--radiusBorder-radius applied to every .card element across the site
Replace any hex value to rebrand the application. For example, swapping --green-800 to a deep navy updates every primary button, active navigation link, and chart line simultaneously. The navigation is generated from a single links array at the top of js/components/shell.js. The same array builds both the desktop nav bar and the mobile slide-down menu, so one edit keeps both in sync. 
const links = [
  ['Home', 'index.html'],
  ['Calculator', 'pages/calculator.html'],
  ['Compare', 'pages/compare.html'],
  ['Saved Plans', 'pages/saved-plans.html'],
  ['How It Works', 'pages/how-it-works.html'],
  ['Articles', 'pages/articles.html'],
  ['Case Study', 'pages/case-study.html']
];
Each entry is a two-element array of [label, href]. The href value is relative to the repository root. To add a new page, append an entry to the array: 
['Project Notes', 'pages/blog.html']
To remove a link, delete its entry. To reorder the menu, move entries up or down in the array. The shell component automatically marks the current page’s link as active by comparing each href to the current location.pathname.

​
Change Calculator Defaults

The value attributes on the form inputs in pages/calculator.html and pages/compare.html control what numbers appear when the page first loads. The four inputs and their defaults are: 
<!-- pages/calculator.html -->
<input class="money" id="startingBalance" type="number" min="0" step="100" value="5000">
<input class="money" id="monthlyDeposit" type="number" min="0" step="25"  value="250">
<input class="percent" id="annualRate"   type="number" min="0" step=".1"  value="5">
<input class="short"  id="years"         type="number" min="1" max="80" step="1" value="20">
InputDefaultMaps to
startingBalance5000Initial investment amount in dollars
monthlyDeposit250Recurring monthly contribution in dollars
annualRate5Estimated annual interest rate as a percentage
years20Investment period in whole years (maximum 80)
The Compare page (pages/compare.html) has two identical sets of these four fields — one for Scenario A and one for Scenario B. Scenario B’s monthlyDeposit defaults to 500 to demonstrate the difference between contribution amounts. Update the value attribute on any input to change its starting number.

​
Change Calculation Rules

Editing js/lib/calculator.js changes the core math that drives every calculated result in the application. After any modification, test the output on the Calculator page, the Results page, and the Compare page to confirm all three surfaces produce consistent and expected values.
The calculation is exported from js/lib/calculator.js as a single function: 
calculateCompoundInterest(inputs)
The function accepts an object with startingBalance, monthlyDeposit, annualRate, and years properties, clamps all values to valid ranges, and returns an array of year rows. Each row contains: 
{ year, withDeposits, withoutDeposits, totalDeposits, interestEarned }
The Results page, the Compare page, and the CSV export all consume this same return value, so a change to the function signature or the row shape requires corresponding updates in js/pages/results.js and js/pages/compare.js.

​
Add an Article

Airgead includes a central article index at pages/articles.html and two full-length article pages. Adding a new article follows the same structure as the existing ones.
1

Copy an existing article file

Duplicate one of the existing article pages in pages/ — for example, copy pages/article-monthly-deposits.html and rename it to describe your new topic, such as pages/article-interest-rates.html.
2

Replace the page content

Open the new file and update the <title> element, the <meta name="description"> tag, the main <h1> heading, the <div class="article-meta"> block (date and read-time), and the body content inside <div class="article-body">.
3

Add a card to the article index

Open pages/articles.html and add a new <article class="card article-card"> entry to the article grid. Model it after the existing cards, setting the heading, description paragraph, and the href to your new file (e.g. article-interest-rates.html).
4

Confirm asset paths

Verify that the new article page references the shared stylesheet with ../css/styles.css and loads the shell component with ../js/components/shell.js. Both paths use ../ because article files live inside pages/, one level below the repo root.
5

Test the link

Open pages/articles.html in a local server and click the new article card link. Confirm that the article page loads, the header and footer render correctly, and the back-to-articles navigation resolves.

Build docs developers (and LLMs) love

Get started for freeTalk to us