A beautifully crafted salary hike calculator for professionals navigating appraisals, job offers, and long-term career growth.
Every professional faces the same friction during appraisal season — scattered spreadsheets, mental math, and no easy way to compare multiple offers side by side. SalaryHike Calculator solves this with a clean, single-file web app that runs entirely in your browser. No sign-up. No server. No data leaves your device.
Note: An internet connection is required to load Chart.js and Google Fonts from CDN.
Whether you're evaluating a 15% hike from your current employer, comparing three competing job offers, or planning where your salary will be in five years — this tool handles it all with clarity and elegance.
Instantly compute your new salary using either a percentage hike or a fixed amount increase. Toggle between monthly and annual salary modes to match how you think about your compensation. The result panel shows:
- New salary (monthly or annual)
- Hike amount in absolute rupees
- Hike percentage — even when you entered a flat amount
- Annual gain — the total uplift across 12 months
- A visual base vs. hike breakdown bar so you can see the ratio at a glance
Stop juggling tabs and mental arithmetic. Add multiple job offers with their respective base salaries and hike percentages. The comparator renders a grouped bar chart showing base vs. post-hike salary for every offer — making the best choice visually obvious. Offers can be named, color-coded, and removed on the fly.
Pain point solved: Comparing "₹1.8L base + 20% hike" vs "₹1.5L base + 35% hike" is non-trivial in your head. This makes it instant.
Enter a projected annual hike rate and see a 5-year salary trajectory — both as a smooth line chart and a detailed table. Each year shows monthly salary, annual salary, and absolute gain over your current pay. The current year is highlighted so your baseline is always visible.
Pain point solved: Most people underestimate compounding. This makes the long-term impact of negotiating even 2–3% more today viscerally clear.
Add screenshots of the Calculator, Compare, and Growth tabs here.
| Calculator | Compare | Growth |
|---|---|---|
 |
 |
 |
No build step. No dependencies. No npm install.
Try it live → devesh-69.github.io/HikeCalc
Or run it locally:
# Clone the repository
git clone https://github.com/devesh-69/HikeCalc.git
# Open directly in your browser
open salary-hike-calculator.htmlOr simply download the HTML file and open it. That's it.
- Choose Monthly or Annual mode using the toggle in the header.
- Enter your current salary.
- Select Amount or Percent to specify how your hike is expressed.
- Enter the hike value — results update in real time.
- Navigate to the Compare tab.
- Enter the base salary, hike percentage, and an optional label for each offer.
- Tap Add — the offer appears in the list and the bar chart updates instantly.
- Remove any offer with the × button.
- Navigate to the Growth tab.
- Your current salary carries over from the Calculator tab.
- Adjust the annual hike rate to model optimistic or conservative scenarios.
- Read the 5-year table and chart to plan ahead.
The UI is built on a warm, editorial palette designed to feel calm and trustworthy — the opposite of the anxious, neon-drenched dashboards common in fintech.
| Token | Hex | Usage |
|---|---|---|
--cream |
#faf8f4 |
App background |
--white |
#ffffff |
Cards, inputs |
--ink |
#1c1917 |
Primary text, active states |
--sage |
#4a7c59 |
Positive values, growth, CTA |
--rust |
#c05621 |
Hike amounts, accent highlights |
--sky |
#2563a8 |
Informational, secondary accent |
--gold |
#b45309 |
Warnings, tertiary accent |
Typography uses Lora (serif) for figures and brand moments, paired with DM Sans for UI labels and body copy — a combination that feels editorial without being stiff.
| Attribute | Detail |
|---|---|
| Architecture | Single HTML file — zero build tooling |
| Runtime dependencies | Chart.js 4.4.1 via CDN |
| Fonts | Google Fonts (Lora + DM Sans) |
| Data persistence | None — stateless by design |
| Privacy | 100% client-side; no data sent anywhere |
| Mobile | Fully responsive, sticky header + fixed bottom nav |
| Browser support | All modern browsers (Chrome, Firefox, Safari, Edge) |
Contributions are welcome and appreciated. Please open an issue first to discuss significant changes before submitting a pull request.
# Fork and clone
git clone https://github.com/devesh-69/HikeCalc.git
# Create a feature branch
git checkout -b feat/your-feature-name
# Make your changes, then open a PRPlease keep the single-file architecture intact for zero-install simplicity. If adding new features, follow the existing color system and typography conventions.
Released under the MIT License. Free to use, modify, and distribute — personal or commercial.
Made with care for professionals who deserve clarity at appraisal time. · Report a bug · Request a feature