A sleek, modern, and powerful web-based calculator with PWA support. NuCalc Pro (“NuCalc”) brings a responsive, touch-friendly interface, keyboard integration, and installable offline functionality to your browser.
Live Web App: https://nucalc-app.vercel.app/.
- Basic arithmetic: add, subtract, multiply, divide
- Chain operations: e.g.
2 + 3 × 4 - Decimal support with proper formatting
- Sign toggle & backspace
- Keyboard shortcuts for all buttons
- Responsive layout with fluid sizing based on viewport
- Touch-friendly buttons with hover/press animations
- PWA support (installable, offline-capable)
- Modern theme with customizable color variables
- TypeScript (~5.6.2)
- Vite (^6.0.3)
- Vitest (^2.1.8) for testing
- Prettier (^3.5.3) for code formatting
- HTML5 for markup (
index.html) - CSS3 with custom theme (
styles.css,/themes/cocoa.css) - Intl API for number formatting
- Service Worker & manifest.json for PWA
/
├── index.html # Main HTML page
├── manifest.json # PWA manifest
├── img/
│ ├── favicon.ico
│ └── icons/
│ ├── icon-192x192.png
│ └── icon-512x512.png
├── src/
│ ├── main.ts # Entry point: wiring DOM ↔ Calculator logic
│ ├── calculator.ts # Calculator class implementation
│ ├── operation.ts # SupportedOperation enums & interface
│ └── utils.ts # displayTextToNumber, numberToDisplayText, reformat
├── styles.css # Base styles & layout
└── themes/
└── cocoa.css # Color overrides for Cocoa theme
-
Clone the repo
git clone https://github.com/hoangsonww/NuCalc-Calculator-App.git cd NuCalc-Calculator-App -
Install dependencies
npm install
-
Available Scripts
{ "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "test": "vitest run", "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,scss,md,html}\"" }, "devDependencies": { "typescript": "~5.6.2", "vite": "^6.0.3", "vitest": "^2.1.8" }, "dependencies": { "prettier": "^3.5.3" } } -
Run in development mode
npm run dev
- Opens a local server (e.g.
http://localhost:3000) with live reload.
- Opens a local server (e.g.
-
Build for production
npm run build
- Output is placed in
dist/. Deploy those files to your static hosting.
- Output is placed in
-
Preview production build
npm run preview
-
Run tests
npm run test -
Format code
npm run format
-
Install PWA
- Visit the site in Chrome/Edge/Safari (mobile or desktop).
- Click “Install” in the address bar or system prompt.
- Enjoy offline support!
- Calculator logic lives in
src/calculator.ts. All tests for edge cases (decimal entry, chaining, backspace) should be added there. - Operations are defined in
src/operation.ts. ExtendSupportedOperationand updateselectOperation()if you add new operators. - Styling is scoped to CSS variables in
themes/cocoa.css—override to create new color schemes without touching layout. - Keyboard handling is in
src/main.ts; add new shortcuts by listening ondocument.keydown. - Tests live alongside source files with
.spec.tsnaming. Run via Vitest.
-
Themes: Copy
themes/cocoa.css→themes/<your-theme>.css, update five CSS variables:#calculator { background-color: /* bg */; } .calculator-display-row { background-color: /* display bg */; } .calculator-button { background-color: /* digit bg */; } .system-button { background-color: /* sys bg */; } .operation-button { background-color: /* op bg */; }
-
Fonts: Change the Google Fonts link in the
<head>ofindex.html. -
Icons: Replace
img/icons/icon-*.pngto update PWA icon sets.
This project includes a sample Ruby on Rails API for demonstration purposes. The API is not fully functional and is provided as a reference for integrating with a backend service.
To run the API, follow these steps:
-
Ensure you have Ruby and Rails installed on your machine.
-
Navigate to the
apidirectory:cd api -
Install the required gems:
bundle install
-
Start the Rails server:
rails server
-
The API will be available at
http://localhost:3000. -
You can test the API endpoints using tools like Postman or cURL.
-
The API is a simple RESTful service that can be used to demonstrate how to integrate with a backend service.
- Fork the repo
- Create a feature branch (
git checkout -b feature/my-feature) - Commit your changes (
git commit -m "Add my feature") - Push to your fork (
git push origin feature/my-feature) - Open a Pull Request
Please follow the existing code style and add tests for new functionality.
Distributed under the MIT License. See LICENSE for details.
Big thanks to Prof. Ajay Gandecha at UNC-Chapel Hill for the inspiration and base structure of this project. This calculator would not be possible without the foundational work done in his course.