🧮 MasterCalc — Advanced Scientific Calculator

Modern PWA scientific calculator + unit & currency converter. Pure HTML/CSS/JS. Zero dependencies. Works offline.

---

✨ Features

🔢 Normal Calculator

• + − × ÷ % decimal, clear, backspace
• Live expression preview while typing
• Full keyboard support

🔬 Scientific Calculator

• Trig: sin, cos, tan (Degrees / Radians toggle)
• Log: log₁₀, ln (natural log)
• Powers: x², x³, xʸ
• √ square root · n! factorial · eˣ exponential
• Constants: π (pi), e (Euler)
• Brackets: ( ) · Power chain ^
• Swipe gesture on mobile to switch Normal ↔ Scientific

📜 History

• Stored in localStorage — persists after refresh
• Click any item to reuse result
• Animated sidebar panel

⚖️ Unit Converter (7 categories, 50+ units)

• Length, Weight, Temperature, Speed, Time, Area, Volume
• Real-time conversion · Swap button · Formula display

💱 Currency Exchange

• Live rates via open.er-api.com (free, no key)
• async/await + fetch with proper error handling
• Cached rates in localStorage (4-hour cache)
• Offline fallback with approximate rates
• Retry button on failure
• 14 currencies: USD, INR, EUR, GBP, JPY, AED, CAD, AUD, CHF, CNY, SGD, MYR, SAR, KRW

🌐 PWA — Installable & Offline

• Service Worker caches all assets
• Works fully offline after first load
• Installable on Android/iOS/Desktop
• Offline indicator banner

♿ Accessibility

• Full aria-label on every button
• aria-live regions on display output
• aria-selected / aria-pressed state
• Focus-visible keyboard ring on all interactive elements
• Screen-reader announcements on results

🎨 UI/UX

• Neon glassmorphism dark theme
• Clean minimal light theme
• Dark/Light mode toggle (saved)
• Sound toggle (Web Audio API)
• Copy result to clipboard
• Error handling with auto-reset

---

📐 Responsive Layout

Screen	Behaviour
📱 Mobile (≤ 580px)	Full-screen sidebar, scroll layout, swipe gestures
📟 Tablet (≤ 860px)	Compact buttons, side panel
🖥️ Desktop	Full fixed viewport, side-by-side history
🖥️ Large (≥ 1440px)	Larger buttons and display font

---

📁 Structure

MasterCalc/
├── index.html      ← Full SEO meta, JSON-LD, PWA links, accessible markup
├── manifest.json   ← PWA manifest
├── sw.js           ← Service Worker (cache-first offline strategy)
├── css/
│   └── style.css   ← Full styles, CSS vars, dark/light, responsive
├── js/
│   └── app.js      ← All logic — modular, no frameworks
└── README.md

---

🚀 Run Locally

# Option 1: Open directly (most features work)
open index.html

# Option 2: Local server (required for Service Worker / PWA)
npx serve .
# or
python -m http.server 5500

---

🌐 Deploy to GitHub Pages

git init && git add .
git commit -m "feat: MasterCalc scientific calculator PWA"
git remote add origin https://github.com/YOUR_USERNAME/MasterCalc.git
git push -u origin main
# Settings → Pages → Source: main / root

Update in index.html:

<link rel="canonical" href="https://YOUR_USERNAME.github.io/MasterCalc/" />
<meta property="og:url" content="https://YOUR_USERNAME.github.io/MasterCalc/" />

---

⌨️ Keyboard Shortcuts

Key	Action
0–9 .	Digits
+ - * / % ( ) ^	Operators
Enter	Calculate
Backspace	Delete last
Escape	Clear all
P	Insert π
E	Insert e (scientific mode)

---

🛠️ Tech Stack

Layer	Details
HTML5	Semantic, ARIA, meta tags, JSON-LD structured data
CSS3	Custom properties, grid, animations, @media queries
JavaScript	ES6+, async/await, fetch, localStorage, Web Audio API
PWA	Service Worker, manifest.json, cache-first strategy
API	open.er-api.com — free, no key

---

🔑 Key Architecture Decisions

• No DOM rebuild on mode switch — both calc cards always in DOM, toggled with CSS classes
• Modular JS — 16 named sections, no global pollution
• Safe eval — custom Function() with character whitelist, not raw eval()
• Graceful API failure — cached rates → localStorage → hardcoded fallback
• ARIA throughout — live regions, pressed states, hidden panels

---

📄 License

MIT — free to use, fork, and learn from.

Link : https://sanketrkoli.github.io/MasterCalc/