Kalkulator for inntektsfradrag på boliglån

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

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

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

\n \n Skattesats på alminnelig inntekt (%)\n \n :\n \n Personer betaler skatt av inntekt på to ulike skattegrunnlag. For det første betales en flat skatt av\n «alminnelig inntekt» fratrukket personfradrag og enkelte særfradrag. Alminnelig inntekt består av alle\n skattepliktige inntekter fratrukket fradrag.\n
\n
\n For det andre betales trygdeavgift og trinnskatt av «personinntekt». Personinntekten består av lønns-,\n trygde- og pensjonsinntekt, uten fradrag. Også beregnet personinntekt for selvstendig næringsdrivende\n inngår i personinntekten.\n
\n
\n Kilde:{\" \"}\n \n Regjeringen.no\n \n \n \n \n setTaxRate(Number(e.target.value))}\n />\n

\n \n

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

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

\n \n

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n:root {\n --bg-color: #f4f4f4;\n --container-bg: #fff;\n --text-color: #333;\n --link-color: #0066cc;\n --input-border: #ddd;\n --button-bg: #f0f0f0;\n --button-hover: #e0e0e0;\n --results-bg: #f0f0f0;\n --calculation-bg: #fff;\n --calculation-shadow: rgba(0, 0, 0, 0.1);\n --tooltip-bg: #f9f9f9;\n --tooltip-text: #333;\n --icon-color: #333;\n}\n\nbody.dark-mode {\n --bg-color: #1a1a1a;\n --container-bg: #2a2a2a;\n --text-color: #f0f0f0;\n --link-color: #66b3ff;\n --input-border: #444;\n --button-bg: #3a3a3a;\n --button-hover: #4a4a4a;\n --results-bg: #3a3a3a;\n --calculation-bg: #2a2a2a;\n --calculation-shadow: rgba(255, 255, 255, 0.1);\n --tooltip-bg: #3a3a3a;\n --tooltip-text: #f0f0f0;\n --icon-color: #f0f0f0;\n}\n\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: var(--bg-color);\n color: var(--text-color);\n transition: background-color 0.3s, color 0.3s;\n}\n\n.container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 2rem;\n background-color: var(--container-bg);\n border-radius: 5px;\n box-shadow: 0 2px 5px var(--calculation-shadow);\n}\n\nh1, h2, h3 {\n color: var(--text-color);\n}\n\nh1 {\n text-align: center;\n margin-bottom: 1.5rem;\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: bold;\n color: var(--text-color);\n}\n\ninput {\n width: 100%;\n padding: 0.5rem;\n font-size: 1rem;\n border: 1px solid var(--input-border);\n border-radius: 3px;\n box-sizing: border-box;\n background-color: var(--container-bg);\n color: var(--text-color);\n}\n\n.reset-button {\n display: block;\n width: 100%;\n padding: 0.5rem;\n font-size: 1rem;\n background-color: var(--button-bg);\n border: 1px solid var(--input-border);\n border-radius: 3px;\n cursor: pointer;\n margin-bottom: 1.5rem;\n color: var(--text-color);\n}\n\n.reset-button:hover {\n background-color: var(--button-hover);\n}\n\n.results {\n margin-top: 2rem;\n padding: 1rem;\n background-color: var(--results-bg);\n border-radius: 3px;\n}\n\nh2 {\n margin-top: 0;\n border-bottom: 2px solid var(--link-color);\n padding-bottom: 0.5rem;\n}\n\n.calculation {\n background-color: var(--calculation-bg);\n padding: 1rem;\n margin-bottom: 1rem;\n border-radius: 3px;\n box-shadow: 0 1px 3px var(--calculation-shadow);\n}\n\n.calculation h3 {\n margin-top: 0;\n color: var(--link-color);\n}\n\n.calculation p {\n margin: 0.5rem 0;\n color: var(--text-color);\n}\n\nfooter {\n text-align: center;\n margin-top: 2rem;\n}\n\na {\n color: var(--link-color);\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\n.tooltip {\n position: relative;\n display: inline-block;\n cursor: help;\n margin-left: 5px;\n vertical-align: middle;\n}\n\n.tooltip .tooltiptext {\n visibility: hidden;\n width: 300px;\n background-color: var(--tooltip-bg);\n color: var(--tooltip-text);\n text-align: left;\n border-radius: 6px;\n padding: 10px;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n margin-left: -150px;\n opacity: 0;\n transition: opacity 0.3s;\n font-weight: normal;\n font-size: 0.9em;\n line-height: 1.4;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n}\n\n.tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n}\n\n.question-mark-icon {\n vertical-align: middle;\n}\n\n.question-mark-icon circle {\n stroke: var(--icon-color);\n}\n\n.question-mark-icon text {\n fill: var(--icon-color);\n}\n\n@media (max-width: 600px) {\n .container {\n margin: 1rem;\n padding: 1rem;\n }\n \n .tooltip .tooltiptext {\n width: 200px;\n margin-left: -100px;\n }\n}\n`;",[],[170],"files",[148,168],"counts",{"_181":31,"_182":156,"_183":31,"_184":31},"pulls","branches","forks","envVars","contents",[187,190],{"_105":149,"_98":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":119,"_107":188,"_102":31,"_159":160,"_161":162,"_163":27,"_164":-5,"_101":189},["D",1728587176557],[150],{"_105":169,"_98":170,"_151":117,"_153":-5,"_154":138,"_155":137,"_157":119,"_107":191,"_102":172,"_159":173,"_161":174,"_163":27,"_164":-5,"_101":192},["D",1729276614274],[170],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_96":97,"_98":99,"_100":-7,"_102":-7,"_103":198,"_185":202,"_207":208,"_211":212,"_193":-5,"_215":-5},{"_105":106,"_98":99,"_107":199,"_109":-5,"_110":27,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":117,"_118":119,"_120":-5,"_121":31,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":27,"_21":200,"_135":201},["D",1746280577700],{"_96":97,"_133":134},{"_102":137,"_98":42,"_105":138,"_139":106,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":99,"_145":97},[203,205],{"_105":149,"_98":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":119,"_107":188,"_102":31,"_159":160,"_161":162,"_163":27,"_164":-5,"_101":204},[150],{"_105":169,"_98":170,"_151":117,"_153":-5,"_154":138,"_155":137,"_157":119,"_107":191,"_102":172,"_159":173,"_161":174,"_163":27,"_164":-5,"_101":206},[170],"readme",{"_105":149,"_98":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":119,"_107":209,"_102":31,"_159":160,"_161":162,"_163":27,"_164":-5,"_101":210},["D",1728587176557],[150],"pinned",{"_105":169,"_154":138,"_151":117,"_98":170,"_161":174,"_159":173,"_102":172,"_153":-5,"_107":213,"_155":137,"_164":-5,"_101":214},["D",1729276614274],[170],"pull","routes/_app","actionData","errors"]