Rental Property Capitalization Rate and Net Operating Income Calculator

Overview

A clean, professional, high-performance web tool designed for real estate investors. It allows users to input rental income and operating expense data to instantly derive the Net Operating Income (NOI) and Capitalization Rate (Cap Rate).

Technical Constraints & Compliance

• Architecture: Single HTML file containing all logic (Vanilla JS) and styling.
• Dependencies: Use Tailwind CSS via CDN for rapid, responsive UI development. Use standard CSS for animations.
• Sandbox Safety: NO localStorage, sessionStorage, or cookies. The application state must be stored in a simple JavaScript object variable.
• External Interaction: No popups (alert/prompt). Use semantic HTML modal overlays for interactions. All external links must have target="_blank" and rel="noopener noreferrer".
• Performance: Instant, zero-latency calculation on input change.

UI/UX Design

• Aesthetic: Clean, professional, "SaaS" aesthetic. Light background (#FFFFFF or #F9FAFB), crisp borders, subtle shadows.
• Typography: Use a clean sans-serif font stack (e.g., 'Inter', 'system-ui', 'sans-serif').
• Layout:
  • Header: Clear, descriptive H1 title and a brief sub-headline.
  • Main Input Area: A two-column grid (on desktop).
    • Left Column: "Revenue Inputs" (Monthly Rent, Other Income).
    • Right Column: "Operating Expenses" (Property Taxes, Insurance, Maintenance, Property Management, Utilities, Vacancy rate).
  • Results Section: A prominent, visually distinct "Results Card" at the bottom or right side that updates in real-time. It should show:
    • Total Monthly Revenue
    • Total Monthly Expenses
    • Net Operating Income (Annualized)
    • Cap Rate (%)
    • Gross Rent Multiplier (GRM)
• Animations: Use CSS transitions (transition: all 0.3s ease) on result figures. When numbers update, they should subtly fade in or scale up to signify change.

Feature List

1. Real-Time Calculation: The engine recalculates values on every input event.
2. Dynamic Input Validation: Ensure input fields reject non-numeric characters and negative numbers, providing subtle red-border feedback if inputs are invalid.
3. Flexible Inputs: Support for "Monthly" and "Annual" toggles per input row, allowing users to input data as they see it on their paperwork.
4. Print-Ready Report: A dedicated "Print" button that uses CSS @media print rules to hide unnecessary UI elements and print only the results card and input summary.
5. Reset Functionality: A single click button to clear all inputs for a new property analysis.

Color Palette

• Primary Blue (Action): #2563EB (Buttons, active states)
• Secondary Gray (Backgrounds/Borders): #E5E7EB, #F3F4F6
• Success Green (Results): #059669 (For final metrics)
• Text: #111827 (Primary), #6B7280 (Secondary/labels)
• Warning/Error Red: #DC2626 (Only for input errors)

Development Directives

1. Vanilla JS Only: No build step. Use document.getElementById or querySelector to manage input capture.
2. State Management: Keep a central state = { income: 0, expenses: 0, purchasePrice: 0 } object. Update the UI whenever state is mutated.
3. Responsiveness: Use standard Tailwind mobile-first classes (grid-cols-1 md:grid-cols-2) to ensure full functionality on smartphones.
4. Accessibility: Ensure all inputs have appropriate <label> elements and aria-labels for screen readers.