An interactive educational game that visualizes how daily spending decisions compound over time, teaching financial literacy through real-world scenarios and immediate visual feedback.
Simply open index.html in your browser, or visit the GitHub Pages deployment.
No installation required! This is a fully static web application.
- How small daily expenses compound over decades
- The power of compound interest and investing
- Opportunity cost of spending vs. saving
- Real-world financial decision-making
- The impact of lifestyle choices on long-term wealth
- Setup: Enter your name, age, and income range
- Learn: Quick 3-slide tutorial on financial concepts
- Decide: Face real-world spending scenarios
- Visualize: See 1, 5, 10, 20, and 30-year projections
- Reflect: Review your decisions and learn from them
- Dinner Decisions: Premium vs budget meals
- Coffee Question: Café vs home brew
- Lunch Break: Restaurant vs packed lunch
- Car Purchase: Luxury vs standard vs used
- Daily Commute: Drive vs transit vs bike
- Rent vs Buy: Homeownership analysis
- Space vs Savings: Apartment size trade-offs
- Subscriptions: Full stack vs curated
- Phone Upgrades: Latest vs extended use
- Investment Strategy: Index funds vs stocks vs savings vs checking
- Risk Tolerance: Stocks vs bonds vs balanced portfolios
- Real Estate: Rental property vs REITs vs stock index
- Emergency Fund: Safety vs growth trade-offs
- Credit Card Strategy: Pay in full vs carry balance vs debit only
- Debt vs Investing: Pay off debt or invest?
- Building Credit: Strategies for credit score improvement
- Job Hopping vs Loyalty: When to change jobs for higher pay
- Career Investment: Certifications vs degrees vs self-study
- 401(k) Match: Maximizing employer contributions
The game uses real financial formulas:
- Compound Interest:
FV = PV × (1 + r)^n - Future Value of Annuity: For regular savings
- Opportunity Cost: What your savings could become if invested (7% annual return)
- Inflation Adjustment: Real purchasing power over time (3% inflation)
- Depreciation: Asset value loss (cars: 15%/year)
- Appreciation: Asset value growth (homes: 3.5%/year)
- HTML5 - Semantic structure
- CSS3 - Modern styling with CSS variables
- Vanilla JavaScript - No frameworks, pure JS
- Chart.js - Interactive visualizations
- LocalStorage - Save game progress
spending-learning-game/
├── index.html # Main entry point
├── css/
│ ├── main.css # Core styles & variables
│ ├── components.css # UI components
│ └── animations.css # Transitions & effects
├── js/
│ ├── app.js # Application entry
│ ├── game/
│ │ ├── GameEngine.js # Core game logic
│ │ ├── Scenario.js # Scenario management
│ │ └── Calculator.js # Financial calculations
│ ├── ui/
│ │ ├── UIManager.js # DOM manipulation
│ │ ├── Charts.js # Chart.js wrapper
│ │ └── Animations.js # Animation helpers
│ ├── data/
│ │ ├── scenarios.js # All game scenarios
│ │ ├── constants.js # Financial constants
│ │ └── achievements.js # Achievement definitions
│ └── utils/
│ ├── storage.js # LocalStorage wrapper
│ └── helpers.js # Utility functions
├── DEVELOPMENT_PLAN.md # Full development plan
└── README.md # This file
-
Clone the repository:
git clone https://github.com/yourusername/spending-learning-game.git
-
Open
index.htmlin your browser- Or use a local server:
python -m http.server 8000
- Or use a local server:
-
Start playing!
This project is ready to deploy as a static site on GitHub Pages:
- Push your code to GitHub
- Go to your repository on GitHub
- Navigate to Settings → Pages
- Under "Source", select Deploy from a branch
- Choose
mainbranch and/ (root)folder - Click Save
- Your site will be live at
https://yourusername.github.io/spending-learning-game/
- Go to Settings → Pages
- Under "Source", select GitHub Actions
- GitHub will automatically deploy on every push to main
- The site typically takes 1-2 minutes to deploy after changes
- Check the Actions tab to monitor deployment status
- No build step required - this is a pure static site!
- ✅ 19 realistic spending scenarios across 7 categories
- ✅ Investment decision scenarios (index funds, bonds, HYSA, real estate)
- ✅ Credit card and debt management scenarios
- ✅ Career and income scenarios (job changes, 401k match)
- ✅ Interactive choice system with quality ratings
- ✅ 30-year financial projections
- ✅ Visual charts comparing choices
- ✅ Educational tips for each scenario
- ✅ Progress saving (LocalStorage)
- ✅ Wisdom score calculation
- ✅ Mobile-responsive design
- Achievement badges system
- Custom scenario builder
- Regional cost adjustments
- Social sharing
- Life simulation mode
- Leaderboards
| Parameter | Value | Source |
|---|---|---|
| Stock Market Return | 7% | Historical S&P 500 average |
| Index Fund Return | 7% | Low-cost passive investing |
| Treasury Bonds | 4.5% | Current US Treasury rates |
| High-Yield Savings | 4.5% | Current competitive rates |
| Regular Savings | 0.5% | Traditional bank rates |
| Checking Account | 0.1% | Near-zero interest |
| Real Estate Return | 8% | Includes rental income |
| Credit Card APR | 22% | Average credit card rate |
| Inflation Rate | 3% | US historical average |
| Home Appreciation | 3.5% | US housing market average |
| Car Depreciation | 15% | Industry standard |
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- Chart.js for beautiful visualizations
- The personal finance community for educational content
- Financial literacy advocates everywhere
Remember: This game is for educational purposes. Real financial decisions should consider your personal circumstances and professional advice.
Made with ❤️ for financial literacy