Skip to content

hakupao/loan_simulation

Repository files navigation

English | 中文

Japan Real Estate Studio

Housing loan simulation & investment yield analysis — all in one multilingual workspace.

Live Demo GitHub


Last Commit GitHub Stars Stack i18n Architecture UX


Preview

Housing Loan — Desktop Housing Loan — Mobile
Desktop — Housing Loan Mobile — Housing Loan
Investment Analysis — Desktop Investment Analysis — Mobile
Desktop — Investment Analysis Mobile — Investment Analysis

About

Japan Real Estate Studio is a compact, production-grade web tool for two closely related financial problems: mortgage planning and investment yield analysis — tailored to the Japanese real estate market.

It is a zero-build, zero-dependency static site that runs entirely in the browser, designed for Chinese, Japanese, and English-speaking users looking at Japan property.


Features

Feature Description
Reverse Loan Calc Estimate affordable property price from a monthly budget
Forward Loan Calc Estimate monthly repayment from a given property price
Investment Analysis Gross/net yield, NOI, CCR, DCR, FCR, K%, leverage judgment
Tax Simulation Depreciation, loss offset, tax savings, after-tax cash flow
5 Market Presets Tokyo 23-ku, Yokohama, Tokyo suburbs, Osaka, regional properties
Quick / Advanced Mode 5 basic inputs or expand to full 16-parameter analysis
Interactive Tooltips Click any metric label for a plain-language explanation; mobile-friendly bottom sheet
Trilingual UI Chinese, Japanese, English — switch in one click, ~300 i18n keys
Chart Breakdowns Donut charts for principal/interest/fees composition with toggle controls
Local Persistence Inputs, language, and active mode saved to localStorage

Built With

HTML5 CSS3 JavaScript Cloudflare Pages

No frameworks. No bundlers. No node_modules. Just vanilla HTML/CSS/JS served as static files.


Architecture

graph TB
    Browser["🌐 Browser"]

    subgraph UI["UI Layer"]
        LoanUI["🏠 script.js — Loan UI"]
        InvestUI["📊 invest.js — Investment UI"]
        Tooltip["💡 tooltip.js — Tooltip System"]
    end

    subgraph Engine["Calculation Engine"]
        LoanCalc["🧮 calc.js — Mortgage Math"]
        InvestCalc["📈 invest-calc.js — Investment Math"]
    end

    subgraph Shared["Shared Modules"]
        I18n["🌍 i18n.js — ZH / JA / EN"]
        Format["🔢 format.js — Formatting"]
    end

    Storage[("💾 localStorage")]

    Browser --> LoanUI
    Browser --> InvestUI
    Browser --> Tooltip
    LoanUI --> LoanCalc
    InvestUI --> InvestCalc
    InvestUI -.-> LoanCalc
    LoanUI --> I18n
    InvestUI --> I18n
    Tooltip --> I18n
    LoanUI --> Format
    InvestUI --> Format
    LoanUI --> Storage
    InvestUI --> Storage
Loading

Quick Start

This project is zero-build — open it directly in a browser.

git clone https://github.com/hakupao/loan_simulation.git
cd loan_simulation

Then open index.html, or serve it with any static server:

python -m http.server 8000
# visit http://localhost:8000

Project Structure

loan_simulation/
├── index.html          # Page layout, semantic structure, tab navigation
├── styles.css          # Visual design, responsive layout, animations
├── script.js           # Housing loan UI: form handling, charts, persistence
├── calc.js             # Mortgage formulas & numeric helpers
├── format.js           # Number formatting & display units
├── invest.js           # Investment UI: presets, result rendering, state
├── invest-calc.js      # Investment engine: yield, NOI, depreciation, tax, CF
├── tooltip.js          # Interactive tooltip system with mobile bottom sheet
├── i18n.js             # Translation dictionaries (~300 keys, 3 languages)
├── _headers            # Cache-control for static deployment
└── assets/
    ├── preview-desktop.png
    ├── preview-mobile.png
    ├── preview-invest-desktop.png
    └── preview-invest-mobile.png

How It Works

Housing Loan — Reverse Mode

  1. Monthly budget minus fixed fees = amount available for loan repayment
  2. Annuity formula converts repayment amount back to loan principal
  3. Add down payment to estimate affordable property price

Housing Loan — Forward Mode

  1. Loan principal = property price - down payment
  2. Monthly repayment calculated from rate and term (annuity formula)
  3. Fixed monthly fees added to show true monthly outlay

Investment Analysis

  • Revenue: Monthly rent x 12, minus vacancy loss = effective gross income
  • Expenses: Management fee + repair reserve + PM fee + property tax + insurance
  • NOI: Effective rent - operating expenses
  • Debt service: Monthly loan payment x 12 (annuity formula)
  • Cash flow (pre-tax): NOI - annual debt service
  • Depreciation: Building value / remaining useful life. Remaining life calculated from building age and statutory life by structure type (RC: 47yr, Steel: 34yr, Light steel: 27yr, Wood: 22yr)
  • Tax analysis: Rental income = NOI - depreciation - interest. If negative, loss offset applies against salary income, generating tax savings at marginal rate
  • Cash flow (after-tax): Pre-tax CF + tax savings (or - tax liability)
  • Key metrics: Gross/net yield, CCR, DCR, FCR, K%, yield gap (FCR - K%), leverage determination

Interactive Tooltips

Every financial metric label is clickable. On click, a tooltip popover explains the concept in the user's selected language.

  • Desktop: Popover appears above the label with auto-positioning
  • Mobile: Bottom sheet slides up with a drag handle, dimmed backdrop

The tooltip system is self-contained in tooltip.js and pulls translations from the tooltips namespace in i18n.js.


Investment Presets

Preset Price Rent Rate Term Structure Profile
Tokyo 23-ku 2,800万 10.5万/mo 1.65% 35yr RC 5yr Stable low-risk
Yokohama Central 2,200万 9.5万/mo 1.80% 30yr RC 10yr Balanced metro
Tokyo Suburbs 1,500万 7.5万/mo 2.20% 25yr RC 20yr Value play
Osaka Central 1,800万 8.5万/mo 2.00% 30yr RC 15yr Moderate
Regional Old 600万 4.5万/mo 3.50% 15yr Wood 25yr High yield + tax offset

Roadmap

  • Housing loan calculator (forward + reverse)
  • Investment analysis with 5 market presets
  • Trilingual interface (ZH / JA / EN)
  • Interactive tooltip explanations with mobile bottom sheet
  • Responsive layout for all devices
  • localStorage persistence
  • PDF export for analysis results
  • Dark mode / theme switching
  • Multi-year cash flow projection chart
  • Side-by-side property comparison mode
  • Adjustable tax rate brackets

Notes

  • Monetary inputs use 万円 as the unit (1万円 = 10,000 JPY)
  • Investment tax calculations are first-year estimates; consult a tax professional for actual filing
  • Housing loan mode is a simplified estimator for fast decision support
  • Taxes, insurance, bank-specific screening, and edge-case fees are not included in housing loan mode

Star History Chart


Author

Built as a public product sample and portfolio-ready micro-tool by hakupao.

(back to top)

About

Japan real estate loan simulator & investment yield analyzer — trilingual ZH/JA/EN, zero-build vanilla JS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors