import { useState, useCallback } from "react"; import { Delete } from "lucide-react"; import clsx from "clsx"; const BUTTONS = [ { label: "AC", type: "action", action: "clear" }, { label: "+/-", type: "action", action: "negate" }, { label: "%", type: "action", action: "percent" }, { label: "÷", type: "operator", value: "/" }, { label: "7", type: "digit", value: "7" }, { label: "8", type: "digit", value: "8" }, { label: "9", type: "digit", value: "9" }, { label: "×", type: "operator", value: "*" }, { label: "4", type: "digit", value: "4" }, { label: "5", type: "digit", value: "5" }, { label: "6", type: "digit", value: "6" }, { label: "−", type: "operator", value: "-" }, { label: "1", type: "digit", value: "1" }, { label: "2", type: "digit", value: "2" }, { label: "3", type: "digit", value: "3" }, { label: "+", type: "operator", value: "+" }, { label: "0", type: "digit", value: "0", wide: true }, { label: ".", type: "digit", value: "." }, { label: "=", type: "equals" }, ]; function formatDisplay(value) { if (value === "Error") return "Error"; const num = parseFloat(value); if (isNaN(num)) return value; if (Math.abs(num) >= 1e12 || (Math.abs(num) < 1e-6 && num !== 0)) { return num.toExponential(4); } const parts = value.split("."); if (parts[1] !== undefined) { return value; } return num.toLocaleString("en-US", { maximumFractionDigits: 10 }); } function getFontSize(display) { const len = display.length; if (len <= 6) return "3rem"; if (len <= 9) return "2.4rem"; if (len <= 12) return "1.9rem"; return "1.4rem"; } export default function Calculator() { const [current, setCurrent] = useState("0"); const [previous, setPrevious] = useState(""); const [operator, setOperator] = useState(null); const [waitingForOperand, setWaitingForOperand] = useState(false); const [expression, setExpression] = useState(""); const [justEvaluated, setJustEvaluated] = useState(false); const calculate = useCallback((a, b, op) => { const numA = parseFloat(a); const numB = parseFloat(b); switch (op) { case "+": return String(numA + numB); case "-": return String(numA - numB); case "*": return String(numA * numB); case "/": if (numB === 0) return "Error"; return String(numA / numB); default: return b; } }, []); const handleDigit = useCallback((value) => { if (justEvaluated) { if (value === ".") { setCurrent("0."); } else { setCurrent(value); } setExpression(""); setJustEvaluated(false); setWaitingForOperand(false); return; } if (waitingForOperand) { setCurrent(value === "." ? "0." : value); setWaitingForOperand(false); return; } if (value === ".") { if (current.includes(".")) return; setCurrent(current + "."); return; } if (current === "0" && value !== ".") { setCurrent(value); } else { if (current.replace("-", "").replace(".", "").length >= 12) return; setCurrent(current + value); } }, [current, waitingForOperand, justEvaluated]); const handleOperator = useCallback((op) => { setJustEvaluated(false); if (operator && !waitingForOperand) { const result = calculate(previous, current, operator); setCurrent(result); setPrevious(result); const opSymbol = { "+": "+", "-": "−", "*": "×", "/": "÷" }[op]; setExpression(result + " " + opSymbol); } else { setPrevious(current); const opSymbol = { "+": "+", "-": "−", "*": "×", "/": "÷" }[op]; setExpression(current + " " + opSymbol); } setOperator(op); setWaitingForOperand(true); }, [current, previous, operator, waitingForOperand, calculate]); const handleEquals = useCallback(() => { if (!operator || waitingForOperand) return; const result = calculate(previous, current, operator); const opSymbol = { "+": "+", "-": "−", "*": "×", "/": "÷" }[operator]; setExpression(previous + " " + opSymbol + " " + current + " ="); setCurrent(result); setPrevious(""); setOperator(null); setWaitingForOperand(false); setJustEvaluated(true); }, [current, previous, operator, waitingForOperand, calculate]); const handleAction = useCallback((action) => { switch (action) { case "clear": setCurrent("0"); setPrevious(""); setOperator(null); setWaitingForOperand(false); setExpression(""); setJustEvaluated(false); break; case "negate": if (current !== "0" && current !== "Error") { setCurrent(String(parseFloat(current) * -1)); } break; case "percent": if (current !== "Error") { setCurrent(String(parseFloat(current) / 100)); } break; default: break; } }, [current]); const handleBackspace = useCallback(() => { if (justEvaluated || current === "Error") { setCurrent("0"); setJustEvaluated(false); return; } if (current.length === 1 || (current.length === 2 && current.startsWith("-"))) { setCurrent("0"); } else { setCurrent(current.slice(0, -1)); } }, [current, justEvaluated]); const displayValue = formatDisplay(current); const acLabel = current !== "0" || previous !== "" || operator ? "C" : "AC"; return (

{/* Display */}

{expression || "\u00A0"}

{displayValue}

{/* Buttons */}

{BUTTONS.map((btn, i) => { const isActiveOp = btn.type === "operator" && btn.value === operator && waitingForOperand; const isEquals = btn.type === "equals"; return ( ); })}

); }

Forge

Open Work

Discussion