Calculator

Calculator — Clean & Fast | MyCalc

/* styles.css Mobile-first, responsive, glassmorphism card, light/dark themes, animations. Font stack: Inter, system stacks. */ :root{ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --bg-dark: #0f172a; --bg-light: #f7f9fc; --accent: #ff930f; --accent2: #fff95b; --card-bg: rgba(255,255,255,0.05); --glass-border: rgba(255,255,255,0.06); --text: #e6eef8; --muted: rgba(230,238,248,0.6); --success: #4ade80; --danger: #ff6b6b; --shadow: 0 6px 20px rgba(2,6,23,0.6); --radius: 14px; --btn-size: 56px; --btn-gap: 10px; --transition: 200ms cubic-bezier(.2,.9,.3,1); } /* Light theme overrides */ :root[data-theme="light"]{ --card-bg: rgba(255,255,255,0.85); --glass-border: rgba(15,23,42,0.06); --bg-dark: var(--bg-light); --text: #0f172a; --muted: rgba(15,23,42,0.6); --shadow: 0 6px 20px rgba(15,23,42,0.08); } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ :root { --transition: 0ms; } } html,body{ height:100%; margin:0; font-family: var(--font-sans); background: linear-gradient(180deg, var(--bg-dark) 0%, #071029 100%); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Light theme background */ :root[data-theme="light"] body{ background: linear-gradient(180deg, var(--bg-light) 0%, #e9eef6 100%); } .container{ max-width:1100px; padding:16px; margin:0 auto; } /* Header */ .site-header{ position:sticky; top:0; z-index:20; backdrop-filter: blur(6px); border-bottom: 1px solid var(--glass-border); background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02)); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .brand{ display:flex; align-items:center; gap:12px; } .logo{ width:40px;height:40px; } .site-title{ font-size:1.1rem; margin:0; letter-spacing:0.4px; } .header-controls{ display:flex; align-items:center; gap:12px; } /* Mode switch */ .switch{ display:inline-block; position:relative; } .switch input{display:none;} .switch-track{ width:56px; height:28px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03)); border-radius:20px; border:1px solid var(--glass-border); display:flex; align-items:center; padding:4px; box-sizing:border-box; transition:all var(--transition); } .switch-thumb{ width:20px;height:20px;background:var(--accent);border-radius:50%; transform:translateX(0); transition:transform var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.25); } .switch input:checked + .switch-track .switch-thumb{ transform:translateX(28px); background:var(--accent2); } .mode-labels{display:flex;gap:8px;font-size:0.8rem;color:var(--muted);align-items:center;} .icon-btn{ background:transparent;border:none;color:var(--text);cursor:pointer;padding:8px;border-radius:8px;transition:transform var(--transition), background var(--transition); } .icon-btn:focus{outline:2px solid var(--accent);outline-offset:2px;} /* Main and card layout */ .main{padding:18px 0 80px;} .calc-wrapper{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;justify-items:center;} .calc-card{ width:100%; max-width:920px; background:var(--card-bg); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); border:1px solid var(--glass-border); transition:background var(--transition), transform var(--transition); } .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .card-title h3{margin:0;font-size:1rem;} .card-actions{display:flex;gap:8px;align-items:center;} .text-btn{background:transparent;border:none;color:var(--accent);cursor:pointer;padding:8px;border-radius:8px;font-weight:600;transition:all var(--transition);} .text-btn:hover{transform:translateY(-2px);} .display{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:14px;border-radius:12px;margin-bottom:12px;min-height:84px;display:flex;flex-direction:column;justify-content:center; box-shadow: inset 0 -2px 8px rgba(0,0,0,0.12); } .expression{color:var(--muted);font-size:0.9rem;min-height:18px;} .result{font-size:1.8rem;font-weight:700;margin-top:6px;letter-spacing:0.5px;} /* Keypad */ .keypad{display:flex;flex-direction:column;gap:10px;} .row{display:flex;gap:var(--btn-gap);} .btn{ flex:1; height:var(--btn-size); border-radius:12px; border:none; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); color:var(--text); font-size:1.05rem; cursor:pointer; position:relative; overflow:hidden; transition:transform var(--transition), box-shadow var(--transition), background var(--transition); box-shadow:0 4px 14px rgba(2,6,23,0.16); display:flex;align-items:center;justify-content:center; } .btn:focus{outline:2px solid var(--accent);outline-offset:2px} .btn:hover{transform:scale(1.03)} .btn:active{transform:scale(0.98)} .btn-aux{background:transparent;color:var(--muted);border:1px solid var(--glass-border);} .btn-ops{background:linear-gradient(180deg, rgba(255,147,15,0.12), rgba(255,147,15,0.08)); color:var(--accent);} .btn-equal{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#071029;font-weight:700;flex:1 0 112px;border-radius:12px;} .btn-secondary{flex:2;} /* ripple span */ .ripple{ position:absolute;border-radius:50%;transform:scale(0);opacity:0.45;background:rgba(255,255,255,0.3);pointer-events:none; transition:transform 400ms ease, opacity 600ms ease; } /* Scientific grid */ .sci-grid{display:grid;gap:var(--btn-gap);margin-top:8px;} .sci-grid .row{gap:8px} /* card footer */ .card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;} .footer-actions{display:flex;gap:8px;flex-wrap:wrap;} /* History panel */ .history-panel{ width:100%; max-width:920px; background:var(--card-bg); border-radius:12px;padding:12px;border:1px solid var(--glass-border); transition:all var(--transition); } .history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .history-list{list-style:none;padding:0;margin:0;max-height:260px;overflow:auto;} .history-list li{padding:8px;border-radius:8px;margin-bottom:6px;background:rgba(0,0,0,0.04);display:flex;justify-content:space-between;gap:8px;align-items:center;} .history-expr{color:var(--muted);font-size:0.9rem;} .history-res{font-weight:700;color:var(--accent);} /* Help modal */ .help-panel{ position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(2,6,23,0.6),rgba(2,6,23,0.6)); z-index:40;padding:20px; } .help-inner{background:var(--card-bg);padding:18px;border-radius:12px;max-width:620px;width:100%;border:1px solid var(--glass-border);} .help-close{float:right} /* Footer */ .site-footer{position:sticky;bottom:0;padding:12px 0;background:transparent;} .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:0.9rem;} .footer-links a{color:var(--muted);margin-right:12px;text-decoration:none;} .icon-link{color:var(--muted)} /* Responsive */ @media (min-width:720px){ .calc-wrapper{grid-template-columns: 2fr 1fr;gap:18px;align-items:start;} .sci-grid{grid-template-columns:1fr;} .keypad{gap:12px;} } @media (min-width:1000px){ .calc-wrapper{grid-template-columns: 1fr 360px;} .sci-grid{display:block} .btn{height:64px;} } /* Utility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} // app.js - Calculator logic, UI handling, storage, accessibility // Modular, commented, uses shunting-yard and RPN evaluator (no eval) // ---- Constants & state ---- const expressionEl = document.getElementById('expression'); const resultEl = document.getElementById('result'); const modeToggle = document.getElementById('modeToggle'); const sciGrid = document.getElementById('sciGrid'); const angleUnitWrap = document.getElementById('angleUnitWrap'); const angleUnit = document.getElementById('angleUnit'); const historyToggle = document.getElementById('historyToggle'); const historyPanel = document.getElementById('historyPanel'); const historyList = document.getElementById('historyList'); const helpToggle = document.getElementById('helpToggle'); const helpPanel = document.getElementById('helpPanel'); const helpClose = document.getElementById('helpClose'); const copyBtn = document.getElementById('copyBtn'); const shareBtn = document.getElementById('shareBtn'); const downloadCsv = document.getElementById('downloadCsv'); const clearAllBtn = document.getElementById('clearAll'); const clearHistoryBtn = document.getElementById('clearHistory'); const yearEl = document.getElementById('year'); const themeToggle = document.getElementById('themeToggle'); const liveAnnouncer = document.getElementById('liveAnnouncer'); // State let state = { expr: '', // current expression string result: '0', // current result string memory: 0, // memory register history: [], // {expr, result, time} angleUnit: 'deg', // 'deg' or 'rad' mode: 'basic', // 'basic' or 'scientific' theme: null // 'light' or 'dark' }; // LocalStorage keys const KEY = 'mycalc_state_v1'; // Set initial year yearEl.textContent = new Date().getFullYear(); // ---- Utilities ---- const saveState = () => { const toSave = { memory: state.memory, history: state.history, angleUnit: state.angleUnit, mode: state.mode, theme: state.theme }; localStorage.setItem(KEY, JSON.stringify(toSave)); }; const loadState = () => { try { const raw = localStorage.getItem(KEY); if (!raw) return; const parsed = JSON.parse(raw); state.memory = parsed.memory ?? 0; state.history = parsed.history ?? []; state.angleUnit = parsed.angleUnit ?? 'deg'; state.mode = parsed.mode ?? 'basic'; state.theme = parsed.theme ?? null; } catch (e) { console.warn('Failed to load state', e); } }; // Announce to screen readers function announce(text){ liveAnnouncer.textContent = text; } // Simple clamp for strings function trimExpr(e){ return e.length > 200 ? e.slice(-200) : e; } // ---- Tokenizer & Parser (Shunting-yard) ---- // Token types: number, operator, func, paren, constant, factorial const isDigit = (ch) => /[0-9]/.test(ch); const isLetter = (ch) => /[a-zA-Z]/.test(ch); // Operator definitions const OPS = { '+': {prec: 2, assoc: 'L', args:2}, '-': {prec: 2, assoc: 'L', args:2}, '*': {prec: 3, assoc: 'L', args:2}, '/': {prec: 3, assoc: 'L', args:2}, '^': {prec: 4, assoc: 'R', args:2}, '!': {prec: 5, assoc: 'L', args:1, postfix:true} }; const FUNCTIONS = new Set([ 'sin','cos','tan','asin','acos','atan', 'ln','log','sqrt','exp','abs','pow' ]); // Tokenize an expression string into tokens function tokenize(input){ const tokens = []; let i=0; input = input.replace(/\s+/g,''); while(i < input.length){ const ch = input[i]; // Number (integer or decimal) if (isDigit(ch) || (ch === '.' && isDigit(input[i+1]))){ let num = ch; i++; while(i < input.length && (isDigit(input[i]) || input[i]==='.')){ num += input[i++]; } tokens.push({type:'number', value:num}); continue; } // Operators and parentheses if (ch === '+' || ch === '-' || ch === '*' || ch === '/' || ch === '^' || ch === '!' ){ tokens.push({type:'op', value:ch}); i++; continue; } if (ch === '(' || ch === ')'){ tokens.push({type:'paren', value:ch}); i++; continue; } // Letters for functions or constants if (isLetter(ch)){ let name = ch; i++; while(i < input.length && (isLetter(input[i]) || isDigit(input[i]))){ name += input[i++]; } name = name.toLowerCase(); if (name === 'pi') tokens.push({type:'number', value: String(Math.PI)}); else if (name === 'e') tokens.push({type:'number', value: String(Math.E)}); else if (FUNCTIONS.has(name)) tokens.push({type:'func', value:name}); else { // unknown identifiers - treat as error token tokens.push({type:'unknown', value:name}); } continue; } // If we reached unknown char tokens.push({type:'unknown', value:ch}); i++; } return tokens; } // Convert infix tokens to RPN using shunting-yard function toRPN(tokens){ const out = []; const stack = []; for (let i=0;i0){ const top = stack[stack.length-1]; if (top.type === 'func') { out.push(stack.pop()); continue; } if (top.type === 'op'){ const o2 = top.value; const p1 = OPS[o1].prec; const p2 = OPS[o2].prec; if ((OPS[o1].assoc === 'L' && p1 <= p2) || (OPS[o1].assoc === 'R' && p1 < p2)){ out.push(stack.pop()); continue; } } break; } stack.push(t); } else if (t.type === 'paren'){ if (t.value === '('){ stack.push(t); } else { // pop until '(' let found=false; while(stack.length){ const top = stack.pop(); if (top.type === 'paren' && top.value === '('){ found=true; break; } else { out.push(top); } } if (!found) throw new Error('Mismatched parentheses'); // if top of stack is function, pop it onto output if (stack.length && stack[stack.length-1].type === 'func'){ out.push(stack.pop()); } } } else { throw new Error('Invalid token: ' + t.value); } } while(stack.length){ const top = stack.pop(); if (top.type === 'paren') throw new Error('Mismatched parentheses'); out.push(top); } return out; } // Evaluate RPN function evalRPN(rpn){ const stack = []; for (const t of rpn){ if (t.type === 'number'){ stack.push(Number(t.value)); } else if (t.type === 'func'){ const fn = t.value; if (fn === 'neg'){ const a = stack.pop(); stack.push(-a); continue; } if (fn === 'pow'){ // binary pow - not commonly used via 'pow(a,b)' - we treat as binary when provided const b = stack.pop(); const a = stack.pop(); stack.push(Math.pow(a,b)); continue; } if (fn === 'sin' || fn === 'cos' || fn === 'tan' || fn === 'asin' || fn === 'acos' || fn === 'atan'){ const a = stack.pop(); let val = a; if (fn === 'sin' || fn === 'cos' || fn === 'tan'){ if (state.angleUnit === 'deg'){ val = (a * Math.PI) / 180; } } let res; switch(fn){ case 'sin': res = Math.sin(val); break; case 'cos': res = Math.cos(val); break; case 'tan': res = Math.tan(val); break; case 'asin': res = Math.asin(a); if (state.angleUnit === 'deg') res = res * 180 / Math.PI; break; case 'acos': res = Math.acos(a); if (state.angleUnit === 'deg') res = res * 180 / Math.PI; break; case 'atan': res = Math.atan(a); if (state.angleUnit === 'deg') res = res * 180 / Math.PI; break; } stack.push(res); continue; } if (fn === 'ln'){ const a = stack.pop(); stack.push(Math.log(a)); continue; } if (fn === 'log'){ const a = stack.pop(); stack.push(Math.log10 ? Math.log10(a) : Math.log(a)/Math.LN10); continue; } if (fn === 'sqrt'){ const a = stack.pop(); if (a < 0) throw new Error('Square root of negative number'); stack.push(Math.sqrt(a)); continue; } if (fn === 'exp'){ const a = stack.pop(); stack.push(Math.exp(a)); continue; } if (fn === 'abs'){ const a = stack.pop(); stack.push(Math.abs(a)); continue; } throw new Error('Unknown function: ' + fn); } else if (t.type === 'op'){ if (t.value === '!'){ const a = stack.pop(); if (!Number.isInteger(a) || a < 0) throw new Error('Factorial only for non-negative integers'); let f = 1; for (let i=2;i<=a;i++) f *= i; stack.push(f); continue; } const b = stack.pop(); const a = stack.pop(); if (t.value === '+') stack.push(a + b); else if (t.value === '-') stack.push(a - b); else if (t.value === '*') stack.push(a * b); else if (t.value === '/') { if (b === 0) throw new Error('Division by zero'); stack.push(a / b); } else if (t.value === '^') stack.push(Math.pow(a,b)); else throw new Error('Unknown operator: ' + t.value); } else { throw new Error('Invalid RPN token'); } } if (stack.length !== 1) throw new Error('Invalid expression'); return stack[0]; } // Parse & evaluate a user expression string function evaluateExpression(input){ if (!input || input.trim() === '') return 0; try { // Replace unicode operators and textual pow input = input.replace(/×/g,'*').replace(/÷/g,'/').replace(/×/g,'*').replace(/−/g,'-'); // Support caret '^' for power // Tokenize const tokens = tokenize(input); // Convert to RPN const rpn = toRPN(tokens); // Evaluate RPN const val = evalRPN(rpn); if (!isFinite(val)) throw new Error('Math result not finite'); return val; } catch (e){ throw e; } } // ---- UI Helpers ---- function updateDisplay(){ expressionEl.textContent = trimExpr(state.expr) || ''; resultEl.textContent = state.result; announce('Result: ' + state.result); } // Add to history function addHistory(expr, result){ const item = {expr, result, time: new Date().toISOString()}; state.history.unshift(item); state.history = state.history.slice(0,200); saveState(); renderHistory(); } function renderHistory(){ historyList.innerHTML = ''; for (const h of state.history){ const li = document.createElement('li'); const left = document.createElement('div'); left.innerHTML = `

${escapeHtml(h.expr)}

${new Date(h.time).toLocaleString()}

`; const right = document.createElement('div'); right.innerHTML = `

${escapeHtml(String(h.result))}

`; li.appendChild(left); li.appendChild(right); li.tabIndex = 0; li.setAttribute('role','button'); li.addEventListener('click', () => { navigator.clipboard?.writeText(`${h.expr} = ${h.result}`); announce('Copied history entry to clipboard'); }); li.addEventListener('keydown', (ev) => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); li.click(); } }); historyList.appendChild(li); } } function escapeHtml(s){ return s.replace(/[&<>"']/g, (m) => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); } // Copy result async function copyResult(){ try { await navigator.clipboard.writeText(String(state.result)); announce('Result copied'); } catch (e){ announce('Copy failed'); } } // Share result async function shareResult(){ if (navigator.share){ try { await navigator.share({title:'Calculator result', text:`${state.expr} = ${state.result}`}); announce('Shared'); } catch (e){ // cancelled } } else { // fallback: copy await copyResult(); } } // Download history as CSV function downloadHistoryCSV(){ if (!state.history.length) return; const header = 'expression,result,time\n'; const rows = state.history.map(h => `"${h.expr.replace(/"/g,'""')}","${String(h.result).replace(/"/g,'""')}","${h.time}"`).join('\n'); const blob = new Blob([header + rows], {type:'text/csv'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'mycalc-history.csv'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } // ---- Event Handlers ---- // Button clicks document.querySelectorAll('.btn').forEach(btn => { // ripple effect btn.addEventListener('pointerdown', (e) => { createRipple(e, btn); }); btn.addEventListener('click', async (e) => { const val = btn.getAttribute('data-value'); const action = btn.getAttribute('data-action'); if (val) { state.expr += val; updateExpressionUI(); } else if (action) { handleAction(action); } }); }); // Create ripple function createRipple(e, el){ const rect = el.getBoundingClientRect(); const span = document.createElement('span'); span.className = 'ripple'; el.appendChild(span); const size = Math.max(rect.width, rect.height); span.style.width = span.style.height = size + 'px'; span.style.left = (e.clientX - rect.left - size/2) + 'px'; span.style.top = (e.clientY - rect.top - size/2) + 'px'; requestAnimationFrame(()=> { span.style.transform = 'scale(1)'; span.style.opacity = '0'; }); setTimeout(()=> span.remove(), 700); } // Handle named actions function handleAction(action){ try { switch(action){ case 'equals': computeResult(); break; case 'back': state.expr = state.expr.slice(0,-1); updateExpressionUI(); break; case 'sqrt': state.expr += 'sqrt('; updateExpressionUI(); break; case 'pow': state.expr += '^'; updateExpressionUI(); break; case 'fact': state.expr += '!'; updateExpressionUI(); break; case 'pi': state.expr += 'pi'; updateExpressionUI(); break; case 'e': state.expr += 'e'; updateExpressionUI(); break; case 'mc': state.memory = 0; saveState(); announce('Memory cleared'); break; case 'mr': state.expr += String(state.memory); updateExpressionUI(); break; case 'm+': computeResult(true); state.memory += Number(state.result); saveState(); announce('Added to memory'); break; case 'm-': computeResult(true); state.memory -= Number(state.result); saveState(); announce('Subtracted from memory'); break; case 'sin': case 'cos': case 'tan': case 'asin': case 'acos': case 'atan': case 'ln': case 'log': case 'exp': case 'abs': state.expr += `${action}(`; updateExpressionUI(); break; case 'pow2': state.expr += '^2'; updateExpressionUI(); break; case 'recip': state.expr = `1/(${state.expr || '0'})`; updateExpressionUI(); break; case 'rnd': state.expr += String(Math.random().toFixed(6)); updateExpressionUI(); break; case 'deg': state.angleUnit = 'deg'; angleUnit.value='deg'; announce('Angle unit set to degrees'); saveState(); break; case 'rad': state.angleUnit = 'rad'; angleUnit.value='rad'; announce('Angle unit set to radians'); saveState(); break; case 'm-': // handled earlier break; case 'clear': state.expr = ''; state.result = '0'; updateDisplay(); break; default: console.warn('Unhandled action', action); } } catch (e){ showError(e.message); } } // Compute result (and optionally avoid adding to history when triggered by memory ops) function computeResult(isSilent=false){ try { const val = evaluateExpression(state.expr); // Round small floating artifacts const rounded = Math.abs(val) < 1e-12 ? 0 : Math.round((val + Number.EPSILON) * 1e12) / 1e12; state.result = String(rounded); updateDisplay(); if (!isSilent){ addHistory(state.expr || '', state.result); } } catch (e){ showError(e.message); } } // Update expression UI (and optionally live evaluate small preview) function updateExpressionUI(){ expressionEl.textContent = trimExpr(state.expr); // live preview attempt (non-throwing) try { const val = evaluateExpression(state.expr); state.result = String(Math.round((val + Number.EPSILON) * 1e12) / 1e12); } catch (e){ // don't update result on live errors } updateDisplay(); } // Show friendly error function showError(msg){ state.result = 'Error'; updateDisplay(); announce('Error: ' + msg); // Optionally show a short toast - here we simply set result briefly setTimeout(() => { state.result = '0'; updateDisplay(); }, 2000); } // ---- Keyboard handling ---- window.addEventListener('keydown', (ev) => { const key = ev.key; if (key >= '0' && key <= '9'){ state.expr += key; updateExpressionUI(); ev.preventDefault(); return; } if (key === '.') { state.expr += '.'; updateExpressionUI(); ev.preventDefault(); return; } if (key === '+' || key === '-' || key === '*' || key === '/' || key === '^') { state.expr += key; updateExpressionUI(); ev.preventDefault(); return; } if (key === 'Enter'){ computeResult(); ev.preventDefault(); return; } if (key === 'Backspace'){ state.expr = state.expr.slice(0,-1); updateExpressionUI(); ev.preventDefault(); return; } if (key === 'Escape'){ state.expr = ''; state.result='0'; updateDisplay(); ev.preventDefault(); return; } if (key === '(' || key === ')'){ state.expr += key; updateExpressionUI(); ev.preventDefault(); return; } // letters for functions - type as plain if (/^[a-zA-Z]$/.test(key)){ state.expr += key; updateExpressionUI(); ev.preventDefault(); return; } }); // ---- UI toggles & wiring ---- modeToggle.addEventListener('change', (e) => { state.mode = e.target.checked ? 'scientific' : 'basic'; applyMode(); saveState(); }); function applyMode(){ const isSci = state.mode === 'scientific'; sciGrid.style.display = isSci ? 'grid' : 'none'; sciGrid.setAttribute('aria-hidden', String(!isSci)); angleUnitWrap.style.display = isSci ? 'block' : 'none'; historyToggle.setAttribute('aria-hidden', String(false)); } // Angle unit select angleUnit.addEventListener('change', (e) => { state.angleUnit = e.target.value; saveState(); }); // History toggle historyToggle.addEventListener('click', () => { const open = historyPanel.hasAttribute('hidden'); if (open){ historyPanel.removeAttribute('hidden'); historyToggle.setAttribute('aria-expanded','true'); } else { historyPanel.setAttribute('hidden',''); historyToggle.setAttribute('aria-expanded','false'); } }); // Help toggle helpToggle.addEventListener('click', () => { helpPanel.hidden = false; helpToggle.setAttribute('aria-expanded','true'); }); helpClose.addEventListener('click', () => { helpPanel.hidden = true; helpToggle.setAttribute('aria-expanded','false'); }); // Copy / Share / Download / Clear copyBtn.addEventListener('click', copyResult); shareBtn.addEventListener('click', shareResult); downloadCsv.addEventListener('click', downloadHistoryCSV); clearAllBtn.addEventListener('click', () => { state.expr = ''; state.result = '0'; state.history = []; saveState(); renderHistory(); updateDisplay(); }); clearHistoryBtn.addEventListener('click', () => { state.history = []; saveState(); renderHistory(); }); // Footer links disabled default // Theme toggle function applyTheme(theme){ if (theme === 'light') document.documentElement.setAttribute('data-theme','light'); else document.documentElement.removeAttribute('data-theme'); state.theme = theme; saveState(); } themeToggle.addEventListener('click', () => { const current = state.theme === 'light' ? 'dark' : 'light'; applyTheme(current === 'light' ? 'light' : null); }); // ---- Init ---- function init(){ loadState(); // Initialize theme: auto-detect if (state.theme === null){ const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches; applyTheme(prefersLight ? 'light' : null); } else { applyTheme(state.theme); } // Initialize mode modeToggle.checked = state.mode === 'scientific'; applyMode(); // Angle unit angleUnit.value = state.angleUnit ?? 'deg'; // Render history renderHistory(); // Initial display updateDisplay(); // Attach year yearEl.textContent = new Date().getFullYear(); } init(); // ---- Accessibility: focus styles, min touch targets handled via CSS ---- // ---- Unit tests (examples) in comments ---- /* Test cases (manual) evaluateExpression("2+2") -> 4 evaluateExpression("sin(90)") with deg -> 1 evaluateExpression("sqrt(16)") -> 4 evaluateExpression("5!") -> 120 evaluateExpression("2^3") -> 8 */ // Expose evaluateExpression for debugging in console window.mycalc = { evaluateExpression, state }; # MyCalc - Calculator — Clean & Fast Quick start: - Open `index.html` in your browser (no build steps). - Files: `index.html`, `styles.css`, `app.js`. Keyboard shortcuts: - Numbers and operators: type as usual. - Enter: equals - Backspace: delete last character - Escape: clear expression - Parentheses: ( and ) Features: - Basic and Scientific modes (toggle in header). - Angle unit (Deg/Rad) visible in scientific mode. - Memory: M+, M-, MR, MC. - History saved to localStorage; can be downloaded as CSV. - Theme toggle (light/dark), persists. - Accessible: keyboard navigation, screen reader announcements. Notes: - Expression parsing uses a shunting-yard algorithm and RPN evaluation (no eval). - Factorial supports non-negative integers only.

MyCalc

Calculator

Quick Tips

Example test cases (try these)