Calculator Application

A minimalist calculator web application that clones the Windows Calculator design with advanced decimal handling.

Features

Core Functionality

• Basic Operations: Addition (+), Subtraction (−), Multiplication (×), Division (÷)
• Advanced Operations: Modulo (%), Reciprocal (1/x), Square (x²), Square Root (√x)
• Memory Functions: MC, MR, M+, M−, MS, M▼ (History)
• Function Buttons: DEL, C, CE

Advanced Decimal Handling

1. Precise Decimal Arithmetic

The calculator uses precise arithmetic methods to avoid floating-point errors:

• Addition: Uses decimal place alignment to prevent errors like 0.1 + 0.2 = 0.30000000000000004
• Subtraction: Handles decimal subtraction with precision
• Multiplication: Accurately multiplies decimal numbers
• Division: Properly handles division with decimal results

2. Repeating Decimal Detection

The calculator automatically detects and formats infinite repeating decimals:

Common Repeating Decimals Detected:

• 1 ÷ 3 = 0.3... (displays as 0.3...)
• 2 ÷ 3 = 0.6... (displays as 0.6...)
• 1 ÷ 7 = 0.142857... (displays as 0.142857...)
• 1 ÷ 9 = 0.1... (displays as 0.1...)
• 1 ÷ 11 = 0.09... (displays as 0.09...)

Detection Methods:

1. Known Pattern Matching: Recognizes common repeating patterns (3, 6, 9, 142857, etc.)
2. Dynamic Pattern Detection: Identifies repeating sequences of 1-8 digits that repeat at least 3 times
3. Precision Limiting: For non-repeating decimals, limits display to 12 decimal places

3. Number Formatting

• Large Numbers: Displays in exponential notation (e.g., 1e+15)
• Small Numbers: Displays in exponential notation for very small values
• Trailing Zeros: Automatically removes unnecessary trailing zeros
• Decimal Results: Properly formats decimal results with up to 15 decimal places

Calculation Logic

State Management

1. New Calculation: Number → Operator → Number → Execute
2. After Calculation Complete:
   • Type Number: Starts new calculation
   • Type Operator: Continues with result as first number

Examples

Decimal Arithmetic

0.1 + 0.2 = 0.3 ✓ (not 0.30000000000000004)
0.3 - 0.1 = 0.2 ✓ (not 0.19999999999999998)
0.2 × 0.3 = 0.06 ✓

Repeating Decimals

10 ÷ 3 = 3.3...
1 ÷ 7 = 0.142857...
22 ÷ 7 = 3.142857...
5 ÷ 6 = 0.83...

Chained Operations

5 + 3 = 8
(continue) × 2 = 16
(continue) ÷ 4 = 4

Keyboard Shortcuts

• Numbers: 0-9
• Decimal: .
• Operators: +, -, *, /, %
• Calculate: Enter or =
• Clear All: Escape
• Clear Current: Delete
• Delete Last: Backspace

Files Structure

calculator/
├── index.html           # Main HTML file
├── css/
│   └── style.css       # Styling and animations
├── js/
│   └── animation.js    # Calculator logic and decimal handling
└── tailwind.config.js  # Tailwind CSS configuration

Technical Implementation

Decimal Precision Methods

preciseAdd(a, b)

• Aligns decimal places
• Converts to integers for calculation
• Divides back to get precise result

preciseSubtract(a, b)

• Similar to addition but performs subtraction
• Prevents floating-point errors

preciseMultiply(a, b)

• Counts decimal places in both numbers
• Multiplies as integers
• Adjusts decimal point in result

formatResult(num)

• Checks for repeating patterns
• Limits precision for display
• Handles exponential notation

detectRepeatingDecimal(num)

• Analyzes decimal portion with high precision (20 decimal places)
• Searches for known repeating patterns
• Dynamically detects custom repeating sequences
• Returns formatted string with ellipsis notation

Browser Compatibility

• Modern browsers (Chrome, Firefox, Edge, Safari)
• Requires JavaScript enabled
• Tailwind CSS loaded via CDN

Usage

1. Open index.html in a web browser
2. Click buttons or use keyboard to input calculations
3. View results with proper decimal handling
4. Check history using M▼ button

Testing Repeating Decimals

Try these calculations to see repeating decimal detection:

• 1 ÷ 3 → Should show 0.3...
• 10 ÷ 3 → Should show 3.3...
• 1 ÷ 6 → Should show 0.16...
• 1 ÷ 7 → Should show 0.142857...
• 5 ÷ 9 → Should show 0.5...
• 22 ÷ 7 → Should show 3.142857... (approximation of π)

Notes

• The calculator stores all calculations in memory (history)
• Memory functions (MC, MR, M+, M-, MS) work across calculations
• The M▼ button displays full calculation history in an alert dialog
• Repeating decimal detection works for common patterns and dynamic sequences
• Very long decimals are automatically rounded to 12 decimal places if not repeating