home-replacement-cost/index.html at main · spotclips/home-replacement-cost · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Replacement Cost Calculator — Are You Underinsured? | TheInsurance.Guide</title>
<meta name="description" content="Free home replacement cost calculator. Estimate the dwelling coverage (Coverage A) you actually need to rebuild — not your market value — plus other structures, contents, and loss of use. No sign-up." />
<meta name="theme-color" content="#0e7c86" />
<link rel="canonical" href="https://spotclips.github.io/home-replacement-cost/" />
<meta property="og:title" content="Home Replacement Cost Calculator" />
<meta property="og:description" content="How much dwelling coverage do you need to rebuild your home? Estimate replacement cost the right way. Free, no sign-up." />
<meta property="og:type" content="website" />
<style>
  :root{
    --teal:#0e7c86; --teal-dk:#0a5b63; --ink:#0f1e2e; --slate:#41556b;
    --mist:#7d8da5; --line:#dbe4ea; --bg:#f4f8f9; --card:#ffffff;
    --good:#0f9d6f; --warn:#c2571a; --accent:#f0b429;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:var(--teal-dk)}
  .wrap{max-width:760px;margin:0 auto;padding:0 18px}
  header.site{background:linear-gradient(135deg,var(--teal),var(--teal-dk));color:#fff;padding:22px 0}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .brand{font-weight:700;font-size:18px;letter-spacing:.2px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:9px}
  .brand .dot{width:12px;height:12px;border-radius:3px;background:var(--accent);display:inline-block}
  .brand small{display:block;font-weight:400;font-size:11px;opacity:.85;letter-spacing:.3px}
  .nav-cta{color:#fff;text-decoration:none;font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.5);
    padding:7px 13px;border-radius:8px;white-space:nowrap}
  .nav-cta:hover{background:rgba(255,255,255,.12)}
  .crumb{font-size:13px;margin:16px 0 0}
  .crumb a{color:var(--teal-dk);text-decoration:none;font-weight:600}
  h1{font-size:27px;line-height:1.25;margin:12px 0 8px}
  h1 em{color:var(--teal-dk)}
  .lede{color:var(--slate);font-size:16px;margin-bottom:22px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:20px;
    box-shadow:0 1px 3px rgba(15,30,46,.05)}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:560px){.grid{grid-template-columns:1fr}}
  label{display:block;font-size:13px;font-weight:600;color:var(--slate);margin-bottom:6px}
  label .hint{font-weight:400;color:var(--mist);font-size:12px}
  input,select{width:100%;padding:11px 12px;font-size:16px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);transition:border-color .15s}
  input:focus,select:focus{outline:none;border-color:var(--teal)}
  .field{margin-bottom:16px}
  .prefix{position:relative}
  .prefix span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mist);font-size:16px}
  .prefix input{padding-left:26px}
  .sectlbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--mist);margin:6px 0 12px}
  .checkrow{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
  .checkrow label{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);font-weight:500;margin:0}
  .checkrow input{width:auto}
  .btn{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:13px 20px;font-size:16px;font-weight:600;cursor:pointer;width:100%;transition:background .15s}
  .btn:hover{background:var(--teal-dk)}
  .result{display:none;margin-top:4px}
  .result.show{display:block}
  .big{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-.5px;color:var(--good)}
  .sub{color:var(--slate);font-size:14px;margin-top:6px}
  .rowline{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px;gap:12px}
  .rowline:last-child{border-bottom:none}
  .rowline.total{border-top:2px solid var(--line);border-bottom:none;padding-top:12px;font-weight:700;font-size:16px}
  .pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-bottom:10px;background:#e3f5ee;color:var(--good)}
  .note{background:#f0f6f7;border-left:3px solid var(--teal);padding:12px 14px;border-radius:0 8px 8px 0;font-size:14px;color:var(--slate);margin-top:14px}
  h2{font-size:20px;margin:6px 0 12px}
  h3{font-size:16px;margin:16px 0 6px}
  .prose p{color:var(--slate);font-size:15px;margin-bottom:12px}
  .prose ul{color:var(--slate);font-size:15px;margin:0 0 12px 20px}
  .prose li{margin-bottom:6px}
  .prose b{color:var(--ink)}
  .disclaimer{font-size:13px;color:var(--mist);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:16px;margin-bottom:24px}
  footer.site{background:var(--ink);color:#c4d2de;padding:28px 0;font-size:14px}
  footer.site a{color:#fff;font-weight:600}
  footer.site .wrap{display:flex;flex-direction:column;gap:8px}
  .src{font-size:12px;color:#8da5b8}
  .src a{color:#c4d2de}
</style>
</head>
<body>

<header class="site">
  <div class="wrap">
    <a class="brand" href="https://theinsurance.guide" target="_blank" rel="noopener">
      <span class="dot"></span>
      <span>TheInsurance.Guide<small>Clear answers on US insurance</small></span>
    </a>
    <a class="nav-cta" href="https://spotclips.github.io/">All free calculators →</a>
  </div>
</header>

<main class="wrap">
  <p class="crumb"><a href="https://spotclips.github.io/">← All calculators</a></p>
  <h1>Home Replacement Cost Calculator: <em>Are you underinsured?</em></h1>
  <p class="lede">Homeowners insurance should rebuild your house — not match its market price. Replacement cost ignores
    the land and the market, and it's often <b>higher</b> than what you paid. This estimates the dwelling coverage
    (Coverage A) you need, then the rest of the policy stack. No sign-up, nothing stored.</p>

  <div class="card">
    <div class="sectlbl">Your home</div>
    <div class="grid">
      <div class="field">
        <label for="sqft">Living area <span class="hint">(finished square feet)</span></label>
        <input id="sqft" type="text" inputmode="numeric" placeholder="2,000" />
      </div>
      <div class="field">
        <label for="quality">Construction quality</label>
        <select id="quality">
          <option value="145">Basic / economy (~$145/sq ft)</option>
          <option value="200" selected>Standard (~$200/sq ft)</option>
          <option value="300">Above-average / custom (~$300/sq ft)</option>
          <option value="450">Luxury (~$450/sq ft)</option>
        </select>
      </div>
    </div>
    <div class="field">
      <label for="custom">Local rebuild cost per sq ft <span class="hint">(optional — overrides the quality tier if you know it)</span></label>
      <div class="prefix" style="max-width:240px"><span>$</span><input id="custom" type="text" inputmode="numeric" placeholder="e.g. 225" /></div>
    </div>
    <div class="checkrow">
      <label><input type="checkbox" id="basement" /> Finished basement</label>
      <label><input type="checkbox" id="garage" /> Detached garage / structures</label>
      <label><input type="checkbox" id="ext" checked /> Add extended replacement cushion (+25%)</label>
    </div>

    <button class="btn" id="calc">Estimate my coverage →</button>
    <div class="result" id="result"></div>
  </div>

  <div class="card prose">
    <h2>Replacement cost vs. market value</h2>
    <p>They're different numbers. <b>Market value</b> includes the land and reflects supply and demand. <b>Replacement
      cost</b> is only what it takes to rebuild the structure with today's labor and materials. After a total loss you
      still own the land — so insuring to market value can leave you badly over- or under-covered. Rebuild costs have
      also jumped with materials and labor, which is why so many homes are underinsured.</p>
    <h3>The coverage stack</h3>
    <ul>
      <li><b>Coverage A — Dwelling:</b> the replacement cost of the house itself. This is the number this tool sizes.</li>
      <li><b>Coverage B — Other structures:</b> fences, sheds, detached garage — usually about 10% of Coverage A.</li>
      <li><b>Coverage C — Personal property:</b> your belongings — commonly 50–70% of Coverage A.</li>
      <li><b>Coverage D — Loss of use:</b> hotel and living costs while rebuilding — about 20% of Coverage A.</li>
    </ul>
    <h3>Ask for extended or guaranteed replacement cost</h3>
    <p>Even a good estimate can fall short after a widespread disaster spikes local building costs. An
      <b>extended replacement cost</b> endorsement (typically +25%) or <b>guaranteed replacement cost</b> pays above
      your Coverage A limit to finish the rebuild. For how these endorsements work, read the guides at
      <a href="https://theinsurance.guide" target="_blank" rel="noopener">TheInsurance.Guide</a>.</p>
  </div>

  <div class="disclaimer">
    <b>Disclaimer.</b> Educational estimate only — not financial or insurance advice, and not a quote or offer of
    coverage. Per-square-foot costs are broad national ballparks and vary widely by region, materials, and finishes.
    For an accurate figure, get a replacement-cost estimate from your insurer or a licensed appraiser. Built by
    <a href="https://theinsurance.guide" target="_blank" rel="noopener">TheInsurance.Guide</a>.
  </div>
</main>

<footer class="site">
  <div class="wrap">
    <div>A free, open-source tool from <a href="https://theinsurance.guide" target="_blank" rel="noopener">TheInsurance.Guide</a> — clear answers on US insurance.</div>
    <div class="src">Method: square footage × rebuild cost/sq ft, with standard Coverage B/C/D ratios. Open source on
      <a href="https://github.com/spotclips/home-replacement-cost" target="_blank" rel="noopener">GitHub</a>.</div>
  </div>
</footer>

<script>
function num(v){ return Number(String(v).replace(/[^0-9.]/g,'')) || 0; }
function money(n){ return '$' + Math.round(n).toLocaleString('en-US'); }
function run(){
  var sqft = num(document.getElementById('sqft').value);
  var quality = num(document.getElementById('quality').value);
  var custom = num(document.getElementById('custom').value);
  var perSqft = custom > 0 ? custom : quality;
  var basement = document.getElementById('basement').checked;
  var garage = document.getElementById('garage').checked;
  var ext = document.getElementById('ext').checked;
  var el = document.getElementById('result');

  if (!sqft){ el.className='result show'; el.innerHTML='<p class="sub">Enter your home\'s finished square footage to see an estimate.</p>'; return; }

  var base = sqft * perSqft;
  var basementAdd = basement ? sqft * perSqft * 0.5 : 0; // finished basement ~ half rate of living area
  var dwelling = base + basementAdd;                     // Coverage A (structure)
  var otherStruct = garage ? dwelling * 0.10 : dwelling * 0.05; // Coverage B
  var contents = dwelling * 0.60;                        // Coverage C
  var lossUse = dwelling * 0.20;                         // Coverage D
  var covA = ext ? dwelling * 1.25 : dwelling;           // extended replacement cushion

  var html = '';
  html += '<span class="pill">Recommended dwelling coverage (Coverage A)</span>';
  html += '<div class="big">'+money(covA)+'</div>';
  html += '<div class="sub">'+sqft.toLocaleString('en-US')+' sq ft × '+money(perSqft)+'/sq ft'+(basement?' + finished basement':'')+(ext?', with a +25% extended replacement cushion':'')+'.</div>';
  html += '<div style="margin-top:18px">';
  html += '<div class="rowline"><span>Rebuild cost of the structure</span><b>'+money(dwelling)+'</b></div>';
  if (ext) html += '<div class="rowline"><span>Extended replacement cushion (+25%)</span><b>'+money(covA-dwelling)+'</b></div>';
  html += '<div class="rowline total"><span>Coverage A — Dwelling</span><span style="color:var(--good)">'+money(covA)+'</span></div>';
  html += '</div>';
  html += '<div style="margin-top:18px"><span class="pill">Suggested rest of the policy</span></div>';
  html += '<div style="margin-top:10px">';
  html += '<div class="rowline"><span>Coverage B — Other structures ('+(garage?'10':'5')+'%)</span><b>'+money(otherStruct)+'</b></div>';
  html += '<div class="rowline"><span>Coverage C — Personal property (60%)</span><b>'+money(contents)+'</b></div>';
  html += '<div class="rowline"><span>Coverage D — Loss of use (20%)</span><b>'+money(lossUse)+'</b></div>';
  html += '</div>';
  html += '<div class="note">These are standard starting ratios. If you own a lot of high-value belongings, raise Coverage C or schedule valuables separately. Ask your insurer for <b>extended</b> or <b>guaranteed replacement cost</b> so a cost spike after a disaster doesn\'t leave you short.</div>';

  el.className='result show'; el.innerHTML=html;
}
document.getElementById('calc').addEventListener('click', run);
['sqft','custom'].forEach(function(id){
  document.getElementById(id).addEventListener('keydown', function(e){ if(e.key==='Enter') run(); });
});
</script>
</body>
</html>