📈 Smart SIP Calculator

Plan your investments based on your age and goals — free, instant, and beautifully designed.

A fully client-side, production-ready Systematic Investment Plan (SIP) Calculator website built with pure HTML, CSS, and JavaScript. No backend. No build step. No sign-up. Just open and invest smarter.

---

🌐 Live Demo

Deploy this yourself in under 60 seconds → Deployment Guide

---

✨ Features

👥 Age-Based Dual Flow

Feature	Under 18 🌱	18 & Above 💼
Simplified UI	✅	—
Advanced UI	—	✅
Step-up SIP	—	✅
Inflation Adjustment	—	✅
Compounding Frequency	—	✅
SIP vs Savings Comparison	—	✅
Friendly Explanations	✅	—
Age-specific Tips	✅	✅

📊 Visualizations

• Line Chart — Growth curve over time (invested vs maturity)
• Bar Chart — Year-wise breakdown (Under 18 mode)
• Donut Chart — Invested vs Returns portfolio split
• Chart type toggle — Switch between line and bar views

🧮 Calculator Features

• Real-time calculations on every input change
• Standard SIP formula: FV = P × [((1+r)^n − 1) / r] × (1+r)
• Step-up SIP — Annual SIP increase percentage
• Inflation adjustment — Real purchasing power calculation
• Compounding frequency — Monthly / Quarterly / Half-yearly / Yearly
• Wealth multiplier — How many times your money grew
• Monthly SIP to ₹1 Crore — Reverse calculation

🎯 Goal-Based SIP Planner

Pre-built financial goals with required monthly SIP calculation:

• 🏠 Own a Home — ₹50 Lakh target
• 🚗 Dream Car — ₹8 Lakh target
• 🎓 Education Fund — ₹25 Lakh target
• 🌴 Retirement Corpus — ₹1 Crore target

🎨 UI/UX

• 🌙 Dark mode toggle — Full light/dark theme
• 📱 Fully responsive — Mobile, tablet, and desktop
• ⚡ Smooth animations — Fade-up reveals, number flip transitions
• 💬 Tooltips — Plain-English explanation on every technical term
• 🎨 Clean card-based layout — Rounded corners, subtle shadows
• 🔤 Premium typography — Fraunces (display) + Plus Jakarta Sans (body)

---

🗂️ Project Structure

SIP_Calculator/
│
├── index.html          # ← Entire app (single file, self-contained)
└── README.md           # ← This file

Everything lives in index.html — styles, scripts, and markup are all bundled together. No dependencies to install, no build pipeline needed.

---

🧮 Formula Reference

Standard SIP Future Value

FV = P × [((1 + r)^n − 1) / r] × (1 + r)

Variable	Meaning
P	Monthly investment amount (₹)
r	Monthly interest rate = Annual rate ÷ 12 ÷ 100
n	Total number of months = Years × 12
FV	Future / Maturity value

Step-up SIP

SIP amount increases by a fixed % at the start of each year:

For each year y (1 to Y):
  P_y = P × (1 + stepup/100)^(y-1)
  Maturity compounds monthly within each year

Reverse Goal Calculation (Monthly SIP needed)

P = Target × r / [((1 + r)^n − 1) × (1 + r)]

Inflation-Adjusted Real Value

Real Value = FV / (1 + inflation_rate/100)^years

---

🚀 Deployment

Option 1 — Netlify Drop (Fastest, ~30 seconds)

1. Go to netlify.com/drop
2. Drag and drop index.html onto the page
3. Your site is live instantly with a free *.netlify.app URL

Option 2 — GitHub Pages

1. Push this repo to GitHub
2. Go to Settings → Pages
3. Set Source to main branch, / (root)
4. Click Save — live at https://yourusername.github.io/repo-name

Option 3 — Vercel

# Install Vercel CLI (one-time)
npm install -g vercel

# Deploy from project folder
cd smart-sip-calculator
vercel

# Follow prompts — live in ~30 seconds

Option 4 — Cloudflare Pages

1. Go to pages.cloudflare.com
2. Create a new project → Upload index.html
3. Free custom domain available

Option 5 — Any Static Host

Just upload index.html to any web server, S3 bucket, or CDN. That's it.

---

🛠️ Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, flexbox, grid)
Logic	Vanilla JavaScript (ES6+)
Charts	Chart.js v4.4.1 via CDN
Fonts	Google Fonts — Fraunces + Plus Jakarta Sans
Build tool	None — zero build step
Dependencies	None — no npm, no node_modules

---

💻 Run Locally

No server needed. Just open the file:

# Clone the repo
git clone https://github.com/yourusername/SIP_Calculator.git

# Open in browser (any of these work)
cd SIP_Calculator
open index.html                    # macOS
start index.html                   # Windows
xdg-open index.html                # Linux

Or drag index.html directly into your browser tab.

Optional: Use a local server for best results

# Python (usually pre-installed)
python -m http.server 8080
# Then open http://localhost:8080

---

🎨 Customization

All design tokens are CSS variables at the top of index.html:

:root {
  --blue:    #3b5bdb;   /* Primary accent — change to your brand color */
  --green:   #0ca678;   /* Returns / positive values color */
  --bg:      #f0f4ff;   /* Page background */
  --card:    #ffffff;   /* Card background */
  --r2:      24px;      /* Border radius for cards */
}

To change the default SIP amount, rate, or duration — find the <input type="range"> elements and update their value attributes.

---

🗺️ Roadmap / Possible Enhancements

• Export results as PDF / image
• Share results via URL (query params)
• Lumpsum + SIP combined calculator
• XIRR calculator
• Tax saving (ELSS / 80C) module
• Multiple SIP portfolio tracker
• PWA support (offline usage)
• Hindi / regional language support

---

⚠️ Disclaimer

This calculator is for educational and informational purposes only. It does not constitute financial advice. Mutual fund returns are subject to market risk. Past performance is not a guarantee of future results. Please consult a SEBI-registered investment advisor before making any investment decisions.

---

📄 License

This project is open source under the MIT License.

MIT License — free to use, modify, and distribute with attribution.

---

🙌 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repo
2. Create a feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature/your-feature
5. Open a Pull Request

---

⭐ Star this repo if it helped you plan your financial future! Made with ❤️ for financial awareness in India 🇮🇳