The True Cost of Self-Management Calculator

An interactive calculator that helps rental property owners see the real, all-in cost of self-managing their properties — and how it stacks up against hiring a property manager.

Built as a single HTML file with zero dependencies. No build step, no framework, no server required.

https://build-with-madeline.github.io/self-management-calculator/

Quick Start

Open index.html in any browser. That's it.

To host it, drop the file on any static host — GitHub Pages, Netlify, Vercel, your own site, etc.

---

How to Customize

Everything you'd want to change lives in index.html. Here's where to find it.

Hardcoded Assumptions

These are the values baked into the calculator that the end user doesn't see. Search for these in the <script> section:

Assumption	What it does	Where to find it
PM Fee: value="8"	The management fee percentage used in the comparison (currently 8%)	Hidden input near the top of the HTML: <input type="hidden" id="pmFee" value="8">
Vacancy Reduction: 0.50	Assumes a PM would cut vacancy days by 50%	In the vacancy category's calc function: return v.totalVacantDays * dailyRent * 0.50
Maintenance Savings: 0.20	Assumes PM vendor relationships save 20% on maintenance	In the maintenance category's calc function: return v.annualMaintenance * 0.20

Default Field Values

Every input field has a default value that pre-populates when the page loads. These are set in each category's fields array:

{ id: 'doors', default: 15 }        // Number of doors
{ id: 'avgRent', default: 1500 }    // Average monthly rent
{ id: 'hoursPerDoor', default: 5 }  // Hours spent per door per month
{ id: 'hourlyRate', default: 75 }   // Owner's hourly time value
// ... etc.

Just change the default: number to match what's typical in your market.

Adding a New Cost Category

Each category is a self-contained object in the categories array. Copy any existing one and modify it:

{
  id: 'myNewCategory',           // Unique ID (no spaces)
  icon: '🏠',                    // Emoji for the header
  colorClass: 'bg-software',     // CSS class for icon background color
  title: 'Category Name',        // Displayed title
  subtitle: 'Short description', // Displayed under the title
  fields: [
    {
      id: 'fieldName',           // Unique field ID
      label: 'What the user sees',
      type: 'currency',          // 'currency', 'number', or 'slider'
      default: 100,
      min: 0,
      max: 10000,
      step: 50,
      hint: 'Helper text below the input'
    }
  ],
  calc: (v, doors, avgRent) => {
    // Return the annual cost
    // v.fieldName gives you the value of any field in this category
    return v.fieldName * 12;
  }
}

Available color classes: bg-software, bg-legal, bg-time, bg-vacancy, bg-maintenance, bg-accounting, bg-insurance, bg-education, bg-staff. Or add your own in the <style> section.

Removing a Cost Category

Delete the entire { id: '...', ... } block from the categories array and its trailing comma.

Changing the CTA Button

Find this line near the bottom of the HTML:

<a href="#" class="cta-button" id="ctaBtn">Talk to a Property Manager</a>

Replace # with your calendar link, landing page, or whatever you want. Change the button text to match.

Changing the Tagline & Copy

• Hero headline: Search for <h1>The True Cost of Self-Management</h1>
• Hero subtext: The <p> tag right below it
• Results section labels: In the .results-panel div
• CTA text: The <p> inside the .cta div
• Footer: The .footer div at the bottom

Styling

All CSS is in the <style> tag at the top. The color palette is:

• Dark navy: #1a1a2e, #16213e, #0f3460
• Red (self-manage costs): #e74c3c
• Green (savings): #2ecc71
• Background: #f8f9fb

---

Hosting on GitHub Pages

1. Push this repo to GitHub
2. Go to Settings → Pages
3. Set source to Deploy from a branch → main → / (root)
4. Your calculator will be live at https://yourusername.github.io/self-management-calculator/

License

MIT — use it however you want.