CSS3 Calculator

A retro-styled, fully keyboard-driven calculator built with vanilla JavaScript and CSS3 — no frameworks, no build step, no dependencies.

▶ Try the live demo

Operator precedence in action: 7 × 8 − 2 evaluates to 54, not 46.

Features

• Operator precedence — 7 × 8 − 2 correctly evaluates to 54, not 46. Powered by a small shunting-yard evaluator (no eval).
• Calculation history — a running tape of previous calculations. Click any entry to reuse its result.
• Memory keys — MC, MR, M+, M− with an on-screen memory indicator.
• Full keyboard control — type digits and operators directly; Enter for =, Backspace, Esc to clear.
• Percent & sign toggle — % and ±.
• Light / dark theme — toggle in the top-right; your choice is remembered via localStorage.
• Responsive — adapts from desktop down to mobile.
• Graceful errors — dividing by zero shows Error instead of Infinity.
• Accessible — real <button> elements, ARIA labels, and a live-region display.

Keyboard shortcuts

Key	Action
0–9	Enter a digit
. or ,	Decimal point
+ - * /	Operators
x	Multiply (alias)
%	Percent
Enter or =	Equals
Backspace	Delete last digit
Esc or Delete	Clear all

Running locally

It's a static site — just open index.html in a browser, or serve the folder:

# Any static server works. This repo ships a tiny zero-dependency one:
node server.js
# then open http://localhost:4600

Project structure

├── index.html          # markup
├── css/style.css       # theming (CSS custom properties) + layout
├── js/calculator.js    # calculator engine (no dependencies)
├── fonts/              # self-hosted Digital-7 display font
└── server.js           # optional local preview server

Tech

Plain HTML5, CSS3 (custom properties, grid, no vendor-prefix cruft), and ES5-compatible JavaScript. Originally written in 2013 with jQuery and rebuilt from scratch.

Contributing

Contributions are welcome! Please read the contributing guide and code of conduct first.

License

Released under the MIT License.