Legg til tre nye kalkulatorer: sparing, bolig og arv
Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende små forskjeller vokser eksponentielt over tid: - sparing: rentes rente med ulik avkastning (månedlig compounding) - bolig: belåningseffekt forsterker egenkapitalgap ~6.7× - arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri Landingsside oppdatert med nye kort. Dokumentasjon oppdatert. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
768acc6577
commit
3ffb404250
13 changed files with 2194 additions and 37 deletions
151
public/bolig/index.html
Normal file
151
public/bolig/index.html
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="nb">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Boligforskjellen vokser — interaktiv kalkulator</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<p class="eyebrow">Samme prisvekst. Ikke det samme resultatet.</p>
|
||||
<h1>Boligforskjellen<br><em>forsterkes</em></h1>
|
||||
<p class="lead">To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
|
||||
<div class="stamp">Belåningseffekten</div>
|
||||
</header>
|
||||
|
||||
<div class="small-diff-banner">
|
||||
<span class="sd-icon">↗</span>
|
||||
<span>Med <strong>1 million</strong> i prisforskjell og 4 % årlig vekst: egenkapitalgapet vokser til over <strong id="banner-gap">—</strong> på 15 år.</span>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="controls-card">
|
||||
<h2>Sjekk selv</h2>
|
||||
<div class="controls-grid">
|
||||
<div class="control-group">
|
||||
<label>Boligpris A</label>
|
||||
<div class="val-row">
|
||||
<input type="range" id="priceA" min="2000000" max="8000000" step="100000" value="3000000">
|
||||
<span class="val-display" id="priceA-out">3 000 000 kr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>Boligpris B</label>
|
||||
<div class="val-row">
|
||||
<input type="range" id="priceB" min="2000000" max="8000000" step="100000" value="4000000">
|
||||
<span class="val-display" id="priceB-out">4 000 000 kr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>Årlig prisvekst (% — lik for begge)</label>
|
||||
<div class="val-row">
|
||||
<input type="range" id="growth" min="1" max="10" step="0.5" value="4">
|
||||
<span class="val-display" id="growth-out">4,0 %</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label>Antall år</label>
|
||||
<div class="val-row">
|
||||
<input type="range" id="yrs" min="5" max="30" step="1" value="15">
|
||||
<span class="val-display" id="yrs-out">15 år</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-strip">
|
||||
<div class="stat">
|
||||
<div class="stat-label">Bolig A verdi etter <span class="yr-lbl">15</span> år</div>
|
||||
<div class="stat-value" id="st-valA">—</div>
|
||||
<div class="stat-sub" id="st-subA">—</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Bolig B verdi etter <span class="yr-lbl">15</span> år</div>
|
||||
<div class="stat-value" id="st-valB">—</div>
|
||||
<div class="stat-sub" id="st-subB">—</div>
|
||||
</div>
|
||||
<div class="stat stat-diff">
|
||||
<div class="stat-label">Verdidifferanse</div>
|
||||
<div class="stat-value" id="st-valdiff" style="color:var(--accent);">—</div>
|
||||
<div class="stat-sub" id="st-valdiff-sub">—</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-label">Egenkapital-differanse</div>
|
||||
<div class="stat-value" id="st-eqdiff" style="color:var(--purple);">—</div>
|
||||
<div class="stat-sub" id="st-eqdiff-sub">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Diagram 1: Boligverdi over tid -->
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<div>
|
||||
<div class="chart-title">Boligverdi over tid</div>
|
||||
<div class="chart-desc">Begge boliger stiger med samme prosentsats</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="swatch" style="background:#1a4a8a;"></span>Bolig A</span>
|
||||
<span><span class="swatch" style="background:#c0392b;"></span>Bolig B</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
|
||||
</div>
|
||||
|
||||
<!-- Diagram 2: Absolutt verdidifferanse -->
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<div>
|
||||
<div class="chart-title">Absolutt verdidifferanse</div>
|
||||
<div class="chart-desc">Kronedifferansen mellom boligene — vokser hvert år</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="swatch" style="background:#4a3a8a;"></span>Verdidifferanse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
|
||||
</div>
|
||||
|
||||
<div class="insight" id="insight"></div>
|
||||
|
||||
<!-- Diagram 3: Egenkapitalvekst -->
|
||||
<div class="chart-section">
|
||||
<div class="chart-header">
|
||||
<div>
|
||||
<div class="chart-title">Egenkapitalvekst</div>
|
||||
<div class="chart-desc">Belåningen forsterker forskjellen — egenkapitalgapet vokser raskere enn verdigapet</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span><span class="swatch" style="background:#1a4a8a;"></span>EK Bolig A</span>
|
||||
<span><span class="swatch" style="background:#c0392b;"></span>EK Bolig B</span>
|
||||
<span><span class="swatch" style="background:#4a3a8a;"></span>EK-gap</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-wrap h-240"><canvas id="chart3"></canvas></div>
|
||||
</div>
|
||||
|
||||
<!-- Forklaring -->
|
||||
<div class="explainer">
|
||||
<h3>Belåningseffekten</h3>
|
||||
<p>Med 15 % egenkapital finansierer du boligen med 85 % gjeld. Det betyr at hele prisveksten tilfaller bare 15 % av kapitalen — en forsterkning på omtrent <strong>6,7 ganger</strong>.</p>
|
||||
<div class="formula-box">
|
||||
Egenkapital = <span>Pris × (1 + vekst)ⁿ − Lån</span><br>
|
||||
Lån = <span>85 % av kjøpspris</span> (forenklet avdragsfritt)
|
||||
</div>
|
||||
<p>Verdidifferansen mellom boligene vokser eksponentielt — men egenkapitaldifferansen vokser <strong>enda raskere</strong> fordi begge eierne har like stor gjeldsandel. Jo dyrere bolig, desto mer egenkapital skapes av samme prosentvise prisvekst.</p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<a href="../">← Alle kalkulatorer</a> · Laget med Chart.js · Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a>
|
||||
</footer>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue