A clean, responsive web calculator built with HTML, CSS, and JavaScript. It works in two modes — standard and scientific — and switches between them with a toggle. When scientific mode is activated, an extra panel slides out to the left of the calculator while the main layout stays centered on the page.
calculadora/
├── index.html — page structure and button markup
├── style.css — light theme, layout, animations
└── script.js — calculation logic and keyboard support
- Basic arithmetic: addition, subtraction, multiplication, and division
- Chained operations (e.g. 3 + 5 × 2 without pressing equals in between)
- Percentage (%), sign toggle (+/−), and decimal point
- AC button to reset all state
- Active operator is visually highlighted
- Display shrinks font size automatically for long numbers
Activated by the toggle in the header. A side panel appears to the left with the following functions:
| Button | Function |
|---|---|
| sin, cos, tan | Trigonometry (input in degrees) |
| log | Base-10 logarithm |
| ln | Natural logarithm |
| √x | Square root |
| x², x³ | Power of 2 or 3 |
| xⁿ | Custom exponent |
| 1/x | Multiplicative inverse |
| n! | Factorial |
| |x| | Absolute value |
| π, e | Mathematical constants |
| ( ) | Parentheses for grouping |
The calculator responds to keyboard input without clicking:
| Key | Action |
|---|---|
| 0–9 | Digit input |
| . | Decimal point |
| + − * / | Operators |
| Enter or = | Equals |
| Escape or C | Clear |
| Backspace | Delete last digit |
| % | Percentage |
No build tools or dependencies required. Open index.html directly in any modern browser.
# Option 1 — open the file directly
open index.html
# Option 2 — serve locally (optional)
npx serve .The interface uses a light theme with a subtle dot-grid background. Typography is set in DM Sans and DM Mono (loaded from Google Fonts). The scientific panel uses CSS position: absolute relative to a centering wrapper, so it expands leftward without shifting the calculator's position on screen. On screens narrower than 600px, the panel stacks above the calculator instead.
Works in all modern browsers (Chrome, Firefox, Safari, Edge). No polyfills needed.