A high-end, modern web-based calculator with a state-of-the-art glassmorphic aesthetic. This project transforms a basic utility into a premium experience through smooth interactions, vibrant visuals, and high-precision logic.
- Premium Glassmorphism: Stunning frosted glass effect with vibrant, blurred background colors.
- Dynamic Logic: Supports basic arithmetic (+, -, ×, ÷) and advanced operations (%, √, x²).
- History Log: Persistent history of your last 10 calculations, accessible via a sliding sidebar.
- Micro-animations: Powered by Framer Motion for tactile button feedback and smooth transitions.
- Power State: A functional "Sleep/Online" mode to simulate real device behavior.
- Keyboard Support: Full mapping for numpad and operation keys.
- Dark/Light Mode: Auto-detects user preference with a manual toggle for the ultimate viewing experience.
- Framework: React 18+ (Vite)
- Styling: Tailwind CSS v4
- Animations: Framer Motion
- Icons: Lucide React
- Typography: Inter
-
Clone the repository:
git clone https://github.com/LuckDay21/basic-calculator.git
-
Navigate to the project directory:
cd basic-calculator -
Install dependencies:
npm install
-
Run the development server:
npm run dev
/src/components: UI-only "dumb" components./src/hooks: Business logic and state management (useCalculator)./src/utils: Pure utility functions for math and formatting./src/data: Constants and button configurations.
Contributions are welcome! Feel free to open an issue or submit a pull request for improvements or new features.
Built with ❤️ by LuckDay21