The user wants a scientific calculator with graphing functionality, built with AngularJS, in a single HTML5 file. The response should be renderable in an iframe, so I need to include everything inline — AngularJS from CDN is fine, but the iframe might not have network access... Actually, they said external libraries are allowed via ` header... main section.calc-panel display history keypad (buttons via ng-repeat? explicit is clearer but verbose; use ng-repeat over key definitions — cleaner and less HTML. I'll define $scope.keys arrays.) section.graph-panel (directive sc-graph) ``` Keypad via ng-repeat with grid areas: I'll build keys as array of rows? CSS grid auto-flow with explicit spans: each key def: {label (html), cls, act, span?}. Row-span for '=' and col-span for '0'. Use grid-auto-flow: dense? Explicit: give each key style grid-column/row via classes: `.k-eq { grid-row: 5 / span 4; grid-column: 5; }` and `.k-zero { grid-column: 1 / span 2; }`. Rows 1-4 sci (auto flow row), rows 5-8 numpad. If I ng-repeat a flat array of 25 keys in DOM order, grid auto-placement fills row by row: 5 per row for rows1-4 (20 keys), then row5: 7,8,9,÷,=(span4 rows), row6: 4,5,6,×, row7: 1,2,3,−, row8: 0(span2),.,+ — auto placement: after '=' occupies col5 rows5-8, next row auto-places cols1-4. '0' spans 2 cols then '.' col3, '+' col4. ✓ auto-placement handles it if '=' declared with grid-row: span 4. Key definitions (25): ``` {t:'2nd', a:'2nd', cls:'fn tog'}, {t:'(', a:'('}, {t:')', a:')'}, {t:'%', a:'%', cls:'op'}, {t:'AC', a:'ac', cls:'ac'}, {t:'sin',...}, cos, tan, ln, log, x² (a:'sqr'), xʸ (a:'pow'), √ (a:'sqrt'), ¹/ₓ (a:'inv'), x! (a:'fact'), π, e, Ans, ± (a:'neg'), ⌫ (a:'del', with svg? use text '⌫'? That's a unicode char not emoji — acceptable as keycap glyph; better small SVG backspace icon. I'll use an inline SVG via ng-bind-html? Simpler: use text label 'DEL'. Cleaner text. Use "DEL". Hmm keycap: '⌫' is fine typographically but I'll go text "DEL" for consistency... Actually classic calculators print "⌫"-like arrows. I'll use SVG icon inside key for backspace — need ng-repeat with optional html label. I'll allow key.html. Use triangular backspace SVG. OK do it: small path. Then numpad: 7 8 9 ÷ =(eq span), 4 5 6 ×, 1 2 3 −, 0(span2) . + ``` 2nd alternate labels: store `alt` labels; `$scope.second` toggles; label function chooses. Actions dispatch by `a` code; if second active, some codes behave differently: - sin → asin inserts "sin⁻¹(" — insert string "asin(" - ln → "exp(" ; label eˣ - log → "10^(" ; label 10ˣ - x² → x³: "^3" - √ → ∛: "cbrt(" — tokenizer/parser: add 'cbrt' func. - xʸ stays; x! stays; 1/x stays; 2nd on π? skip; DEL stays. After use, second auto-turns off (classic behavior). ✓ Labels with sup: use HTML strings like "sin^-1", "x²", "e^x", "10^x", "∛" is unicode for cube root — fine as text char. "1/x" as "¹⁄ₓ"? use x^{-1}? Show as fraction-ish "1/x" text ok. Angular: `ng-bind-html` requires $sce — I'll just use `ng-bind-html` with `$sce.trustAsHtml` prepared at definition time. Include ngSanitize? Not needed if trusted. OK. Button click: `ng-click="press(k)"`. **press(k)** dispatch: - insert(s): smart operator replace: if s in ['+','−','×','÷','^'] and last char in ops set → replace last char (unless s is '−' after empty? allow minus anywhere as unary). If expr ends with '(' and s is '×'? skip that nuance. Also if expr ends with '−' and new is '−' → keep? fine replace. - digits: simple append; prevent multiple '.' in current number token: check current trailing number for '.'. Nice touch — implement. - '=': evaluate; on success: history.unshift({e:expr, r:res}); ans=res; expr = fmt(res)? Classic: set expr to result so you can continue; show result prominently. I'll set `expr = fmt(res)` and mark `justEvaluated` so next digit press starts fresh (if next press is digit or '(' or function → clear first; if operator → continue). Implement flag. - live preview: $scope.preview computed via watch on expr: try eval → format → show "= x"; errors → show nothing. Empty expr → show nothing. **Eval service functions:** Write tokenizer/parser/eval in a factory `mathEngine` returning {parse(src) → ast, evaluate(ast, x, deg), compile(ast, deg) → f(x), fmt(v)}. Constants: pi, e, ans handled by passing env {x, ans}. Evaluate fn map: ```js const FNS = { sin: v=>deg? sin(deg2rad) : sin, cos, tan, asin: v=> deg? rad2deg(asin) : asin (clamp domain → NaN outside [-1,1] naturally NaN), ... ln: Math.log, log: Math.log10, sqrt, abs, exp, floor, ceil, round, sinh..., cbrt } ``` tan in degrees fine. tan(90°) → sin/cos → cos(π/2) not exactly 0 → huge number ~1.6e16 — acceptable (real calculators error; we show big number). Fine. Factorial as function `!` postfix: ```js function fact(n){ if(n<0||n%1) return NaN; if(n>170) return Infinity; let r=1; for(let i=2;i<=n;i++) r*=i; return r; } ``` fmt: ```js function fmt(v){ if (typeof v !== 'number' || isNaN(v)) return 'undefined'; if (!isFinite(v)) return v>0?'∞':'−∞'; if (v === 0) return '0'; const a = Math.abs(v); if (a >= 1e12 || a < 1e-9) return v.toExponential(8).replace(...) tidy; let s = parseFloat(v.toPrecision(12)).toString(); return s; } ``` Exponential tidy: replace('e+','×10^')? Display '1.2×10⁹'? convert to `1.2e+9` is fine for mono display. I'll keep `e` notation, maybe pretty: replace /e\+?(-?\d+)/ with '×10^$1'? Superscript would be nicer but string. Keep as is: `1.234e+15` → tidy to `1.234×10^15`. Meh, ^ collides with power op when re-parsing expr= result. If result is exponential string and set as new expr — parser won't understand "×10^15" as one number (it'd parse 1.234×10^15 correctly actually! × and ^ both exist → 1.234×10^15 evaluates right). And small "1e-9" style: tokenizer: 'e' after digits — name parse: 'e' becomes const → 1×e−9?? Wrong! "2.5e-7" → num 2.5, name e... implicit mult → 2.5*e − 7 = wrong. So avoid setting expr to strings with 'e' notation. Solution: when committing result to expr, if result uses exponential, wrap? Better: keep expr = result only when it's plain decimal; if exponential, set expr = fmt but convert to `2.5×10^(−7)` form which parses correctly: 2.5 × 10^(−7) ✓ (implicit mult × power). I'll produce pretty-form: mantissa ×10^(exp) with parens. In display only, exponential results show as `2.5×10⁻⁷`? Keep simple: display "2.5e−7"? For clarity I'll display with ×10^ notation consistently. Write `fmt` returning plain for normal, and `fmtPretty(v)` for exponential: `mantissa×10^(exp)`. Use fmtPretty for the committed expr and the shown result. Parser-safe ✓. Careful: '−' in exponent: use ASCII '-' inside parens — tokenizer treats '−' and '-' both as minus (I'll map both). Fine either way. Tokenizer details: ```js function tokenize(src){ const toks=[]; let i=0; const isD=c=>c>='0'&&c<='9'; while(i1) throw err; toks.push({t:'num',v:parseFloat(s)}); i=j; continue;} if(/[a-zA-Z]/.test(c)){ // greedy function/constant names let matched=null; for(const name of NAMES_SORTED){ if(src.startsWith(name,i)... case-insensitive} ``` Case-insensitive: lowercase compare. NAMES sorted by length desc: ['asin','acos','atan','sinh','cosh','tanh','sqrt','cbrt','abs','exp','log','sin','cos','tan','ln','floor','ceil','round','pi','ans','e','x'] — floor/ceil/round longer. Then after match, push {t:'name',v:name}, i+=len. If no name match: single unknown letter → treat as var letter? throw "unknown symbol 'q'". For graphing only x is meaningful; other letters error. But wait 'x' inside "exp" — greedy matching handles exp first ✓. "x" alone ✓. What about uppercase 'X'? lowercase compare ✓. π char: if c==='π' → name 'pi'. '√' → name 'sqrt'. Also '³'? Not needed. Operators: '+','−','-','*' → add; '×'→mul; '÷','/'→div; '^'; '(';')'; '!'; '%'; ',' unused. Unknown char → throw. Number edge: '.' alone → NaN — check parseFloat validity: if s==='.' throw. Parser: ```js function parse(toks){ let p=0; const peek=()=>toks[p], next=()=>toks[p++]; function expr(){ let n=term(); while(peek()&&(peek().t==='op'&&(peek().v==='+'||peek().v==='-'))){ const op=next().v; n={t:'bin',op,a:n,b:term()}; } return n; } function term(){ let n=unary(); for(;;){ const t=peek(); if(t&&t.t==='op'&&(t.v==='*'||t.v==='/')){ next(); n={t:'bin',op:t.v,a:n,b:unary()}; } else if(t&&(t.t==='num'||t.t==='name'||t.t==='lp')){ n={t:'bin',op:'*',a:n,b:unary()}; } // implicit else break; } return n; } ``` Wait implicit: after unary, if next token is num/name/lp → implicit multiply. But careful: "2!3"? postfix consumed. "x!" then loop: t='!'? '!' handled in postfix inside unary chain. But also implicit shouldn't trigger for op tokens ✓. One catch: "sin(x)(" → sin(x)*( ) ✓. And "2 − 3": term's implicit loop sees op '−' → breaks → expr handles ✓. But unary: ```js function unary(){ const t=peek(); if(t&&t.t==='op'&&(t.v==='-'||t.v==='+')){ next(); const a=unary(); return t.v==='-'?{t:'neg',a}:a; } return power(); } function power(){ let n=postfix(); if(peek()&&peek().t==='op'&&peek().v==='^'){ next(); return {t:'bin',op:'^',a:n,b:unary()}; } return n; } function postfix(){ let n=primary(); for(;;){ const t=peek(); if(t&&t.t==='bang'){next(); n={t:'fact',a:n};} else if(t&&t.t==='pct'){next(); n={t:'pct',a:n};} else break; } return n; } function primary(){ const t=next(); if(!t) throw {msg:'unexpected end'}; if(t.t==='num')return {t:'num',v:t.v}; if(t.t==='lp'){ const n=expr(); if(!peek()||next().t!=='rp') throw {msg:'missing )'}; return n; } if(t.t==='name'){ if(t.v==='x') return {t:'var'}; if(t.v==='pi') return {t:'num',v:Math.PI}; if(t.v==='e') return {t:'num',v:Math.E}; if(t.v==='ans') return {t:'ans'}; if(FNS[t.v]){ if(!peek()||peek().t!=='lp') throw {msg:t.v+' needs ()'}; next(); const a=expr(); if(!peek()||next().t!=='rp') throw{msg:'missing )'}; return {t:'call',fn:t.v,a}; } throw {msg:'unknown '+t.v}; } throw {msg:'unexpected '+...}; } const n=expr(); if(pv;} case 'var': return x=>x; case 'ans': {const v=env.ans||0; return _=>v;} // env passed in case 'neg': {const a=go(n.a); return x=>-a(x);} case 'pct': {const a=go(n.a); return x=>a(x)/100;} case 'fact': {const a=go(n.a); return x=>fact(a(x));} case 'bin': {const a=go(n.a),b=go(n.b); switch(n.op){case '+':return x=>a(x)+b(x);case '-':...;case '*':...;case '/':...; case '^':return x=>Math.pow(a(x),b(x));}} case 'call': {const a=go(n.a); const f=makeFn(n.fn,deg); return x=>f(a(x));} } } return go(ast); } ``` makeFn closures for deg: e.g. ```js sin: deg ? v=>Math.sin(v*Math.PI/180) : Math.sin asin: deg ? v=>Math.asin(v)*180/Math.PI : Math.asin ``` For calculator eval: compile with x=> throw if var used? evaluate(ast, ans, deg): compile(ast,deg) then call with x=0 — but 'x' shouldn't be allowed in calculator... If user types x, result silently 0? Better throw "x not allowed here" in calculator context. I'll pass a flag: evaluate throws on var when `allowX=false`. Add check in 'var' case: return x=>{ if(!allowX) throw; return x; }. Compile when ans needed: env.ans fixed at compile time — pass ans value into compile or make 'ans' node read from a boxed ref. I'll pass ans as param: compile(ast,deg,ans). **Graph directive:** ```js app.directive('scGraph', ['$window','$timeout', function(...){ return {restrict:'E', scope:{}, template: '...canvas + overlay controls + fn rows? '} ``` Function rows: keep in main controller scope for the "plot" integration; directive receives via `fns="graph.fns"` attr and reads scope. Simpler: don't isolate scope — directive uses parent scope (`scope: false`) and element attrs. I'll use `scope:false` and access `$scope.graph` — pragmatic. DOM for fn rows lives in graph panel HTML in main template with ng-repeat, canvas is a `

Angular Calculator