In this showcase post, I’ll walk you through how I designed and built a web-based NHS Pay & Salary Calculator application using fundamental web technologies: HTML, CSS, and JavaScript.
Calculating UK NHS Agenda for Change (AfC) pay bands, take-home pay, tax deductions, and pension contributions involves structured logic and clear UI presentation. Building this project was a fantastic exercise in turning Figma UI/UX prototypes into functional, responsive web tools.
Technologies & Tools Used
Figma – For wireframing, layout grid setups, UI components, and design system design.
HTML5 – For structuring the salary calculator controls, input fields, and pay band dropdowns.
CSS3 (Flexbox & Grid) – For crafting a clean, modern, and mobile-responsive layout.
JavaScript (ES6) – For dynamic DOM updates, input validation, and formula processing.
- Prototyping & Figma UI Design Before writing any code, I created a full visual prototype in Figma: Designed custom card layouts to display Gross Pay, Net Pay, Pension Brackets, and National Insurance (NI) Deductions. Built accessible input elements (sliders, band selection menus, and work-hours toggles). Tested color contrast and visual hierarchy to ensure public sector users could digest complex pay scales easily.
- HTML Structure The structure relies on semantic HTML input forms: A dropdown menu to choose specific NHS Pay Bands (Band 2 through Band 9). An field for entering hours worked per week. A results container featuring structured output cards to display calculated take-home pay.
- CSS Styling & Layout To make the financial dashboard readable and visually engaging: Flexbox & Grid Systems center the calculator container across mobile and desktop screens. CSS Custom Properties (Variables) allow easy theme adjustments between light and dark modes. Soft Shadows & Card UI Components highlight key monetary outputs (e.g., monthly and annual take-home breakdowns).
- JavaScript Calculation Logic Input Handling & State Management When a user selects their pay band or alters their working hours, an eventListener triggers an updated computation: JavaScript const payBandSelect = document.getElementById('payBand'); payBandSelect.addEventListener('change', updateSalaryCalculation);
Formula & Bracket Mapping
Unlike basic arithmetic calculators, a pay scale calculator maps user inputs against fixed public sector wage tiers:
JavaScript
function calculateTakeHome(grossSalary) {
let taxRate = 0.20; // Standard UK income tax rate
let estimatedTax = grossSalary * taxRate;
let netSalary = grossSalary - estimatedTax;
return netSalary;
}
- Key Features of the App Fixed NHS Band Selection: Direct mapping across official AfC salary brackets. Real-time Output Updates: Dynamic JavaScript execution instantly updates tax and pension estimates upon input change. Responsive Card UI: Clean layout adapted directly from modern UI design guidelines. Live Web Reference: You can explore the fully functional live implementation and breakdown charts on http://nhspayscale.co.uk.
- Challenges Faced Handling Complex Pay Structure Mapping: Accounting for varying pension contribution brackets based on total earnings. DOM Manipulations: Updating multiple output fields simultaneously without triggering UI lag or rendering issues. Translating Figma Components to Clean Code: Ensuring CSS pixel alignment matched the original Figma component dielines and paddings.
- What I Learned Bridging the gap between Figma UI/UX design and functional front-end code. Working with complex conditional statements in JavaScript to map public wage tiers. Building utility-first web tools that deliver immediate value to end users.
- Conclusion Building front-end calculation utilities based on official datasets is one of the best ways to practice web development and UI engineering. Check out the live build at http://nhspayscale.co.uk to see how clean design and straightforward JavaScript logic combine to form a useful public web tool!
Top comments (0)