JIT
build a polished calculator web app with modern design and functionality
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.
Updated files
v1