My App

{"/styles.css":{"code":".app {\n font-family: system-ui, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nh1 {\n color: #333;\n}"},"/App.js":{"code":"import { useState } from \"react\";\n\nexport default function App() { const [input, setInput] = useState(\"\");\n\nconst handleClick = (value) => { setInput((prev) => prev + value); };\n\nconst clear = () => setInput(\"\");\n\nconst calculate = () => { try { setInput(eval(input).toString()); } catch { setInput(\"Error\"); } };\n\nconst buttons = [ \"C\", \"%\", \"÷\", \"×\", \"7\", \"8\", \"9\", \"-\", \"4\", \"5\", \"6\", \"+\", \"1\", \"2\", \"3\", \"=\", \"0\", \".\" ];\n\nreturn (

\n\n

\n {buttons.map((btn, i) => (\n {\n if (btn === \"C\") clear();\n else if (btn === \"=\") calculate();\n else handleClick(btn);\n }}\n className={`p-4 rounded-lg text-lg text-white transition active:scale-95\n ${btn === \"C\" ? \"bg-red-500\" : \"bg-gray-600 hover:bg-gray-500\"}\n ${btn === \"=\" ? \"bg-green-500 row-span-2\" : \"\"}\n ${btn === \"0\" ? \"col-span-2\" : \"\"}`}\n >\n {btn}\n \n ))}\n

\n\n); }"},"/index.js":{"code":"import React, { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./styles.css\";\n\nimport App from \"./App\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n \n \n \n);"},"/public/index.html":{"code":"\n\n\n \n \n \n My App\n\n\n

\n\n"}}

calcultroller by starlight (zuri)