Loading repository data…
Loading repository data…
hoangsonww / repository
🧮 A sleek, modern web-based calculator with PWA support and built with Vite, offering responsive touch and keyboard controls. It features real-time formatting, chained operations, and offline installability for effortless calculations anywhere.
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/.
2 + 3 × 4index.html)styles.css, /themes/cocoa.css)/
├── 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
http://localhost:3000) with live reload.Build for production
npm run build
dist/. Deploy those files to your static hosting.Preview production build
npm run preview
Run tests
npm run test
Format code
npm run format
Install PWA
src/calculator.ts. All tests for edge cases (decimal entry, chaining, backspace) should be added there.src/operation.ts. Extend SupportedOperation and update selectOperation() if you add new operators.themes/cocoa.css—override to create new color schemes without touching layout.src/main.ts; add new shortcuts by listening on document.keydown..spec.ts naming. 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> of index.html.
Icons: Replace img/icons/icon-*.png to 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 api directory:
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.
git checkout -b feature/my-feature)git commit -m "Add my feature")git push origin feature/my-feature)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.