function MainComponent() { const [display, setDisplay] = useState("0"); const [previousValue, setPreviousValue] = useState(null); const [operation, setOperation] = useState(null); const [waitingForOperand, setWaitingForOperand] = useState(false); const [memory, setMemory] = useState(0); const [isRadians, setIsRadians] = useState(false); const [history, setHistory] = useState([]); const [activeTab, setActiveTab] = useState("calculator"); const [functions, setFunctions] = useState([ "x^2" ]); const [currentFunction, setCurrentFunction] = useState(""); const [graphData, setGraphData] = useState([]); const canvasRef = useRef(null); // Calculator functions const inputNumber = (num)=>{ if (waitingForOperand) { setDisplay(String(num)); setWaitingForOperand(false); } else { setDisplay(display === "0" ? String(num) : display + num); } }; const inputDecimal = ()=>{ if (waitingForOperand) { setDisplay("0."); setWaitingForOperand(false); } else if (display.indexOf(".") === -1) { setDisplay(display + "."); } }; const clear = ()=>{ setDisplay("0"); setPreviousValue(null); setOperation(null); setWaitingForOperand(false); }; const performOperation = (nextOperation)=>{ const inputValue = parseFloat(display); if (previousValue === null) { setPreviousValue(inputValue); } else if (operation) { const currentValue = previousValue || 0; const newValue = calculate(currentValue, inputValue, operation); setDisplay(String(newValue)); setPreviousValue(newValue); addToHistory(`${currentValue} ${operation} ${inputValue} = ${newValue}`); } setWaitingForOperand(true); setOperation(nextOperation); }; const calculate = (firstValue, secondValue, operation)=>{ switch(operation){ case "+": return firstValue + secondValue; case "-": return firstValue - secondValue; case "*": return firstValue * secondValue; case "/": return secondValue !== 0 ? firstValue / secondValue : 0; case "^": return Math.pow(firstValue, secondValue); default: return secondValue; } }; const performScientificFunction = (func)=>{ const value = parseFloat(display); let result; switch(func){ case "sin": result = Math.sin(isRadians ? value : value * Math.PI / 180); break; case "cos": result = Math.cos(isRadians ? value : value * Math.PI / 180); break; case "tan": result = Math.tan(isRadians ? value : value * Math.PI / 180); break; case "log": result = Math.log10(value); break; case "ln": result = Math.log(value); break; case "sqrt": result = Math.sqrt(value); break; case "1/x": result = 1 / value; break; case "x^2": result = value * value; break; case "x^3": result = value * value * value; break; case "pi": result = Math.PI; break; case "e": result = Math.E; break; default: return; } setDisplay(String(result)); addToHistory(`${func}(${value}) = ${result}`); setWaitingForOperand(true); }; const addToHistory = (entry)=>{ setHistory((prev)=>[ entry, ...prev.slice(0, 9) ]); }; // Graph plotting functions const plotFunction = (func, canvas, ctx)=>{ const width = canvas.width; const height = canvas.height; const centerX = width / 2; const centerY = height / 2; const scale = 20; ctx.clearRect(0, 0, width, height); // Draw grid ctx.strokeStyle = "#333"; ctx.lineWidth = 1; for(let i = 0; i < width; i += scale){ ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, height); ctx.stroke(); } for(let i = 0; i < height; i += scale){ ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(width, i); ctx.stroke(); } // Draw axes ctx.strokeStyle = "#666"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, centerY); ctx.lineTo(width, centerY); ctx.moveTo(centerX, 0); ctx.lineTo(centerX, height); ctx.stroke(); // Plot function ctx.strokeStyle = "#00ff88"; ctx.lineWidth = 2; ctx.beginPath(); let firstPoint = true; for(let x = -centerX; x < centerX; x += 0.5){ try { const realX = x / scale; const y = evaluateFunction(func, realX); const plotY = centerY - y * scale; if (firstPoint) { ctx.moveTo(x + centerX, plotY); firstPoint = false; } else { ctx.lineTo(x + centerX, plotY); } } catch (e) { firstPoint = true; } } ctx.stroke(); }; const evaluateFunction = (func, x)=>{ // Simple function parser - supports basic functions const expression = func.replace(/x/g, `(${x})`); // Replace common functions const processed = expression.replace(/sin/g, "Math.sin").replace(/cos/g, "Math.cos").replace(/tan/g, "Math.tan").replace(/log/g, "Math.log10").replace(/ln/g, "Math.log").replace(/sqrt/g, "Math.sqrt").replace(/\^/g, "**"); return eval(processed); }; const drawGraph = ()=>{ const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); canvas.width = 400; canvas.height = 300; functions.forEach((func, index)=>{ plotFunction(func, canvas, ctx); }); }; useEffect(()=>{ if (activeTab === "graph") { setTimeout(drawGraph, 100); } }, [ activeTab, functions ]); const Button = ({ onClick, children, className = "", variant = "default" })=>{ const baseClass = "h-12 rounded-xl font-semibold text-sm transition-all duration-200 active:scale-95 shadow-lg"; const variants = { default: "bg-gray-700 hover:bg-gray-600 text-white", primary: "bg-blue-600 hover:bg-blue-500 text-white", secondary: "bg-green-600 hover:bg-green-500 text-white", accent: "bg-purple-600 hover:bg-purple-500 text-white", danger: "bg-red-600 hover:bg-red-500 text-white" }; return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: `${baseClass} ${variants[variant]} ${className}`, __source: { fileName: "", lineNumber: 243, columnNumber: 7 }, __self: this }, children); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-4", __source: { fileName: "", lineNumber: 253, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 254, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white text-center mb-8 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 255, columnNumber: 9 }, __self: this }, "Scientific Calculator & Graphing Tool"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 260, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-800/50 backdrop-blur-lg rounded-2xl p-2 border border-slate-700", __source: { fileName: "", lineNumber: 261, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("calculator"), className: `px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${activeTab === "calculator" ? "bg-blue-600 text-white shadow-lg" : "text-slate-300 hover:text-white hover:bg-slate-700"}`, __source: { fileName: "", lineNumber: 262, columnNumber: 13 }, __self: this }, "Calculator"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("graph"), className: `px-6 py-3 rounded-xl font-semibold transition-all duration-300 ml-2 ${activeTab === "graph" ? "bg-purple-600 text-white shadow-lg" : "text-slate-300 hover:text-white hover:bg-slate-700"}`, __source: { fileName: "", lineNumber: 272, columnNumber: 13 }, __self: this }, "Graph Plotter"))), /*#__PURE__*/ React.createElement("div", { className: "grid lg:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 285, columnNumber: 9 }, __self: this }, activeTab === "calculator" && /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 288, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-800/50 backdrop-blur-lg rounded-3xl p-6 border border-slate-700 shadow-2xl", __source: { fileName: "", lineNumber: 289, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-900 rounded-2xl p-6 mb-6 border border-slate-600", __source: { fileName: "", lineNumber: 291, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 292, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-mono text-white mb-2 min-h-[50px] flex items-center justify-end", __source: { fileName: "", lineNumber: 293, columnNumber: 21 }, __self: this }, display), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-slate-400", __source: { fileName: "", lineNumber: 296, columnNumber: 21 }, __self: this }, isRadians ? "RAD" : "DEG", " | Memory: ", memory))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-6", __source: { fileName: "", lineNumber: 302, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 304, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-3", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("sin"), variant: "accent", __source: { fileName: "", lineNumber: 307, columnNumber: 23 }, __self: this }, "sin"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("cos"), variant: "accent", __source: { fileName: "", lineNumber: 313, columnNumber: 23 }, __self: this }, "cos"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("tan"), variant: "accent", __source: { fileName: "", lineNumber: 319, columnNumber: 23 }, __self: this }, "tan"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("log"), variant: "accent", __source: { fileName: "", lineNumber: 325, columnNumber: 23 }, __self: this }, "log"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("ln"), variant: "accent", __source: { fileName: "", lineNumber: 331, columnNumber: 23 }, __self: this }, "ln"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("sqrt"), variant: "accent", __source: { fileName: "", lineNumber: 339, columnNumber: 23 }, __self: this }, "√"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("x^2"), variant: "accent", __source: { fileName: "", lineNumber: 345, columnNumber: 23 }, __self: this }, "x²"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("x^3"), variant: "accent", __source: { fileName: "", lineNumber: 351, columnNumber: 23 }, __self: this }, "x³"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("^"), variant: "accent", __source: { fileName: "", lineNumber: 357, columnNumber: 23 }, __self: this }, "x^y"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("1/x"), variant: "accent", __source: { fileName: "", lineNumber: 363, columnNumber: 23 }, __self: this }, "1/x"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>setMemory(memory + parseFloat(display)), variant: "secondary", __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this }, "M+"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>setMemory(memory - parseFloat(display)), variant: "secondary", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, "M-"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>setDisplay(String(memory)), variant: "secondary", __source: { fileName: "", lineNumber: 383, columnNumber: 23 }, __self: this }, "MR"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>setMemory(0), variant: "secondary", __source: { fileName: "", lineNumber: 389, columnNumber: 23 }, __self: this }, "MC"), /*#__PURE__*/ React.createElement(Button, { onClick: clear, variant: "danger", __source: { fileName: "", lineNumber: 392, columnNumber: 23 }, __self: this }, "C"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(7), __source: { fileName: "", lineNumber: 397, columnNumber: 23 }, __self: this }, "7"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(8), __source: { fileName: "", lineNumber: 398, columnNumber: 23 }, __self: this }, "8"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(9), __source: { fileName: "", lineNumber: 399, columnNumber: 23 }, __self: this }, "9"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("/"), variant: "primary", __source: { fileName: "", lineNumber: 400, columnNumber: 23 }, __self: this }, "÷"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>setIsRadians(!isRadians), variant: "secondary", __source: { fileName: "", lineNumber: 406, columnNumber: 23 }, __self: this }, isRadians ? "RAD" : "DEG"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(4), __source: { fileName: "", lineNumber: 414, columnNumber: 23 }, __self: this }, "4"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(5), __source: { fileName: "", lineNumber: 415, columnNumber: 23 }, __self: this }, "5"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(6), __source: { fileName: "", lineNumber: 416, columnNumber: 23 }, __self: this }, "6"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("*"), variant: "primary", __source: { fileName: "", lineNumber: 417, columnNumber: 23 }, __self: this }, "×"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("pi"), variant: "accent", __source: { fileName: "", lineNumber: 423, columnNumber: 23 }, __self: this }, "π"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(1), __source: { fileName: "", lineNumber: 431, columnNumber: 23 }, __self: this }, "1"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(2), __source: { fileName: "", lineNumber: 432, columnNumber: 23 }, __self: this }, "2"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(3), __source: { fileName: "", lineNumber: 433, columnNumber: 23 }, __self: this }, "3"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("-"), variant: "primary", __source: { fileName: "", lineNumber: 434, columnNumber: 23 }, __self: this }, "-"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performScientificFunction("e"), variant: "accent", __source: { fileName: "", lineNumber: 440, columnNumber: 23 }, __self: this }, "e"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>inputNumber(0), className: "col-span-2", __source: { fileName: "", lineNumber: 448, columnNumber: 23 }, __self: this }, "0"), /*#__PURE__*/ React.createElement(Button, { onClick: inputDecimal, __source: { fileName: "", lineNumber: 454, columnNumber: 23 }, __self: this }, "."), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("+"), variant: "primary", __source: { fileName: "", lineNumber: 455, columnNumber: 23 }, __self: this }, "+"), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>performOperation("="), variant: "primary", __source: { fileName: "", lineNumber: 461, columnNumber: 23 }, __self: this }, "="))), /*#__PURE__*/ React.createElement("div", { className: "w-64", __source: { fileName: "", lineNumber: 471, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-900 rounded-2xl p-4 border border-slate-600", __source: { fileName: "", lineNumber: 472, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3", __source: { fileName: "", lineNumber: 473, columnNumber: 23 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 max-h-64 overflow-y-auto", __source: { fileName: "", lineNumber: 474, columnNumber: 23 }, __self: this }, history.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm text-slate-300 p-2 bg-slate-800 rounded", __source: { fileName: "", lineNumber: 476, columnNumber: 27 }, __self: this }, entry)))))))), activeTab === "graph" && /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 493, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-800/50 backdrop-blur-lg rounded-3xl p-6 border border-slate-700 shadow-2xl", __source: { fileName: "", lineNumber: 494, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-white mb-6", __source: { fileName: "", lineNumber: 495, columnNumber: 17 }, __self: this }, "Function Grapher"), /*#__PURE__*/ React.createElement("div", { className: "grid lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 499, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-1", __source: { fileName: "", lineNumber: 501, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-900 rounded-2xl p-4 border border-slate-600", __source: { fileName: "", lineNumber: 502, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold mb-3", __source: { fileName: "", lineNumber: 503, columnNumber: 23 }, __self: this }, "Functions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 506, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: currentFunction, onChange: (e)=>setCurrentFunction(e.target.value), placeholder: "Enter function (e.g., x^2, sin(x))", className: "w-full p-3 bg-slate-800 border border-slate-600 rounded-xl text-white placeholder-slate-400", __source: { fileName: "", lineNumber: 507, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement(Button, { onClick: ()=>{ if (currentFunction) { setFunctions([ ...functions, currentFunction ]); setCurrentFunction(""); } }, variant: "primary", className: "w-full", __source: { fileName: "", lineNumber: 514, columnNumber: 25 }, __self: this }, "Add Function"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 527, columnNumber: 25 }, __self: this }, functions.map((func, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between bg-slate-800 p-2 rounded-lg", __source: { fileName: "", lineNumber: 529, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-slate-300 text-sm", __source: { fileName: "", lineNumber: 533, columnNumber: 31 }, __self: this }, "f(x) = ", func), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setFunctions(functions.filter((_, i)=>i !== index)), className: "text-red-400 hover:text-red-300", __source: { fileName: "", lineNumber: 536, columnNumber: 31 }, __self: this }, "×")))), /*#__PURE__*/ React.createElement("div", { className: "pt-4 border-t border-slate-600", __source: { fileName: "", lineNumber: 550, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-medium mb-2", __source: { fileName: "", lineNumber: 551, columnNumber: 27 }, __self: this }, "Sample Functions:"), /*#__PURE__*/ React.createElement("div", { className: "space-y-1 text-sm text-slate-400", __source: { fileName: "", lineNumber: 554, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 555, columnNumber: 29 }, __self: this }, "• x^2 (parabola)"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 556, columnNumber: 29 }, __self: this }, "• sin(x) (sine wave)"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 557, columnNumber: 29 }, __self: this }, "• x^3 - x (cubic)"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 558, columnNumber: 29 }, __self: this }, "• sqrt(x) (square root)")))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 566, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-slate-900 rounded-2xl p-4 border border-slate-600", __source: { fileName: "", lineNumber: 567, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 568, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-white font-semibold", __source: { fileName: "", lineNumber: 569, columnNumber: 25 }, __self: this }, "Graph"), /*#__PURE__*/ React.createElement(Button, { onClick: drawGraph, variant: "primary", __source: { fileName: "", lineNumber: 570, columnNumber: 25 }, __self: this }, "Refresh")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 574, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "border border-slate-600 rounded-xl bg-black", width: "400", height: "300", __source: { fileName: "", lineNumber: 575, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-slate-400 mt-2", __source: { fileName: "", lineNumber: 582, columnNumber: 23 }, __self: this }, "Green lines show your functions plotted on the coordinate plane")))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 595, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.3s ease-out; } `)); }