A sleek, responsive, and interactive web calculator featuring vanilla JavaScript execution, modern aesthetics, advanced mathematical functions, memory registers, and smooth tactile micro-interactions.
- Smooth CSS Transitions: All buttons transition smoothly (
all 0.2s ease) on hover and state changes. - Button Hover States: Buttons lift slightly (
translateY(-2px)) on hover and present a soft, color-themed glow matching their function:- Teal Glow: Arithmetic operators (
+,−,×,÷) and equals (=). - Red Glow: Clear utility button.
- Subtle Gray Glow: Memory keys, numbers, and toggle functions.
- Teal Glow: Arithmetic operators (
- Tactile Click Feedback: Clicking any button scales it down slightly (
transform: scale(0.97);) to simulate physical button compression. - Responsive Layout: Designed to adapt to all screen sizes (scaled using flexbox and grid layouts), automatically resizing for mobile devices.
- Touch-Friendly Controls: Scopes hover effects to
@media (hover: hover)to prevent sticky hover states on touchscreens (tablets/smartphones).
The calculator supports a wide range of calculations, from basic arithmetic to advanced memory operations.
- Addition (
+): Computes the sum of numbers (e.g.,12 + 8 = 20). - Subtraction (
−): Computes the difference (e.g.,45 - 15 = 30). - Multiplication (
×): Computes the product (e.g.,6 × 7 = 42). - Division (
÷): Computes the quotient (e.g.,100 ÷ 4 = 25). - Decimal Calculations (
.): Supports floating-point expressions (e.g.,5.5 × 2 = 11).
- Modulo Operator (
% (mod)): Calculates the remainder of a division when used between two values (e.g.,10 % 3evaluates to1). - Percentage Modifier: When clicked on a single value, converts it to a percentage (e.g.,
25becomes0.25). - Exponentiation (
x²): Squares the current expression or calculated result (e.g.,8squared becomes64). - Square Root (
√): Calculates the square root of the expression or result (e.g.,√144becomes12). - Sign Toggle (
+/-): Switches the sign of the last number in the expression (e.g.,42becomes-42).
The calculator contains a memory register to store and accumulate values across calculations:
- MC (Memory Clear): Clears the memory register back to
0. - MR (Memory Recall): Pastes the currently stored memory value onto the display screen.
- M+ (Memory Add): Evaluates the display content and adds the result to the memory register.
- M− (Memory Subtract): Evaluates the display content and subtracts the result from the memory register.
- Backspace (
⌫): Deletes the last character on the display screen. - Clear: Resets the entire input display to empty.
For rapid input, the calculator supports full keyboard mappings:
| Action / Operation | Keyboard Key |
|---|---|
| Numbers & Decimals | 0 - 9, . |
| Basic Operators | +, -, *, / |
Compute Result (=) |
Enter |
Backspace (⌫) |
Backspace |
| Clear Display | Escape |
Modulo (%) |
% |
| Parentheses | (, ) |
The calculator evaluates input strings using a secure, closed-scope evaluation function. It strictly sanitizes input expressions using a regular expression filter:
- Validates that only numbers, decimals, parentheses, spaces, and operators (
+,-,*,/,.,%) are processed. - Blocks execution of arbitrary JavaScript scripts, preventing code injection attacks and ensuring a secure calculation environment.