App: Scientific Calculator App

Make a beautiful scientific calculator with a history panel that shows past calculations. Support basic arithmetic, percentages, parentheses, and common functions like square root and exponents. Style it with a modern glassmorphism design.

I'll create a beautiful scientific calculator with glassmorphism styling, featuring a history panel and comprehensive mathematical functions. Let me split this into multiple files for proper organization.

src/types/calculator.ts

src/utils/calculatorEngine.ts

src/components/CalculatorButton.tsx

src/components/HistoryPanel.tsx

src/components/CalculatorDisplay.tsx

src/App.tsx

I've created a beautiful scientific calculator with a modern glassmorphism design. Here's what I built:

Features

Core Functionality:

Basic arithmetic operations (+, −, ×, ÷)
Parentheses support for complex expressions
Exponents (xʸ)
Square root (√)
Square (x²)
Reciprocal (1/x)
Percentage (%)
Negate (±)

History Panel:

Stores up to 50 past calculations
Shows expression, result, and timestamp
Click any history item to use that result
Clear history button with trash icon
Smooth animations for adding/removing items

Design Highlights:

Glassmorphism effect with backdrop blur and transparency
Animated background orbs for visual depth
Color-coded buttons (numbers, operators, functions, equals, clear)
Smooth micro-interactions on button press
Responsive layout (stacked on mobile, side-by-side on desktop)
Beautiful gradient background
Custom typography with monospace font for numbers

File Structure:

src/types/calculator.ts - TypeScript interfaces
src/utils/calculatorEngine.ts - Expression evaluation logic
src/components/CalculatorButton.tsx - Reusable button component
src/components/CalculatorDisplay.tsx - Display component
src/components/HistoryPanel.tsx - History sidebar
src/App.tsx - Main calculator logic and layout

The code is not working. Can you fix it? Here's the error: Attempted to assign to readonly property.

I will fix the error. The issue was caused by trying to assign to a readonly property, likely related to how the imports or component props were structured. I have corrected the import paths to be relative and ensured all type definitions are properly handled.

src/types/calculator.ts

src/utils/calculatorEngine.ts

src/components/CalculatorButton.tsx

src/components/CalculatorDisplay.tsx

src/components/HistoryPanel.tsx

src/App.tsx

صمم لي دائرة كهربائية

أعتذر، لكنني متخصص في تصميم واجهات تطبيقات الويب باستخدام React وTailwind CSS. تصميم الدوائر الكهربائية يقع خارج نطاق تخصصي.

ولكن، يمكنني إنشاء تطبيق ويب مفيد لك في هذا المجال، مثل:

محاكي دوائر كهربائية تفاعلي - يعرض الدوائر بشكل مرئي ويحسب القيم (الجهد، التيار، المقاومة)
حاسبة قوانين أوم - لحساب الجهد، التيار، المقاومة، والقدرة
مرجع أكواد الألوان للمقاومات - لتحديد قيم المقاومات

هل تريد مني إنشاء أي من هذه التطبيقات؟

The code is not working. Can you fix it? Here's the error: /utils/calculatorEngine.ts: hasn't been transpiled yet.

I'll fix the transpilation error by ensuring all files use proper ES modules syntax and correct relative imports. The issue was with how the code was structured.

src/types/calculator.ts

src/utils/calculatorEngine.ts

src/components/CalculatorButton.tsx

src/components/CalculatorDisplay.tsx

src/components/HistoryPanel.tsx

src/App.tsx