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() {\n const [input, setInput] = useState(\"\");\n\n const handleClick = (value) => {\n setInput(input + value);\n };\n\n const clear = () => {\n setInput(\"\");\n };\n\n const calculate = () => {\n try {\n // Replace symbols for calculation\n const expression = input.replace(/÷/g, \"/\").replace(/×/g, \"*\");\n setInput(eval(expression).toString());\n } catch {\n setInput(\"Error\");\n }\n };\n\n return (\n

\n \n {/* Display */}\n

\n {input || \"0\"}\n

\n\n {/* Buttons */}\n

\n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\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 My App\n\n\n

\n\n"}}

Calculator but bettered by starlight (zuri)