How I built a set of free salary calculators with R

I recently built <a href="https://salarypaytools.com/" rel="noopener noreferrer">SalaryPayTools</a>, a small site of free US pay calculators. Here is a short write-up of how it is put together and what I learned. <h2>

What it does

</h2> There are 14 calculators: hourly to salary and salary to hourly, annual income, weekly, biweekly and monthly pay, part-time pay, overtime, pay raise, a basic 2026 federal income tax estimate, and 2026 take-home pay for four states (Texas, Arkansas, Illinois and North Carolina). They are free and need no signup. <h2>

The stack

</h2> React + Vite + TypeScript. Vite keeps the dev loop fast, and TypeScript helps because many pay-calculator bugs are unit mix-ups: hourly vs. annual, weekly vs. biweekly, a percentage stored as 5 instead of 0.05. <h2>

Keep the math in plain functions

</h2> The calculators are mostly forms on top of small, pure functions. A simplified sketch of the idea (not the site's exact code): <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code>type HourlyInput = { rate: number; hoursPerWeek: number; weeksPerYear: number; overtimeHours: number; overtimeMultiplier: number; // 1.5 for time-and-a-half };

export function annualGross(i: HourlyInput): number { const weekly = i.rate i.hoursPerWeek + i.rate i.overtimeHours i.overtimeMultiplier; return weekly i.weeksPerYear; } </code></pre>

</div> Functions like this are easy to test with known answers before any UI exists. For example, $20 an hour × 40 hours × 52 weeks should always give $41,600. <h2>

Show the formula next to the answer

</h2> Every result on the site shows how it was calculated, e.g. <code>($20.00 × 40) × 52 paid weeks</code>. A number you can't check is hard to trust, so the formula is always right there. <h2>

One page per calculator

</h2> Each calculator has its own URL and its own HTML page with the content already in it, so the page isn't empty before JavaScript loads. That helps both search engines and slow phones. <h2>

Be clear about scope

</h2> The federal tax tool is a basic estimate, and take-home pay is only for the four states above. I'd rather say that plainly than pretend to cover everything. If you want to try it or check my math: <a href="https://salarypaytools.com/" rel="noopener noreferrer">salarypaytools.com</a>. Feedback is welcome.

Original source

Read the original article on dev.to

What it does

The stack

Keep the math in plain functions

</div> Functions like this are easy to test with known answers before any UI exists. For example, $20 an hour × 40 hours × 52 weeks should always give $41,600. <h2>

Show the formula next to the answer

One page per calculator

Be clear about scope

Original source

Read the original article on dev.to

How I built a set of free salary calculators with React, Vite and TypeScript

Original source

Tags

Related Articles

Sources: Missouri RB Hardy, shot in offseason, to return vs. Arkansas

Red Wings suspend Larkin as team explores trade options; players keen to move on

Packers' Jacobs says TD celebration was ode to gospel song, not mocking arrest

Israel faces weeks of coalition haggling as Netanyahu’s party claims election 'stolen'

Herdr has released native app

Satellite vs Fiber Internet: ഇന്ത്യയുടെ ഇന്റർനെറ്റ് വിപ്ലവത്തിന് ആര് മികച്ചത്?

Comments (0)

How I built a set of free salary calculators with React, Vite and TypeScript

Original source

Tags

Related Articles

Sources: Missouri RB Hardy, shot in offseason, to return vs. Arkansas

Red Wings suspend Larkin as team explores trade options; players keen to move on

Packers' Jacobs says TD celebration was ode to gospel song, not mocking arrest

Israel faces weeks of coalition haggling as Netanyahu’s party claims election 'stolen'

Herdr has released native app

Satellite vs Fiber Internet: ഇന്ത്യയുടെ ഇന്റർനെറ്റ് വിപ്ലവത്തിന് ആര് മികച്ചത്?

Comments (0)