Ole-Morten Duesund
3ffb404250
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>
151 lines
5.9 KiB
HTML
151 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="nb">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Rentes rente — 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 sparebeløp. Ikke det samme resultatet.</p>
|
||
<h1>Rentes rente<br><em>forsterker</em></h1>
|
||
<p class="lead">Noen få prosentpoeng i avkastning ser ubetydelig ut — men over tid skaper de enorme forskjeller. Se hva rentes rente gjør med sparepengene dine.</p>
|
||
<div class="stamp">Tid i markedet</div>
|
||
</header>
|
||
|
||
<div class="small-diff-banner">
|
||
<span class="sd-icon">↗</span>
|
||
<span>Med <strong>3 000 kr/mnd</strong> i 25 år: bare 3 prosentpoeng mer i avkastning gir over <strong id="banner-gap">—</strong> ekstra.</span>
|
||
</div>
|
||
|
||
<main>
|
||
|
||
<div class="controls-card">
|
||
<h2>Sjekk selv</h2>
|
||
<div class="controls-grid">
|
||
<div class="control-group">
|
||
<label>Månedlig sparebeløp</label>
|
||
<div class="val-row">
|
||
<input type="range" id="monthly" min="1000" max="20000" step="500" value="3000">
|
||
<span class="val-display" id="monthly-out">3 000 kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Avkastning A (% per år)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="rateA" min="1" max="15" step="0.5" value="4">
|
||
<span class="val-display" id="rateA-out">4,0 %</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Avkastning B (% per år)</label>
|
||
<div class="val-row">
|
||
<input type="range" id="rateB" min="1" max="15" step="0.5" value="7">
|
||
<span class="val-display" id="rateB-out">7,0 %</span>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label>Antall år</label>
|
||
<div class="val-row">
|
||
<input type="range" id="yrs" min="5" max="40" step="1" value="25">
|
||
<span class="val-display" id="yrs-out">25 år</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stat-strip">
|
||
<div class="stat">
|
||
<div class="stat-label">Sparekonto A etter <span class="yr-lbl">25</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">Sparekonto B etter <span class="yr-lbl">25</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">B har mer enn A</div>
|
||
<div class="stat-value" id="st-diff" style="color:var(--accent);">—</div>
|
||
<div class="stat-sub" id="st-diff-sub">—</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Totalt innbetalt</div>
|
||
<div class="stat-value" id="st-paid">—</div>
|
||
<div class="stat-sub">likt for begge</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Diagram 1: Formue over tid -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Formue over tid</div>
|
||
<div class="chart-desc">Samme sparebeløp, ulik avkastning</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#1a4a8a;"></span>Konto A</span>
|
||
<span><span class="swatch" style="background:#c0392b;"></span>Konto B</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Diagram 2: Forskjell i formue -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Forskjell i formue</div>
|
||
<div class="chart-desc">Hvor mye mer B har enn A — vokser eksponentielt</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#4a3a8a;"></span>Gap</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
|
||
</div>
|
||
|
||
<div class="insight" id="insight"></div>
|
||
|
||
<!-- Diagram 3: Avkastning vs innbetalt -->
|
||
<div class="chart-section">
|
||
<div class="chart-header">
|
||
<div>
|
||
<div class="chart-title">Avkastning vs. innbetalt</div>
|
||
<div class="chart-desc">Viser hvor mye som er innskudd og hvor mye som er renter</div>
|
||
</div>
|
||
<div class="legend">
|
||
<span><span class="swatch" style="background:#1a4a8a;"></span>Innskudd</span>
|
||
<span><span class="swatch" style="background:rgba(26,74,138,0.35);"></span>Renter A</span>
|
||
<span><span class="swatch" style="background:rgba(192,57,43,0.35);"></span>Renter B</span>
|
||
</div>
|
||
</div>
|
||
<div class="chart-wrap h-240"><canvas id="chart3"></canvas></div>
|
||
</div>
|
||
|
||
<!-- Forklaring -->
|
||
<div class="explainer">
|
||
<h3>Rentes rente-effekten</h3>
|
||
<p>Rentes rente betyr at avkastningen din også gir avkastning. Over tid blir det renter du tjener på rentene som utgjør mesteparten av formuen — ikke de månedlige innskuddene dine.</p>
|
||
<div class="formula-box">
|
||
Sluttverdi = <span>P × ((1 + r)ⁿ − 1) / r</span><br>
|
||
der P = månedlig beløp, r = månedsrente, n = antall måneder
|
||
</div>
|
||
<p>Selv små forskjeller i avkastning — noen få prosentpoeng — gir dramatisk ulike resultater over lang tid. Det er derfor valg av sparestrategi tidlig i livet har så stor betydning.</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>
|