🧮 Math Expression Evaluator

\n setExpression(e.target.value)}\n placeholder=\"Enter math expression (e.g., 2^3, sin(pi/2))\"\n style={styles.input}\n />\n \n

\n {result !== null && (\n

\n Result: {result}\n

\n )}\n {error && (\n

\n Error: {error}\n

\n )}\n

Examples:

2 + 3
sin(pi/2)
sqrt(16)
log(10)

\n \n View Source\n \n

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"system-ui, sans-serif\",\n maxWidth: \"500px\",\n margin: \"0 auto\",\n padding: \"20px\",\n textAlign: \"center\",\n },\n inputContainer: {\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gap: \"15px\",\n marginBottom: \"15px\",\n },\n input: {\n padding: \"10px\",\n width: \"300px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n },\n button: {\n padding: \"10px 15px\",\n backgroundColor: \"#007bff\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n },\n result: {\n marginTop: \"20px\",\n fontSize: \"18px\",\n fontWeight: \"bold\",\n color: \"green\",\n },\n error: {\n marginTop: \"20px\",\n fontSize: \"18px\",\n fontWeight: \"bold\",\n color: \"red\",\n },\n examples: {\n marginTop: \"20px\",\n color: \"#666\",\n },\n sourceLink: {\n display: \"block\",\n marginTop: \"20px\",\n color: \"#666\",\n textDecoration: \"none\",\n },\n};\n\n/**\n * Client-only code\n * Renders the React application\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n/**\n * Server-side handler for evaluating math expressions using math.js\n */\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const expression = url.searchParams.get(\"expr\") || \"\";\n\n try {\n // Explicitly use math.evaluate with a scope to handle more complex expressions\n const scope = {\n pi: Math.PI,\n e: Math.E,\n };\n\n console.log(\"Attempting to evaluate expression:\", expression);\n\n // Use math.js to evaluate the expression\n const result = math.evaluate(expression, scope);\n\n console.log(\"Raw evaluation result:\", result);\n\n // Handle different types of results\n let numericResult: number;\n if (typeof result === 'number') {\n numericResult = result;\n } else if (typeof result === 'boolean') {\n numericResult = result ? 1 : 0;\n } else if (Array.isArray(result)) {\n // If it's an array, take the first element\n numericResult = Number(result[0]);\n } else {\n numericResult = Number(result);\n }\n\n console.log(\"Converted numeric result:\", numericResult);\n\n // Ensure the result is a valid number\n if (isNaN(numericResult)) {\n throw new Error(\"Could not convert result to a number\");\n }\n\n return new Response(JSON.stringify({ randomSeed: numericResult }), {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (error) {\n console.error(\"Math evaluation error:\", error);\n\n return new Response(\n JSON.stringify({\n randomSeed: null,\n error: error instanceof Error ? error.message : \"Invalid mathematical expression\",\n }),\n {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n },\n },\n );\n }\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f4f4f4;\n}\nul {\n list-style-type: none;\n padding: 0;\n}\nli {\n background-color: #f0f0f0;\n margin: 5px 0;\n padding: 5px;\n border-radius: 3px;\n}\n`;","deleted","label",[102],"permalink","https://www.val.town/x/ezg/math/code/main.tsx","extension","actionData","errors"]