A modern, professional scientific calculator with history, themes, and robust calculation logic.
🔗 Live Demo: https://modern-calculator-wihz.vercel.app
💻 Source Code: https://github.com/KaavyaGala546/CalcPro
CalcPro is a sleek, high-performance calculator application. It combines a beautiful, "glassmorphism" inspired UI with powerful scientific features and a reliable computation engine.
- ⚡ Accurate Calculations: Powered by MathJS for high-precision results.
- ⌨️ Full Keyboard Support: Fast input handling for all numeric and arithmetic keys.
- ⚗️ Scientific Mode: Advanced functions including
sin,cos,tan,log10,sqrt, and more. - 📏 Unit Converter: Integrated real-time conversion for Length, Weight, and Temperature.
- 💱 Currency Converter: Real-time exchange rates for 100+ global currencies.
- 📜 Calculation History: Automatically saves and persists your last 20 calculations.
- 🌓 Dark/Light Mode: Beautifully designed themes with persistence.
- 📱 Fully Responsive: Optimized with micro-interactions and touch feedback.
- 🔒 Security Hardened: Safe expression parsing with zero
eval().
- Vite – Fast build tool and dev server
- MathJS – Powerful mathematical logic
- HTML5 – Semantic structure
- CSS3 – Modern "glass" styling & layout
- JavaScript (ES6+) – Modular logic
Unlike standard calculators that use the dangerous eval() function, CalcPro utilizes the mathjs expression parser. This not only prevents security vulnerabilities like XSS but also allows for more complex string-based mathematical expressions.
To provide a seamless user experience, we use the Web Storage API (LocalStorage) to:
- Remember Theme Preference: Your choice of Dark or Light mode is saved.
- Maintain History: Your past calculations are stored locally and reloaded every time you visit.
The UI follows Glassmorphism principles, using CSS backdrops, subtle gradients, and CSS variables to handle theme transitions smoothly without any page reloads.
CalcPro/ ├── public/ # Static assets (fonts, demo) │ └── assets/ ├── src/ # Source code │ ├── css/ │ │ └── style.css │ └── js/ │ ├── modules/ # ES Modules (Logic split) │ └── script.js # Entry point ├── index.html # Root entry ├── package.json # Dependencies └── README.md
-
Clone the repository:
git clone https://github.com/KaavyaGala546/CalcPro.git cd CalcPro -
Install dependencies:
npm install
-
Run the development server:
npm run dev
- Expertise in Modern JavaScript and library integration.
- Precision in UI/UX Design and theme implementation.
- Focus on Application Security and best practices.
- Professional State Persistence using web APIs.
Kaavya Gala
GitHub: KaavyaGala546
If you found this project useful, give it a star ⭐ — it helps!
This project is licensed under the MIT License.