/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function formatNumber(num: number): string { return num.toLocaleString("no-NO", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } function QuestionMarkIcon() { return ( ); } function App() { const [mortgage, setMortgage] = useState(undefined); const [rentPercentage, setRentPercentage] = useState(undefined); const [incomeTaxDeduction, setIncomeTaxDeduction] = useState(22); const [taxRate, setTaxRate] = useState(22); const [darkMode, setDarkMode] = useState(false); useEffect(() => { const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); setDarkMode(darkModeMediaQuery.matches); const handleColorSchemeChange = (e: MediaQueryListEvent) => { setDarkMode(e.matches); }; darkModeMediaQuery.addEventListener("change", handleColorSchemeChange); return () => { darkModeMediaQuery.removeEventListener("change", handleColorSchemeChange); }; }, []); useEffect(() => { document.body.className = darkMode ? "dark-mode" : ""; }, [darkMode]); useEffect(() => { const params = new URLSearchParams(window.location.search); const mortgageParam = params.get("mortgage"); const rentPercentageParam = params.get("rentPercentage"); if (mortgageParam) setMortgage(Number(mortgageParam)); if (rentPercentageParam) setRentPercentage(Number(rentPercentageParam)); }, []); useEffect(() => { const params = new URLSearchParams(); if (mortgage !== undefined) params.set("mortgage", mortgage.toString()); if (rentPercentage !== undefined) params.set("rentPercentage", rentPercentage.toString()); const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : ""}`; window.history.replaceState({}, "", newUrl); }, [mortgage, rentPercentage]); const calculateDeduction = () => { if (mortgage == null || rentPercentage == null) return { yearlyRent: "0", incomeDeduction: "0", taxSavings: "0", realRentPercentage: "0", }; const yearlyRent = mortgage * (rentPercentage / 100); const incomeDeduction = yearlyRent * (incomeTaxDeduction / 100); const taxSavings = incomeDeduction * (taxRate / 100); const realRentPercentage = ((yearlyRent - taxSavings) / mortgage) * 100; return { yearlyRent: formatNumber(yearlyRent), incomeDeduction: formatNumber(incomeDeduction), taxSavings: formatNumber(taxSavings), realRentPercentage: realRentPercentage.toFixed(2), }; }; const results = calculateDeduction(); const resetCalculator = () => { if (window.confirm("Er du sikker på at du vil tilbakestille kalkulatoren? Alle verdier vil bli slettet.")) { setMortgage(undefined); setRentPercentage(undefined); setIncomeTaxDeduction(22); setTaxRate(22); window.history.replaceState({}, "", window.location.pathname); } }; return (

Kalkulator for inntektsfradrag på boliglån

Boliglånsstørrelse (kr): setMortgage(e.target.value ? Number(e.target.value) : undefined)} />

Lånerente (%): setRentPercentage(e.target.value ? Number(e.target.value) : undefined)} />

Inntektsfradrag på rente (%): setIncomeTaxDeduction(Number(e.target.value))} />

Skattesats på alminnelig inntekt (%) : Personer betaler skatt av inntekt på to ulike skattegrunnlag. For det første betales en flat skatt av «alminnelig inntekt» fratrukket personfradrag og enkelte særfradrag. Alminnelig inntekt består av alle skattepliktige inntekter fratrukket fradrag.

For det andre betales trygdeavgift og trinnskatt av «personinntekt». Personinntekten består av lønns-, trygde- og pensjonsinntekt, uten fradrag. Også beregnet personinntekt for selvstendig næringsdrivende inngår i personinntekten.

Kilde:{" "} Regjeringen.no setTaxRate(Number(e.target.value))} />

Resultater og beregninger:

Årlig rente:

Boliglån × (Lånerente / 100) = Årlig rente

{mortgage ? formatNumber(mortgage) : 0} kr × {rentPercentage ?? 0}% = {results.yearlyRent} kr

Inntektsfradrag:

Årlig rente × {incomeTaxDeduction}% = Inntektsfradrag

{results.yearlyRent} kr × {incomeTaxDeduction}% = {results.incomeDeduction} kr

Skattebesparelse:

Inntektsfradrag × {taxRate}% = Skattebesparelse

{results.incomeDeduction} kr × {taxRate}% = {results.taxSavings} kr

Reell Lånerente:

((Årlig rente - Skattebesparelse) / Boliglån) × 100 = Reell Lånerente

(({results.yearlyRent} kr - {results.taxSavings} kr) / {mortgage ? formatNumber(mortgage) : 0} kr) × 100 = {" "} {results.realRentPercentage}%

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Kalkulator for inntektsfradrag på boliglån

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` :root { --bg-color: #f4f4f4; --container-bg: #fff; --text-color: #333; --link-color: #0066cc; --input-border: #ddd; --button-bg: #f0f0f0; --button-hover: #e0e0e0; --results-bg: #f0f0f0; --calculation-bg: #fff; --calculation-shadow: rgba(0, 0, 0, 0.1); --tooltip-bg: #f9f9f9; --tooltip-text: #333; --icon-color: #333; } body.dark-mode { --bg-color: #1a1a1a; --container-bg: #2a2a2a; --text-color: #f0f0f0; --link-color: #66b3ff; --input-border: #444; --button-bg: #3a3a3a; --button-hover: #4a4a4a; --results-bg: #3a3a3a; --calculation-bg: #2a2a2a; --calculation-shadow: rgba(255, 255, 255, 0.1); --tooltip-bg: #3a3a3a; --tooltip-text: #f0f0f0; --icon-color: #f0f0f0; } body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; } .container { max-width: 600px; margin: 2rem auto; padding: 2rem; background-color: var(--container-bg); border-radius: 5px; box-shadow: 0 2px 5px var(--calculation-shadow); } h1, h2, h3 { color: var(--text-color); } h1 { text-align: center; margin-bottom: 1.5rem; } .input-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--text-color); } input { width: 100%; padding: 0.5rem; font-size: 1rem; border: 1px solid var(--input-border); border-radius: 3px; box-sizing: border-box; background-color: var(--container-bg); color: var(--text-color); } .reset-button { display: block; width: 100%; padding: 0.5rem; font-size: 1rem; background-color: var(--button-bg); border: 1px solid var(--input-border); border-radius: 3px; cursor: pointer; margin-bottom: 1.5rem; color: var(--text-color); } .reset-button:hover { background-color: var(--button-hover); } .results { margin-top: 2rem; padding: 1rem; background-color: var(--results-bg); border-radius: 3px; } h2 { margin-top: 0; border-bottom: 2px solid var(--link-color); padding-bottom: 0.5rem; } .calculation { background-color: var(--calculation-bg); padding: 1rem; margin-bottom: 1rem; border-radius: 3px; box-shadow: 0 1px 3px var(--calculation-shadow); } .calculation h3 { margin-top: 0; color: var(--link-color); } .calculation p { margin: 0.5rem 0; color: var(--text-color); } footer { text-align: center; margin-top: 2rem; } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } .tooltip { position: relative; display: inline-block; cursor: help; margin-left: 5px; vertical-align: middle; } .tooltip .tooltiptext { visibility: hidden; width: 300px; background-color: var(--tooltip-bg); color: var(--tooltip-text); text-align: left; border-radius: 6px; padding: 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -150px; opacity: 0; transition: opacity 0.3s; font-weight: normal; font-size: 0.9em; line-height: 1.4; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .question-mark-icon { vertical-align: middle; } .question-mark-icon circle { stroke: var(--icon-color); } .question-mark-icon text { fill: var(--icon-color); } @media (max-width: 600px) { .container { margin: 1rem; padding: 1rem; } .tooltip .tooltiptext { width: 200px; margin-left: -100px; } } `;

mortgageDeductionCalculator