A modern neumorphic calculator built with TypeScript and Vite
ProductivityTypeScript · CSSGitHub @TamarMosheevOnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
GitHub star growth between the latest completed 8-hour observations
DeepSeek Harness Remote can securely connect a phone or another computer to the computer where you run DeepSeek Harness, so you can continue your work anytime and anywhere, check progress anytime, and continue working.
AI translation
Open-source, local-first task manager that works offline, syncs every device, runs on a Raspberry Pi, and requires no subscription.
AI translation
Open-source, self-hosted webmail built on JMAP. Email, calendar, contacts, and files in one interface for Stalwart Mail Server.
Open Source Office suite for users used to MS Office - multi-platform, tuned for performance
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
The maker's introduction consists of the line above. Read the repository README for more details. Repository README ↗
Loading the full README.
Read the full README ↗Try the Live Calculator · Screenshots · Features · Getting started
A calculator with a soft neumorphic interface, written in strict TypeScript with no UI framework. It offers two calculators in one page: a NORMAL calculator that evaluates left to right like a classic pocket calculator, and a PRO calculator with real operator precedence, parentheses, squares and square roots. Both show the result live while you type, and both are fully usable from the mouse or the keyboard.
The project is built as an exercise in clean, testable design: calculation logic is completely separate from the DOM, and the whole thing is covered by an automated test suite.
Hosted on Vercel. Switch between NORMAL and PRO, and between LIGHT and DARK, with the two toggles above the calculator; your choice is remembered on that device.
Real screenshots of the running app. The large display shows the live result before = is pressed.
| LIGHT | DARK | |
|---|---|---|
NORMAL2 + 3 × 4 → 20 (left to right) | ||
PRO2 + 3 × (4 + √16) → 26 (precedence, parentheses, √) |
Two calculators
2 + 3 × 4 = 20.2 + 3 × 4 = 14.5 + 2 and the large display already shows 7, with no = needed. While you type a single number it is shown exactly as typed (5., 0.50). An unfinished expression (5 +, (5 + 3) keeps showing the last valid value instead of an early error.2 + 3 × 4, and 2 + 3 × 4 = once finished). Long expressions scroll and keep the newest part in view.PRO extras
((1 + 2) × (3 + 4)) = 21.x²) and square root (√).5 × -(2 + 3) = -25.2(3) becomes 2 × (3).Error when you press =, never silently repaired.Shared behavior
Digits, decimal point, + − × ÷, AC, +/- and % with contextual percentage rules:
| Keys | Result |
|---|---|
50 % | 0.5 |
200 + 10 % = | 220 |
200 - 10 % = | 180 |
200 × 10 % = | 20 |
200 ÷ 10 % = | 2000 |
Numbers are limited to 15 digits. Values keep full precision internally and are rounded only for display, so 0.1 + 0.2 = 0.3. Integers are exact up to 2^53; larger results use exponent notation (for example 9.999999998e+19).
Division by zero, √ of a negative number and overflow show Error; the next digit or AC recovers.
Interface
localStorage (only these two preferences are stored, never the calculation). Invalid or unavailable storage falls back to the defaults. A saved dark theme or PRO mode is applied before the first paint to avoid a flash of the wrong look.Keyboard input
| Key | Action |
|---|---|
0–9, . | Digits and decimal point |
+ - * / | Operators (- also starts a negative number in PRO) |
Enter or = | Equals |
Escape | AC |
% | Percent |
( ) | Parentheses (PRO only) |
Keys are ignored while typing in a text field and when Ctrl, Cmd or Alt is held, so browser shortcuts keep working. There are no keyboard shortcuts for x² and √.
Taken from package.json; there are no runtime dependencies.
strict mode, with unused locals and parameters treated as errorsCalculation code never touches the DOM. Rendering, input handling, settings and calculation each live in their own small classes, wired together in one place.
src/
├── main.ts # entry point
├── calculator/ # calculation logic (no DOM)
│ ├── BasicCalculator.ts # interface both calculators implement
│ ├── CalculatorEngine.ts # NORMAL rules as state transitions
│ ├── CalculatorState.ts # typed state model and display/preview text
│ ├── NormalCalculator.ts # engine + the expression entered on it
│ ├── Operator.ts, NumberEntry.ts, NumberFormatter.ts
│ └── pro/ # PRO: tokens, evaluator, formatter, calculator
├── classes/ # CalculatorApp (composition root), InputHandler
├── ui/ # CalculatorUI (rendering), DisplayFitter
├── settings/ # CalculatorModeSetting, PreferenceStore, UserPreferences
├── themes/ # ThemeManager
└── styles/style.css # layout and both themes
| Class | Responsibility |
|---|---|
CalculatorApp | Composition root. Connects input, the active calculator, the UI, the settings and the saved preferences, and owns the start/dispose lifecycle. |
BasicCalculator | The interface (displayValue, expressionText, digits, operators, =, AC…) that lets the app drive either calculator the same way. |
CalculatorEngine, CalculatorState | NORMAL rules as transitions between typed states (entering, awaitingOperand, result, error), including the left-to-right live preview. |
NormalCalculator | Wraps the engine and records the expression for display. It never calculates by itself. |
ProCalculator | Turns key presses into expression tokens and refuses key presses that would build a malformed expression. |
ExpressionEvaluator | A pure recursive-descent parser for PRO expressions (precedence, parentheses, x², √, unary minus). No eval. |
ExpressionFormatter | Turns tokens into the expression text. |
Operator, NumberEntry, NumberFormatter | Shared operator table and percent rule, number typing rules, and display formatting. |
InputHandler | Converts clicks and key presses into typed callbacks; removes all its listeners in dispose(). |
CalculatorUI, DisplayFitter | Render the display, expression line and toggles; shrink the font only when text overflows. |
CalculatorModeSetting, ThemeManager | The two independent settings. Neither knows about the other. |
PreferenceStore, UserPreferences | Safe localStorage access and the two typed, validated preferences. |
calculator/, rendering in CalculatorUI, events in InputHandler, persistence in settings/. The mode and theme settings are separate classes, and tests check that they import nothing and know nothing of each other.NormalCalculator only tracks the expression and leaves every number to CalculatorEngine.CalculatorApp, ProCalculator, ThemeManager and CalculatorModeSetting receive their collaborators or initial values through constructors (with defaults), and the app uses NORMAL and PRO interchangeably through BasicCalculator. This is what makes the unit tests easy to write.Operator.calculate, the percent rule, number entry rules, number formatting and operator symbols instead of duplicating them.eval; a short recursive-descent parser, and previews are computed from existing state without a second evaluator.Not every SOLID principle is demonstrated formally; the points above are the ones the code actually shows.
Requirements: Node.js 22.13 or newer (as required by the current Vite, Vitest and jsdom versions) and npm.
git clone https://github.com/TamarMosheev/Neumorphism-Calculator-.git
cd Neumorphism-Calculator-
npm install
npm run dev
Vite prints the local address (by default http://localhost:5173/); open it in your browser.
npm run build # type-check with tsc, then build to dist/
npm run preview # serve the production build locally
npm test # run the whole test suite once
npx tsc --noEmit # type-check only
npm test runs the suite once with Vitest. At the time of writing, 1579 tests in 30 files pass. They cover:
index.html, that click the actual buttons and check the display and expression line;Tests live next to the code they cover, in *.test.ts files.
Version 0.1.0. Both calculators, both themes, persistence and keyboard input are working. A live demo and screenshots are available above. No license has been specified.