A modern and responsive calculator built with React, JavaScript, and Tailwind CSS.
👉 https://calculator-nine-peach-30.vercel.app/
-
Basic arithmetic operations
- Addition
- Subtraction
- Multiplication
- Division
-
Responsive modern UI
-
Keyboard support
-
Decimal number handling
-
Backspace functionality
-
Clear expression
-
Expression evaluation
-
Real-time display updates
-
Clean component-based React architecture
- React
- JavaScript (ES6+)
- Tailwind CSS
- CSS
- Vite
Calculator
│
├── public
│ └── preview.png
│
├── src
│ ├── components
│ │ ├── Buttons.jsx
│ │ ├── Screen.jsx
│ │ └── ...
│ │
│ ├── logic.js
│ ├── App.jsx
│ └── main.jsx
│
├── package.json
└── README.md
| Key | Action |
|---|---|
| 0-9 | Numbers |
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| . | Decimal |
| Enter | Calculate |
| Backspace | Delete Last Character |
| Escape | Clear |
The application is designed to work smoothly across:
- Desktop
- Laptop
- Tablet
- Mobile Devices
While building this project, I practiced:
- React Components
- State Management with
useState - Event Handling
- Keyboard Events
- Conditional Rendering
- JavaScript Expression Handling
- Tailwind CSS Layouts
- Responsive Design
- Component Reusability
- History Panel
- Scientific Calculator Mode
- Light/Dark Theme
- Percentage Operation
- Memory Functions
- Keyboard Highlight Animation
- Better Expression Parser
Clone the repository
git clone https://github.com/Shravan-025/Calculator.gitGo to the project directory
cd CalculatorInstall dependencies
npm installRun the development server
npm run devIf you found this project helpful, consider giving it a ⭐ on GitHub.
Shravan Patel
GitHub: https://github.com/Shravan-025