Calculator — Basic & Scientific

/* styles.css Polished and responsive calculator styles with smooth animations */ :root { --bg: #0f1724; --card: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); --accent: #6ee7b7; --accent-2: #60a5fa; --glass: rgba(255,255,255,0.03); --muted: rgba(255,255,255,0.6); --shadow: 0 8px 24px rgba(2,6,23,0.6); --radius: 14px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.06), transparent), var(--bg); color: #e6eef8; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .site-header { padding: 22px 28px; backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border-bottom: 1px solid rgba(255,255,255,0.03); } .header-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 18px; } .brand { margin: 0; font-size: 20px; letter-spacing: 0.4px; color: var(--accent); } .tagline { margin: 0; color: var(--muted); font-size: 13px; } .mode-toggle { margin-left: auto; display:flex; align-items:center; gap:10px; } /* switch */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width:0; height:0; } .slider { position:absolute; cursor:pointer; inset:0; border-radius: 20px; background: rgba(255,255,255,0.06); transition: all .22s ease; box-shadow: inset 0 -2px 6px rgba(0,0,0,0.35); } .slider::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transform:translateZ(0); transition: all .22s cubic-bezier(.2,.9,.3,1); } .switch input:checked + .slider { background: linear-gradient(90deg,var(--accent),var(--accent-2)); } .switch input:checked + .slider::after { left:23px; } .main { max-width: 1100px; margin: 28px auto; display: grid; grid-template-columns: 1fr 320px; gap: 22px; padding: 0 18px; align-items: start; } /* calculator card */ .calculator-card { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-height: 520px; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; border: 1px solid rgba(255,255,255,0.03); } .display-area { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 96px; align-items: flex-end; justify-content: center; transition: transform .12s ease; } .expression { color: rgba(255,255,255,0.6); font-size: 14px; width: 100%; text-align: right; word-break: break-all; min-height: 18px; } .result { font-size: 28px; font-weight: 600; color: #ffffff; width: 100%; text-align: right; } .controls { display:flex; gap:10px; } .controls .btn { flex: 1; } .buttons-grid { display:flex; gap:12px; flex-direction:column; } .sci-row { display:flex; gap:8px; transition: max-height .28s ease, opacity .22s ease; overflow:hidden; } .sci-row.hidden { max-height: 0; opacity: 0; } .keypad { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; } .sci-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:10px; } .btn { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.03); color: #e6eef8; padding: 14px 12px; font-size: 16px; border-radius: 10px; cursor: pointer; transition: transform .08s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 4px 12px rgba(2,6,23,0.55); user-select: none; } .btn:active { transform: translateY(2px) scale(.998); } .btn.op { background: linear-gradient(180deg, rgba(96,165,250,0.12), rgba(96,165,250,0.08)); color:#fff; } .btn.equals { grid-column: span 1; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color: #07203b; font-weight:600; box-shadow: 0 8px 28px rgba(96,165,250,0.22); } .btn.zero { grid-column: span 2; } .btn.clear { background: rgba(255,255,255,0.04); color:#ff6b6b; } .btn.back { background: rgba(255,255,255,0.03); } .btn.func { background: rgba(255,255,255,0.02); color: var(--muted); } .history { margin-top: 6px; color: rgba(255,255,255,0.55); font-size: 13px; max-height: 120px; overflow:auto; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.02); } .instructions { background: rgba(255,255,255,0.02); border-radius: var(--radius); padding: 16px; color: var(--muted); font-size: 14px; line-height: 1.5; border: 1px solid rgba(255,255,255,0.02); position: sticky; top: 92px; height: fit-content; } .instructions h2 { margin-top: 0; color: #fff; font-size: 16px; } .shortcut { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,0.7); } .site-footer { margin-top: 28px; padding: 18px; color: rgba(255,255,255,0.6); text-align: center; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.03); background: linear-gradient(180deg, transparent, rgba(255,255,255,0.01)); } /* Responsive */ @media (max-width: 880px) { .main { grid-template-columns: 1fr; padding-bottom: 40px; } .instructions { order: 2; position: static; margin-top: 8px; } } // app.js // Calculator logic with basic and scientific modes, keyboard support and safe evaluation mapping. // --- Utilities --- const $ = (sel, root = document) => root.querySelector(sel); const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel)); // --- DOM References --- const expressionEl = $('#expression'); const resultEl = $('#result'); const buttonsContainer = $('#buttons'); const modeSwitch = $('#modeSwitch'); const sciRow = document.querySelector('.sci-row'); const historyEl = $('#history'); // --- State --- const state = { expression: '', displayed: '0', scientific: false, history: [] }; // --- Math helpers and safe mapping --- // Provide a safe evaluation environment by translating calculator tokens into a JS expression function translateExpression(expr) { // Normalize common characters expr = expr.replace(/\s+/g, ''); expr = expr.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-'); // Replace unicode pi and e expr = expr.replace(/π/g, 'pi').replace(/π\b/g, 'pi'); // Replace caret with exponent expr = expr.replace(/\^/g, '**'); // Replace percent (e.g., 50%) with (50/100) expr = expr.replace(/([\d\.]+)%/g, '($1/100)'); // Replace factorial n! with fact(n) expr = expr.replace(/(\d+)!/g, 'fact($1)'); // Map function names to Math.* equivalents or helpers const mapping = { 'sin(': 'Math.sin(', 'cos(': 'Math.cos(', 'tan(': 'Math.tan(', 'ln(': 'Math.log(', 'log10(': 'Math.log10 ? Math.log10(' : 'Math.log(', 'sqrt(': 'Math.sqrt(', 'abs(': 'Math.abs(', 'exp(': 'Math.exp(', 'pi': '(Math.PI)', 'e': '(Math.E)' }; // Replace function names (longer keys first) const keys = Object.keys(mapping).sort((a, b) => b.length - a.length); for (const k of keys) { expr = expr.split(k).join(mapping[k]); } return expr; } // Factorial helper function fact(n) { n = Number(n); if (!Number.isFinite(n) || n < 0) return NaN; if (n === 0 || n === 1) return 1; let res = 1; for (let i = 2; i <= Math.floor(n); i++) res *= i; return res; } // Safe evaluate: only allow digits, operators, parentheses, Math, fact and numbers function safeEval(raw) { try { const mapped = translateExpression(raw); // Basic injection check: allow only these characters after translation if (!/^[0-9\.\+\-\*\/\%\sMatha-zA-Z_,\*\/\-\+\)\(ePI\*]+$/.test(mapped)) { return 'Error'; } // Create a function with helpers in scope const fn = new Function('fact', `return (${mapped});`); const value = fn(fact); if (typeof value === 'number' && !Number.isFinite(value)) return 'Error'; return value; } catch (e) { return 'Error'; } } // --- UI Update Helpers --- function updateDisplay() { expressionEl.textContent = state.expression; resultEl.textContent = state.displayed; } function pushHistory(entry) { state.history.unshift(entry); if (state.history.length > 8) state.history.pop(); renderHistory(); } function renderHistory() { historyEl.innerHTML = ''; state.history.forEach(item => { const div = document.createElement('div'); div.className = 'history-item'; div.textContent = `${item.expr} = ${item.result}`; historyEl.appendChild(div); }); } // --- Actions --- function clearAll() { state.expression = ''; state.displayed = '0'; updateDisplay(); } function backspace() { if (state.expression.length === 0) return; state.expression = state.expression.slice(0, -1); state.displayed = state.expression || '0'; updateDisplay(); } function appendValue(val) { // If a previous result sits and user starts typing a number, reset expression if (state.displayed !== '0' && state.expression === '') { // If last action was equals, starting a number should reset } state.expression += val; state.displayed = state.expression; updateDisplay(); } function evaluateExpression() { if (!state.expression) return; const res = safeEval(state.expression); if (res === 'Error' || typeof res === 'undefined' || Number.isNaN(res)) { state.displayed = 'Error'; } else { // Format result nicely state.displayed = formatNumber(res); pushHistory({ expr: state.expression, result: state.displayed }); state.expression = ''; // Clear expression after evaluate } updateDisplay(); } function formatNumber(n) { // Show up to 12 significant digits, remove trailing zeros if (typeof n !== 'number') return String(n); if (Math.abs(n) >= 1e12 || (Math.abs(n) > 0 && Math.abs(n) < 1e-9)) { return n.toExponential(8); } let s = parseFloat(n.toFixed(12)).toString(); return s; } // --- Event Handlers --- // Button clicks (delegation) buttonsContainer.addEventListener('click', (ev) => { const btn = ev.target.closest('button'); if (!btn) return; const action = btn.dataset.action; const value = btn.dataset.value; if (action === 'clear') { clearAll(); return; } if (action === 'back') { backspace(); return; } if (action === 'equals') { evaluateExpression(); return; } if (value) { appendValue(value); return; } }); // Top controls: clear/back/percent/op area document.querySelectorAll('.controls .btn').forEach(b => { b.addEventListener('click', (ev) => { const action = b.dataset.action; const value = b.dataset.value; if (action === 'clear') clearAll(); else if (action === 'back') backspace(); else if (value === '%') appendValue('%'); }); }); // Mode switch modeSwitch.addEventListener('change', (e) => { state.scientific = e.target.checked; if (state.scientific) { sciRow.classList.remove('hidden'); } else { sciRow.classList.add('hidden'); } }); // Keyboard support window.addEventListener('keydown', (ev) => { const key = ev.key; if (key === 'Enter') { ev.preventDefault(); evaluateExpression(); return; } if (key === 'Escape') { clearAll(); return; } if (key === 'Backspace') { backspace(); return; } // map keys for operators const keyMap = { '/': '÷', '*': '×', '^': '^', '(': '(', ')': ')', '%': '%', '.': '.', '+': '+', '-': '-' }; if ((key >= '0' && key <= '9') || key === '.') { appendValue(key); return; } if (Object.prototype.hasOwnProperty.call(keyMap, key)) { appendValue(keyMap[key]); return; } // letter keys for functions (quick input) if (/^[a-zA-Z]$/.test(key)) { // map common function starts const map = { s: 'sin(', c: 'cos(', t: 'tan(', l: 'ln(', p: 'pi', e: 'e' }; if (map[key]) { appendValue(map[key]); } } }); // Make history items clickable to re-use expression historyEl.addEventListener('click', (ev) => { const item = ev.target.closest('.history-item'); if (!item) return; const text = item.textContent || ''; const match = text.split(' = ')[0]; if (match) { state.expression = match; state.displayed = state.expression; updateDisplay(); } }); // Initialize UI function init() { clearAll(); sciRow.classList.add('hidden'); updateDisplay(); // Small animation: fade in buttons document.querySelectorAll('.btn').forEach((b, i) => { b.style.opacity = 0; b.style.transform = 'translateY(8px)'; setTimeout(() => { b.style.transition = 'opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1)'; b.style.opacity = 1; b.style.transform = 'translateY(0)'; }, 40 + i * 12); }); } // Run init on load init(); // Expose helpers for debugging (optional) window.calc = { clearAll, appendValue, evaluateExpression, safeEval, formatNumber };