🧮 SmartCalc Pro

🚀 A modern, responsive, feature-rich smart calculator built with HTML5, CSS3, JavaScript (ES6+) and Bootstrap 5.3.

SmartCalc Pro is a premium browser-based calculator designed to provide a fast, accurate, accessible, and visually polished calculation experience.

It combines a powerful safe mathematical parser, scientific calculations, persistent memory and history, smart utility tools, keyboard controls, voice interaction, customizable themes, animations, and accessibility features — all within a modern Glassmorphism + Neumorphism inspired interface.

✨ Highlights

🧮 Basic & Scientific Calculator
🔬 Advanced mathematical functions
🧠 Safe eval()-free math engine
💾 Persistent calculation memory
📜 Searchable calculation history
📤 JSON & CSV history export
⌨️ Complete keyboard support
🎙️ Voice calculation input
🔊 Spoken calculation results
🌐 Live currency conversion
🛠️ 10+ Smart Calculator Tools
🌙 Dark / Light / High-Contrast themes
♿ Accessibility-focused interface
📱 Fully responsive desktop & mobile UI
🎨 Glassmorphism + Neumorphism design
⚡ Smooth GSAP & AOS animations
🔐 Secure password generation using Web Crypto API
💾 LocalStorage-based preferences
📡 Offline support for core calculator functionality

📸 Project Overview

SmartCalc Pro provides multiple calculation experiences from a single premium interface.

🧮 Calculator

Supports:

➕ Addition
➖ Subtraction
✖️ Multiplication
➗ Division
% Percentage
() Parentheses
. Decimal numbers
+/- Negative numbers
🔢 Large-number calculations
🔄 Undo / Redo
👁️ Live result preview

🔬 Scientific Calculator

Scientific mode includes:

sin()
cos()
tan()
asin()
acos()
atan()
√
∛
x²
x³
xⁿ
ln()
log()
exp()
n!
abs()
π
e

📐 Angle Modes

🟢 DEG — Degree mode
🔵 RAD — Radian mode

Switch between angle systems instantly while performing trigonometric calculations.

🧠 Safe Mathematical Engine

SmartCalc Pro does not use:

eval()

or:

new Function()

Instead, the application implements a custom:

🔐 Tokenizer + Recursive-Descent Parser

The engine processes expressions safely through lexical analysis and parsing.

Supported Features

Arithmetic operators
Unary negative values
Parentheses
Implicit multiplication
Powers
Factorials
Mathematical constants
Trigonometric functions
Logarithmic functions
Roots
Degree / Radian conversion
Error detection

Example Expressions

2 + 5
10 / 2
2(3 + 4)
2π
3sin(30)
5!
2^8
sqrt(144)
ln(e)

🧰 Smart Tools

SmartCalc Pro includes a collection of everyday calculation utilities.

🛠️ Tool	📌 Description
📏 Unit Converter	Length, weight, temperature, area, volume, speed, time and data
💱 Currency Converter	Live currency conversion using Frankfurter API
📊 Percentage Calculator	Percentage and percentage-of-number calculations
⚖️ BMI Calculator	BMI calculation and category classification
🎂 Age Calculator	Calculate age in years, months and days
💰 EMI Calculator	Monthly EMI, total payment and interest
🧾 GST / VAT Calculator	Add or remove GST/VAT
📅 Date Difference	Calculate date intervals
🎲 Random Number	Generate random integers and decimals
🔐 Password Generator	Secure password generation using Web Crypto API

💾 Memory System

SmartCalc Pro provides calculator-style persistent memory controls:

Button	Function
`MC`	🗑️ Memory Clear
`MR`	📥 Memory Recall
`M+`	➕ Add to Memory
`M-`	➖ Subtract from Memory
`MS`	💾 Store in Memory

Memory values are persisted using:

LocalStorage

Storage key:

calc_memory

📜 Calculation History

Every calculation can be stored in a persistent history system.

Features

🕐 Calculation timestamps
🔎 Live search
📋 Copy calculation
🗑️ Delete individual entries
🧹 Clear all history
📤 Export JSON
📊 Export CSV
🖨️ Print history
💾 Persistent LocalStorage storage

History storage key:

calc_history

Example history structure:

{
  "expression": "25 × 4",
  "result": "100",
  "timestamp": "2026-08-09T00:00:00.000Z"
}

⌨️ Keyboard Shortcuts

SmartCalc Pro provides extensive keyboard support.

⌨️ Key	⚡ Action
`0–9`	Enter numbers
`.`	Decimal
`+`	Addition
`-`	Subtraction
`*`	Multiplication
`/`	Division
`^`	Power
`%`	Percentage
`(` `)`	Parentheses
`!`	Factorial
`Enter`	Calculate
`Esc`	Clear entry
`Backspace`	Delete previous character
`Delete`	Clear
`←`	Move cursor left
`→`	Move cursor right
`Ctrl + C`	Copy
`Ctrl + V`	Paste
`Ctrl + Z`	Undo
`Ctrl + Y`	Redo

🔬 Scientific Shortcuts

Key	Function
`S`	`sin(`
`C`	`cos(`
`T`	`tan(`
`Q`	`sqrt(`
`R`	`cbrt(`
`L`	`ln(`
`P`	`π`
`E`	`e`
`M`	Toggle scientific mode

🎨 Theme System

SmartCalc Pro supports three visual themes:

🌙 Dark Mode

Designed for comfortable low-light usage.

☀️ Light Mode

Clean and bright interface for daytime usage.

🌓 High-Contrast Mode

Designed to improve visual accessibility and readability.

Theme preference is automatically persisted.

Storage key:

calc_theme

⚙️ Settings

The Settings panel provides control over:

🎨 Theme
🔠 Font size
🔊 Sound effects
✨ Animations
⌨️ Keyboard shortcuts
💾 Auto-save history
🧹 Auto-clear history
📐 Angle mode
♿ Accessibility preferences

Settings are stored locally using:

calc_settings

♿ Accessibility

SmartCalc Pro is designed with accessibility in mind.

Included Features

⌨️ Keyboard navigation
🎯 Visible focus indicators
🏷️ ARIA labels
🔊 Screen-reader-friendly controls
🔎 Large-font mode
🌓 High-contrast mode
🎞️ Reduced-motion support
📱 Responsive touch controls
🖥️ Desktop keyboard support

🎙️ Voice Features

SmartCalc Pro can use browser speech APIs for hands-free interaction.

🎤 Voice Input

Uses:

Web Speech API

to recognize spoken mathematical expressions.

🔊 Spoken Results

Uses:

Speech Synthesis API

to read calculation results aloud.

ℹ️ Availability depends on browser support and user permissions.

💱 Currency Converter

The currency converter uses the Frankfurter API to obtain exchange-rate information.

Example:

USD → EUR
EUR → GBP
GBP → LKR
USD → LKR

🌐 Currency conversion requires an internet connection.

🔐 Security

SmartCalc Pro follows a security-first approach.

🛡️ No JavaScript Evaluation

The mathematical engine does not execute user input as JavaScript.

It avoids:

eval()

and:

new Function()

🔐 Secure Password Generator

Password generation uses:

window.crypto.getRandomValues()

through the Web Crypto API.

💾 Client-Side Storage

User preferences, memory and history remain in the browser's LocalStorage.

⚡ Performance

SmartCalc Pro is designed for smooth performance across modern devices.

Performance Features

⚡ Lightweight vanilla JavaScript
🧩 Modular architecture
🚫 No heavy frontend framework
🎨 CSS custom properties
🚀 GPU-friendly transforms
🖼️ Backdrop-filter effects
🎞️ Optimized animations
📱 Responsive layouts
🧠 Client-side calculations

Core mathematical calculations do not require a backend server.

🏗️ System Architecture

The project follows a modular JavaScript architecture.

All modules are organized under the global namespace:

CalculatorApp

Main Modules

CalculatorApp.calculator
CalculatorApp.memory
CalculatorApp.history
CalculatorApp.settings
CalculatorApp.theme
CalculatorApp.keyboard
CalculatorApp.ui

📦 JavaScript Modules

🧮 calculator.js

Responsible for:

Tokenization
Expression parsing
Mathematical operations
Scientific functions
Error handling
DEG/RAD conversion
Factorial
Implicit multiplication

💾 memory.js

Responsible for:

MC
MR
M+
M-
MS
LocalStorage synchronization

📜 history.js

Responsible for:

Calculation history
Search
Delete
Clear
JSON export
CSV export
Copy
Print

⚙️ settings.js

Responsible for:

User preferences
Font scaling
Sound settings
Animation settings
Shortcuts
Auto-save
Auto-clear
Angle mode

🎨 theme.js

Responsible for:

Dark mode
Light mode
High contrast
Theme persistence
Global theme synchronization

⌨️ keyboard.js

Responsible for:

Keyboard input
Calculator shortcuts
Navigation
Copy / paste
Undo / redo
Scientific shortcuts

🖥️ ui.js

Responsible for:

Modal interfaces
Glassmorphism panels
Bento launcher
Search filters
Sidebar navigation
Visual interactions

📁 Project Structure

SmartCalc-Pro/
│
├── index.html
├── about.html
├── help.html
├── README.md
│
├── assets/
│   │
│   ├── css/
│   │   ├── style.css
│   │   ├── themes.css
│   │   ├── animations.css
│   │   └── responsive.css
│   │
│   ├── js/
│   │   ├── theme.js
│   │   ├── settings.js
│   │   ├── calculator.js
│   │   ├── memory.js
│   │   ├── history.js
│   │   ├── keyboard.js
│   │   ├── ui.js
│   │   └── app.js
│   │
│   ├── icons/
│   ├── images/
│   └── sounds/
│
└── README.md

🛠️ Technologies Used

Category	Technology
🧱 Structure	HTML5
🎨 Styling	CSS3
⚙️ Programming	JavaScript ES6+
📐 UI Framework	Bootstrap 5.3.3
🎨 Design	Glassmorphism / Neumorphism
🔤 Fonts	Inter / Poppins / JetBrains Mono
🔣 Icons	Bootstrap Icons / Font Awesome
✨ Animation	GSAP 3.12
🎞️ Scroll Animation	AOS 2.3
🔔 Notifications	Toastify.js
💬 Dialogs	SweetAlert2
💱 Currency API	Frankfurter API
🎙️ Voice	Web Speech API
🔊 Speech	Speech Synthesis API
🔐 Security	Web Crypto API
💾 Storage	Browser LocalStorage

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/your-username/smartcalc-pro.git

Navigate into the project:

cd smartcalc-pro

2️⃣ Run Using a Local Server

A local server is recommended for the best browser compatibility.

Option A — `npx serve`

npx serve .

Then open:

http://localhost:3000

Option B — Python

If Python is installed:

python -m http.server 8080

Open:

http://localhost:8080

🌐 Running Without a Server

You can also open:

index.html

directly in a browser.

However, some browser APIs may have restrictions when using:

file://

For the complete experience, a local HTTP server is recommended.

📡 External Services

Most SmartCalc Pro functionality operates completely in the browser.

The following features may require internet access:

💱 Currency Conversion

Uses:

Frankfurter API

📦 CDN Libraries

Depending on the implementation, external CDN resources may include:

Bootstrap
Bootstrap Icons
Font Awesome
GSAP
AOS
SweetAlert2
Toastify
Google Fonts

⚠️ If the application is intended to operate completely offline, download and serve these dependencies locally.

🔗 Deep Linking

SmartCalc Pro supports URL fragment navigation.

Examples:

index.html#history

index.html#settings

index.html#tools

A supported hash can automatically open the corresponding interface.

📱 Responsive Design

SmartCalc Pro is designed for:

🖥️ Desktop

Full calculator layout
Keyboard support
Expanded scientific controls
Large workspace

💻 Laptop

Compact calculator interface
Responsive navigation
Touch + keyboard interaction

📱 Mobile

Touch-friendly controls
Compact calculator dimensions
Responsive smart-tool panels
Mobile navigation
No unnecessary cursor effects

📲 Tablet

Adaptive grid
Flexible calculator controls
Responsive modals

🧪 Browser Support

SmartCalc Pro targets modern evergreen browsers.

Browser	Support
🟢 Google Chrome	✅ Supported
🟢 Microsoft Edge	✅ Supported
🟢 Mozilla Firefox	✅ Supported
🟢 Safari	✅ Supported
🟢 Opera	✅ Supported

Some advanced functionality such as speech recognition depends on browser and operating-system support.

🧹 Data Management

SmartCalc Pro stores application data locally in the browser.

Storage Keys

calc_settings
calc_theme
calc_history
calc_memory

To completely reset the application, clear the website's LocalStorage from the browser's developer tools.

⚠️ Clearing LocalStorage removes saved calculator history, memory and preferences.

🖨️ Print History

The History module supports printing saved calculations.

The application can create a dedicated print document using a new browser window rather than navigating the current application page.

This helps avoid unnecessary file:// navigation issues when running the project locally.

🔄 Undo / Redo

SmartCalc Pro maintains an operation history for editing calculations.

Supported actions include:

Ctrl + Z → Undo
Ctrl + Y → Redo

The calculator can maintain up to approximately:

80 operations

depending on the configured implementation.

📊 Feature Summary

🧮 Basic Calculator             ✅
🔬 Scientific Calculator        ✅
📐 DEG / RAD                    ✅
💾 Memory System                ✅
📜 Calculation History          ✅
📤 JSON Export                  ✅
📊 CSV Export                   ✅
🖨️ Print History                ✅
⌨️ Keyboard Shortcuts           ✅
↩️ Undo / Redo                  ✅
🎙️ Voice Input                 ✅
🔊 Spoken Results               ✅
📏 Unit Converter               ✅
💱 Currency Converter           ✅
📊 Percentage Calculator        ✅
⚖️ BMI Calculator               ✅
🎂 Age Calculator               ✅
💰 EMI Calculator               ✅
🧾 GST / VAT Calculator         ✅
📅 Date Difference              ✅
🎲 Random Number Generator     ✅
🔐 Password Generator           ✅
🌙 Dark Mode                    ✅
☀️ Light Mode                   ✅
🌓 High Contrast                ✅
♿ Accessibility                ✅
📱 Responsive Design            ✅
🔒 Safe Math Parser             ✅

🎯 Project Goals

SmartCalc Pro was designed around the following principles:

⚡ Speed

Provide instant calculations without unnecessary server requests.

🔐 Safety

Process mathematical expressions through a controlled parser instead of JavaScript code execution.

🎨 Design

Deliver a premium SaaS-style calculator interface.

♿ Accessibility

Make the calculator usable through keyboard navigation, screen readers, large fonts and high contrast.

📱 Responsiveness

Provide a consistent experience across desktop, laptop, tablet and mobile devices.

🧩 Modularity

Keep calculator logic, history, memory, settings, theme and UI functionality separated into maintainable modules.

🔮 Future Improvements

Potential future enhancements include:

☁️ Optional cloud synchronization
👤 User accounts
📊 Advanced calculation analytics
📈 Calculation statistics
🧮 Matrix calculator
📐 Equation solver
📊 Graphing calculator
🧪 Chemistry calculator
💻 Programmable calculator mode
📚 Formula library
🌍 Additional language support
📱 PWA installation
🔔 Advanced notification preferences
📴 Improved fully offline dependency support

🤝 Contributing

Contributions are welcome! 🎉

Contribution Workflow

# 1. Fork the repository

# 2. Clone your fork
git clone https://github.com/your-username/smartcalc-pro.git

# 3. Create a feature branch
git checkout -b feature/new-feature

# 4. Make your changes

# 5. Commit
git commit -m "Add new calculator feature"

# 6. Push
git push origin feature/new-feature

# 7. Open a Pull Request

Please keep contributions:

🧹 Clean
🧩 Modular
♿ Accessible
📱 Responsive
🔐 Secure
⚡ Performance-conscious

🐛 Bug Reports

If you discover a problem, please report:

🖥️ Browser and version
💻 Operating system
📱 Device type
🧮 Expression that caused the issue
📋 Expected behavior
❌ Actual behavior
📸 Screenshot, if applicable

📄 License

This project is released under the:

MIT License

You are free to:

✅ Use
✅ Modify
✅ Copy
✅ Distribute
✅ Build upon

the project according to the terms of the MIT License.

👨‍💻 Developer

Raveendran Jathugulan

🎓 BICT Undergraduate 💻 Full-Stack Web Development Enthusiast 🧮 Creator of SmartCalc Pro

⭐ Support the Project

If you find SmartCalc Pro useful:

⭐ Star the repository 🍴 Fork the project 🐛 Report bugs 💡 Suggest features 🤝 Contribute improvements

Calculate smarter. Work faster. Think simpler. 🚀

Made with ❤️ using HTML5 + CSS3 + JavaScript + Bootstrap.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
assets		assets
README.md		README.md
SmartCalc_Pro_Technical_Report.pdf		SmartCalc_Pro_Technical_Report.pdf
about.html		about.html
documentation.html		documentation.html
help.html		help.html
index.html		index.html

Latest commit

History

Folders and files

Repository files navigation

🧮 SmartCalc Pro — Premium Smart Calculator

✨ Highlights

📸 Project Overview

🧮 Calculator

🔬 Scientific Calculator

📐 Angle Modes

🧠 Safe Mathematical Engine

Supported Features

Example Expressions

🧰 Smart Tools

💾 Memory System

📜 Calculation History

Features

⌨️ Keyboard Shortcuts

🔬 Scientific Shortcuts

🎨 Theme System

🌙 Dark Mode

☀️ Light Mode

🌓 High-Contrast Mode

⚙️ Settings

♿ Accessibility

Included Features

🎙️ Voice Features

🎤 Voice Input

🔊 Spoken Results

💱 Currency Converter

🔐 Security

🛡️ No JavaScript Evaluation

🔐 Secure Password Generator

💾 Client-Side Storage

⚡ Performance

Performance Features

🏗️ System Architecture

Main Modules

📦 JavaScript Modules

🧮 calculator.js

💾 memory.js

📜 history.js

⚙️ settings.js

🎨 theme.js

⌨️ keyboard.js

🖥️ ui.js

📁 Project Structure

🛠️ Technologies Used

🚀 Getting Started

1️⃣ Clone the Repository

2️⃣ Run Using a Local Server

Option A — npx serve

Option B — Python

🌐 Running Without a Server

📡 External Services

💱 Currency Conversion

📦 CDN Libraries

🔗 Deep Linking

📱 Responsive Design

🖥️ Desktop

💻 Laptop

📱 Mobile

📲 Tablet

🧪 Browser Support

🧹 Data Management

Storage Keys

🖨️ Print History

🔄 Undo / Redo

📊 Feature Summary

🎯 Project Goals

⚡ Speed

🔐 Safety

🎨 Design

♿ Accessibility

📱 Responsiveness

🧩 Modularity

🔮 Future Improvements

🤝 Contributing

Contribution Workflow

🐛 Bug Reports

Option A — `npx serve`