Build a fully functioning calculator web app (basic + scientific modes) with a polished UI, smooth animations, header/footer, clear instructions, separate index.html, styles.css and app.js files, and simple SEO/meta. Use vanilla HTML, CSS and JavaScript (no frameworks). Deliver clean, well-commented code.
Design & Visuals
Modern minimal aesthetic using glassmorphism or soft-card style.
Colour palette: primary #ff930f (accent), secondary #fff95b (accent 2), background #0f172a (dark) or #f7f9fc (light); support a light/dark theme toggle.
Use a readable system font stack (Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial).
All components should be responsive; mobile-first design that looks great on phones, tablets and desktops.
Include subtle animations: button hover/press, ripple effect on button click, smooth theme transitions, result flicker/slide on change.
Layout & Components
Header with site logo/text on the left, theme toggle and a small mode switch (Basic / Scientific) on the right.
Main card centred with:
Display area (current expression + result).
Button grid for digits, operations, clear, equals, parentheses, memory (M+, M-, MR), backspace and scientific functions (sin, cos, tan, ln, log, exp, pow, sqrt).
History panel (collapsible) showing recent calculations with copy-to-clipboard.
Small instructions/help toggle inside or next to the card.
Footer with links: About, Privacy Policy, Contact, and social icons. Footer should be sticky to the bottom on short content.
Functionality
Basic arithmetic: + - × ÷, decimal, parentheses, backspace, clear, equals.
Scientific mode: trig (sin, cos, tan), inverse trig, log, ln, power (^), sqrt, factorial, constants (π, e), degree/radian toggle.
Memory functions: M+, M-, MR, MC.
Keyboard support: number keys, Enter for equals, Backspace, Escape for clear, + - * / ( ) ..
Input sanitisation and safe evaluation: do not use eval() directly on raw strings — use a safe expression parser/evaluator or implement a shunting-yard algorithm / expression parser in JS. (If using a small library is allowed, prefer a well-known safe library — otherwise implement custom).
Error handling: show user-friendly error messages for invalid input or math errors (e.g. divide by zero).
Copy result button; share result (using Web Share API where available).
Local persistence: save history and settings (theme, mode, angle unit) in localStorage.
Accessibility
All interactive elements must be reachable by keyboard and have ARIA labels/roles.
High-contrast mode and sufficient colour contrast for text.
Screen-reader friendly (announce result changes).
Buttons are large enough for touch targets (min 44px).
Animations
Button hover (scale 1.03), active (scale 0.98) with CSS transitions.
Ripple effect on click (CSS+JS).
Smooth slide/fade for history panel and theme toggling.
Minimal CPU usage—prefer CSS transforms/transitions.
Code & Quality
Provide three separate files: index.html, styles.css, app.js.
Comment major sections of JS and CSS.
Use semantic HTML elements.
Keep CSS modular (use BEM or utility classes).
Include responsive breakpoints and a mobile-first approach.
Add simple unit tests or example test cases in comments for calculator logic (e.g., 2+2=4, sin(90deg)=1).
SEO & Metadata
Title: Calculator — Clean & Fast | MyCalc
Meta description: short description (~150 chars) explaining the app.
Include favicon placeholder.
Include lang="en-GB" in the HTML tag.
Deliverables
index.html — semantic markup, header, main calculator card, history panel, footer, help modal.
styles.css — responsive styling, theme support, animations.
app.js — calculator logic, keyboard handling, history & localStorage, accessibility features, comments.
A README (short) containing setup instructions, keyboard shortcuts and a short usage guide (can be included in index.html as comments).
Optional: small SVG icons for buttons or use an icon set (e.g., inline SVG or icon font).
Extra (optional but desirable)
Unit toggle (Degrees/Radians) visible when scientific mode is enabled.
Download history as .csv.
Animations reduced for prefers-reduced-motion.
Dark/light theme auto-detect on first load.
Mobile installable PWA manifest (simple, optional).
Acceptance tests (what to check before delivery)
Works offline once loaded (basic caching optional).
Keyboard input + clicking produce same results.
History persists across reloads.
Theme toggles and persists.
Scientific calculations are accurate to expected precision.
Accessible via keyboard and screen-readers.