Compound Interest Visualizer & Financial Growth Simulator

Overview

A high-performance, responsive, browser-based financial tool designed to help users visualize the power of compounding interest. This application provides a clean, professional interface for calculating investment growth, monthly contributions, and long-term wealth projection without needing complex spreadsheets or expensive software.

Technical Architecture

• Single File: The entire application (HTML, CSS, JS) must reside in one file.
• Frameworks: Use Tailwind CSS (via CDN) for styling and Chart.js (via CDN) for data visualization. All logic is pure Vanilla JavaScript.
• State Management: Use an in-memory JavaScript object to manage inputs and calculation results. NO localStorage, sessionStorage, or cookies are permitted.
• Environment Compatibility: The app must be fully functional within a null-origin sandboxed iframe.

Key Features

1. Calculation Engine

• Dynamic Inputs: Users can input Principal Amount, Monthly Contribution, Annual Interest Rate, and Investment Duration (Years).
• Frequency Selection: Toggle between compounding frequencies (Monthly, Quarterly, Annually).
• Real-Time Updates: The chart and result summary update instantly as the user adjusts input sliders or values (debounced input handling).

2. Visualization

• Chart.js Implementation: A responsive line chart showing "Total Balance" vs. "Total Contributions" over time.
• Clean Aesthetic: Use a professional, vibrant blue and slate color scheme. High-contrast labels for legibility.
• Data Table: An auto-generating annual breakdown table appearing below the chart for granular analysis.

UI/UX Design Specifications

• Layout:
  • Top Section: Application title and brief functional description.
  • Main Area: A two-column grid (on desktop). The left column contains the input controls; the right column contains the interactive chart.
  • Bottom Section: A scrollable, striped table displaying yearly growth data.
• Styling:
  • Colors: Background: #ffffff. Text: #1e293b. Accents: #3b82f6 (blue) and #10b981 (emerald for growth indicators).
  • Typography: Sans-serif, system font stack for maximum readability.
  • Shadows: Subtle shadow-sm or shadow-md on input cards to separate content from the background.
• Responsiveness: Single-column layout for mobile devices; two-column grid activates at the md breakpoint.

Developer Directives

1. Strictly No Branding: No logos, company names, or fictional app titles. Use generic, functional naming.
2. No Persistent Storage: Ensure zero calls to localStorage or sessionStorage.
3. Sanitization: All user inputs must be sanitized using standard JavaScript number parsing to prevent calculation errors.
4. Performance: Utilize requestAnimationFrame for chart updates if necessary to ensure smooth visual transitions.
5. Accessibility: Ensure all inputs have associated <label> tags and the table is semantic HTML.