\n onChange(index, \"start\", value)}\n placeholder=\"hhmm\"\n />\n onChange(index, \"end\", value)}\n placeholder=\"hhmm\"\n />\n {duration}\n onChange(index, \"subtractFullDay\", e.target.checked)}\n />\n

\n );\n}\n\nfunction calculateTimeDifference(start, end, subtractFullDay, fullDayHours) {\n if (start.length !== 4 || end.length !== 4) return \"\";\n \n const startHours = parseInt(start.slice(0, 2));\n const startMinutes = parseInt(start.slice(2, 4));\n const endHours = parseInt(end.slice(0, 2));\n const endMinutes = parseInt(end.slice(2, 4));\n \n const startTotalMinutes = startHours * 60 + startMinutes;\n const endTotalMinutes = endHours * 60 + endMinutes;\n \n let diff = endTotalMinutes - startTotalMinutes;\n if (diff < 0) diff += 24 * 60;\n \n if (subtractFullDay) {\n diff -= fullDayHours * 60;\n }\n \n const sign = diff < 0 ? '-' : '';\n const absDiff = Math.abs(diff);\n const hours = Math.floor(absDiff / 60);\n const minutes = absDiff % 60;\n \n return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n}\n\nfunction calculateTotalDuration(rows, fullDayHours) {\n let totalMinutes = 0;\n rows.forEach(row => {\n const duration = calculateTimeDifference(row.start, row.end, row.subtractFullDay, fullDayHours);\n if (duration) {\n const sign = duration.startsWith('-') ? -1 : 1;\n const [hours, minutes] = duration.replace('-', '').split(':').map(Number);\n totalMinutes += sign * (hours * 60 + minutes);\n }\n });\n const sign = totalMinutes < 0 ? '-' : '';\n const absTotalMinutes = Math.abs(totalMinutes);\n const hours = Math.floor(absTotalMinutes / 60);\n const minutes = absTotalMinutes % 60;\n return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n}\n\nfunction saveToQueryParams(rows, fullDayHours) {\n const params = new URLSearchParams();\n params.append('fullDayHours', fullDayHours);\n rows.forEach((row, index) => {\n if (row.start) params.append(`start${index}`, row.start);\n if (row.end) params.append(`end${index}`, row.end);\n params.append(`subtractFullDay${index}`, row.subtractFullDay);\n });\n window.history.replaceState({}, '', `${window.location.pathname}?${params}`);\n}\n\nfunction loadFromQueryParams() {\n const params = new URLSearchParams(window.location.search);\n const rows = [];\n let index = 0;\n while (params.has(`start${index}`) || params.has(`end${index}`)) {\n rows.push({\n start: params.get(`start${index}`) || \"\",\n end: params.get(`end${index}`) || \"\",\n subtractFullDay: params.get(`subtractFullDay${index}`) === 'true'\n });\n index++;\n }\n return {\n rows: rows.length > 0 ? rows : [{ start: \"\", end: \"\", subtractFullDay: false }],\n fullDayHours: parseInt(params.get('fullDayHours')) || 8\n };\n}\n\nfunction App() {\n const [rows, setRows] = useState([{ start: \"\", end: \"\", subtractFullDay: false }]);\n const [fullDayHours, setFullDayHours] = useState(8);\n\n useEffect(() => {\n const { rows: loadedRows, fullDayHours: loadedFullDayHours } = loadFromQueryParams();\n setRows(loadedRows);\n setFullDayHours(loadedFullDayHours);\n }, []);\n\n const handleChange = (index, field, value) => {\n const newRows = [...rows];\n newRows[index][field] = value;\n setRows(newRows);\n saveToQueryParams(newRows, fullDayHours);\n };\n\n const addRow = () => {\n const newRows = [...rows, { start: \"\", end: \"\", subtractFullDay: false }];\n setRows(newRows);\n saveToQueryParams(newRows, fullDayHours);\n };\n\n const handleFullDayHoursChange = (e) => {\n const value = parseInt(e.target.value) || 0;\n setFullDayHours(value);\n saveToQueryParams(rows, value);\n };\n\n return (\n

Time Calculator

\n Full day hours: \n \n

\n Start Time\n End Time\n Duration\n Subtract Full Day\n

\n {rows.map((row, index) => (\n \n ))}\n \n

Total Rows: {rows.length}

Total Duration: {calculateTotalDuration(rows, fullDayHours)}

\n Shareable Link:\n {window.location.href}\n

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

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n.app {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n width: 100%;\n max-width: 600px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.full-day-hours {\n margin-bottom: 20px;\n}\n\n.time-row {\n display: flex;\n margin-bottom: 10px;\n justify-content: space-between;\n align-items: center;\n}\n\n.time-row.header {\n font-weight: bold;\n margin-bottom: 15px;\n}\n\n.time-row.header span {\n flex: 1;\n text-align: center;\n}\n\ninput[type=\"text\"], input[type=\"number\"] {\n width: 60px;\n padding: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n text-align: center;\n}\n\n.duration {\n width: 60px;\n text-align: center;\n}\n\n.duration.negative {\n color: red;\n}\n\nbutton {\n display: block;\n margin: 20px auto 0;\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n.summary {\n margin-top: 20px;\n text-align: right;\n font-weight: bold;\n}\n\n.share-link {\n margin-top: 20px;\n font-size: 0.9em;\n}\n\n.share-link a {\n display: block;\n word-break: break-all;\n}\n`;",["D",1729337857770],"version",7,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","@jsxImportSource https://esm.sh/react","latestEvaluation","slug","mikaello/timeCalculator","versions",[157,161,165,169,173,177,180,183],{"_98":158,"_139":140,"_159":160},["D",1729337857770],"n","1",{"_98":162,"_139":163,"_159":164},["D",1729337699739],6,"2",{"_98":166,"_139":167,"_159":168},["D",1729337094922],5,"3",{"_98":170,"_139":171,"_159":172},["D",1729336920748],4,"4",{"_98":174,"_139":175,"_159":176},["D",1729336810453],3,"5",{"_98":178,"_139":90,"_159":179},["D",1729336509349],"6",{"_98":181,"_139":109,"_159":182},["D",1729336299089],"7",{"_98":184,"_139":31,"_159":185},["D",1729336109848],"8",{"_120":187,"_122":188},"b9b6f5d2-873a-11ef-a7c3-de64eea55b61",{"_124":189,"_126":95,"_120":187,"_127":-5,"_105":-5,"_128":129,"_130":190,"_131":132,"_133":191,"_135":26,"_94":191,"_136":192,"_98":193,"_139":194,"_141":26,"_107":31,"_142":31,"_143":31,"_144":31,"_108":31,"_145":31,"_146":-5,"_20":195,"_148":-5,"_149":-7,"_150":190,"_152":-5,"_153":196,"_155":197},"mortgageDeductionCalculator","Calculator to see what the real rent on your mortgage is when calculating the income deduction, to make it easier to compare this rent to other rents.","f2a0e240-8d7f-11ef-a1d4-de64eea55b61","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction formatNumber(num: number): string {\n return num.toLocaleString(\"no-NO\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n}\n\nfunction QuestionMarkIcon() {\n return (\n \n );\n}\n\nfunction App() {\n const [mortgage, setMortgage] = useState(undefined);\n const [rentPercentage, setRentPercentage] = useState(undefined);\n const [incomeTaxDeduction, setIncomeTaxDeduction] = useState(22);\n const [taxRate, setTaxRate] = useState(22);\n const [darkMode, setDarkMode] = useState(false);\n\n useEffect(() => {\n const darkModeMediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n setDarkMode(darkModeMediaQuery.matches);\n\n const handleColorSchemeChange = (e: MediaQueryListEvent) => {\n setDarkMode(e.matches);\n };\n\n darkModeMediaQuery.addEventListener(\"change\", handleColorSchemeChange);\n\n return () => {\n darkModeMediaQuery.removeEventListener(\"change\", handleColorSchemeChange);\n };\n }, []);\n\n useEffect(() => {\n document.body.className = darkMode ? \"dark-mode\" : \"\";\n }, [darkMode]);\n\n useEffect(() => {\n const params = new URLSearchParams(window.location.search);\n const mortgageParam = params.get(\"mortgage\");\n const rentPercentageParam = params.get(\"rentPercentage\");\n\n if (mortgageParam) setMortgage(Number(mortgageParam));\n if (rentPercentageParam) setRentPercentage(Number(rentPercentageParam));\n }, []);\n\n useEffect(() => {\n const params = new URLSearchParams();\n if (mortgage !== undefined) params.set(\"mortgage\", mortgage.toString());\n if (rentPercentage !== undefined) params.set(\"rentPercentage\", rentPercentage.toString());\n\n const newUrl = `${window.location.pathname}${params.toString() ? `?${params.toString()}` : \"\"}`;\n window.history.replaceState({}, \"\", newUrl);\n }, [mortgage, rentPercentage]);\n\n const calculateDeduction = () => {\n if (mortgage == null || rentPercentage == null)\n return {\n yearlyRent: \"0\",\n incomeDeduction: \"0\",\n taxSavings: \"0\",\n realRentPercentage: \"0\",\n };\n\n const yearlyRent = mortgage * (rentPercentage / 100);\n const incomeDeduction = yearlyRent * (incomeTaxDeduction / 100);\n const taxSavings = incomeDeduction * (taxRate / 100);\n const realRentPercentage = ((yearlyRent - taxSavings) / mortgage) * 100;\n\n return {\n yearlyRent: formatNumber(yearlyRent),\n incomeDeduction: formatNumber(incomeDeduction),\n taxSavings: formatNumber(taxSavings),\n realRentPercentage: realRentPercentage.toFixed(2),\n };\n };\n\n const results = calculateDeduction();\n\n const resetCalculator = () => {\n if (window.confirm(\"Er du sikker på at du vil tilbakestille kalkulatoren? Alle verdier vil bli slettet.\")) {\n setMortgage(undefined);\n setRentPercentage(undefined);\n setIncomeTaxDeduction(22);\n setTaxRate(22);\n window.history.replaceState({}, \"\", window.location.pathname);\n }\n };\n\n return (\n

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`;",["D",1729276614274],29,{"_96":97,"_101":102},"mikaello/mortgageDeductionCalculator",[198,200,203,206,209,212,215,218,221,225],{"_98":199,"_139":194,"_159":160},["D",1729276614274],{"_98":201,"_139":202,"_159":164},["D",1729276512249],28,{"_98":204,"_139":205,"_159":168},["D",1729276208341],27,{"_98":207,"_139":208,"_159":172},["D",1729273510688],26,{"_98":210,"_139":211,"_159":176},["D",1729272619319],25,{"_98":213,"_139":214,"_159":179},["D",1729272423225],24,{"_98":216,"_139":217,"_159":182},["D",1729272280801],23,{"_98":219,"_139":220,"_159":185},["D",1729272087215],22,{"_98":222,"_139":223,"_159":224},["D",1729272076873],21,"9",{"_98":226,"_139":227,"_159":228},["D",1729271616928],20,"10","hasNext","filters",{"_232":233,"_234":235,"_128":129},"sort","newest","type","all","routes/_app","actionData","errors"]