Add full calculator functionality with visual feedback for operation buttons

[OshenVithanage]

Calculator App Enhancement

This PR transforms the Calculator app from a static UI component into a fully functional calculator with enhanced user experience features.

New Features

Core Calculator Functionality

• Number Input: All number buttons (0-9) now properly input digits
• Basic Operations: Addition (+), Subtraction (-), Multiplication (×), Division (÷)
• Decimal Support: Proper decimal point handling for floating-point numbers
• Chained Operations: Support for multiple operations in sequence
• Equals Functionality: Performs calculations and displays results

Advanced Calculator Features

• Clear (AC): Resets calculator to initial state
• Plus/Minus (+/-): Toggles sign of current number
• Percentage (%): Converts current number to percentage
• Division by Zero Protection: Returns 0 instead of crashing
• Number Formatting: Handles very large/small numbers with scientific notation
• Floating Point Precision: Rounds results to avoid precision errors

Visual Feedback & UX Improvements

• Operation Button Pressed State: Visual indication of currently selected operation
  • Lighter background color when pressed
  • Scale animation (0.95x) for pressed effect
  • Inset shadow for depth perception
• Hover Effects: All buttons now have smooth hover animations
  • Scale up (1.02x) on hover
  • Color transitions for better interactivity
• Smooth Transitions: 0.1s ease transitions for all state changes

Technical Implementation

State Management

• Added reactive state variables for display, previous value, operation, and pressed state
• Proper state cleanup on clear and equals operations
• Waiting for operand state to handle chained operations correctly

Event Handlers

• inputNumber(): Handles digit input with proper state management
• inputDecimal(): Manages decimal point input with validation
• performOperation(): Handles operation selection and chained calculations
• calculateResult(): Performs final calculations and resets state
• clear(): Resets all calculator state
• toggleSign(): Handles positive/negative number conversion
• percentage(): Converts current number to percentage

Utility Functions

• calculate(): Core calculation logic with operation switching
• formatNumber(): Handles number formatting for display (large numbers, precision)

UI/UX Enhancements

• Conditional Styling: Operation buttons show pressed state using class:pressed directive
• Responsive Animations: Smooth transitions for all interactive elements
• Visual Hierarchy: Clear distinction between different button types
• Accessibility: Proper button states and visual feedback

Testing Scenarios

The calculator now handles:

• Basic arithmetic operations (+, -, ×, ÷)
• Decimal number calculations
• Chained operations (e.g., 2 + 3 × 4 = 14)
• Division by zero (returns 0)
• Very large numbers (scientific notation)
• Very small numbers (scientific notation)
• Percentage calculations
• Sign toggling
• Clear functionality

User Experience

• Immediate Visual Feedback: Users can see which operation is selected
• Intuitive Operation Flow: Natural calculator behavior matching native apps
• Smooth Interactions: All buttons respond with appropriate animations
• Error Prevention: Division by zero protection and input validation

---

[vercel]

@OshenVithanage is attempting to deploy a commit to the Purus Projects Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: df412f7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR