Loan Comparison Calculator Specification

Overview

A clean, professional-grade, browser-based financial utility designed to help users evaluate two different loan scenarios simultaneously. This tool removes the complexity of financial planning by providing instant, reactive visual comparisons.

Technical Constraints & Directives

• Architecture: Single-file HTML5/CSS3/Vanilla JS application.
• State Management: All calculations must be performed in-memory. No localStorage, sessionStorage, or cookies allowed.
• Environment: Must run safely within a sandboxed iframe. Do not use alert(), prompt(), or confirm(). Use custom modal components if needed.
• Performance: Zero-dependency preferred, or lightweight CDNs for styling (e.g., Tailwind CSS via CDN).

UI/UX Design

• Aesthetic: Premium, minimalist "SaaS" style. High white space, sharp typography (e.g., Inter), subtle soft shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)), and rounded corners (border-radius: 8px).
• Color Palette:
  • Primary: #2563eb (Royal Blue)
  • Background: #f8fafc (Slate-50)
  • Surface/Card: #ffffff (White)
  • Text: #1e293b (Slate-800)
  • Border/Muted: #e2e8f0 (Slate-200)
  • Accent (Success): #10b981 (Emerald-500)
• Layout:
  • Header: Simple title and description.
  • Main Area: A grid layout where the left column handles "Loan A" inputs and the right column handles "Loan B" inputs. Each section features a clean form with floating labels.
  • Results Section: A dynamic center dashboard that updates in real-time as users type. It highlights the savings difference between the two loans.

Feature Specifications

1. Dynamic Inputs:
   • Loan Amount (Principal)
   • Annual Interest Rate (%)
   • Loan Term (Years)
2. Real-time Results:
   • Monthly Payment Calculation
   • Total Interest Paid
   • Total Cost of Loan
3. Comparison Engine:
   • A summary box showing "Total Savings" when choosing the cheaper option.
   • A visual progress bar or simple CSS bar chart representing the total interest paid for both loans relative to each other.
4. Responsiveness:
   • Desktop: Side-by-side grid.
   • Mobile: Vertical stacking for inputs, clean summary cards at the bottom.

Interactivity & Animations

• Micro-interactions: Use transition: all 0.2s ease for input focus states and button hover effects.
• Calculations: Use a small debounce function (e.g., 100ms) to update calculations so the UI feels snappy without redundant processing.
• Responsive Resizing: Ensure the flex/grid containers use percentage or fr units to handle window resizing without horizontal overflow.