/** @jsxImportSource https://esm.sh/react@18.2.0 */ import * as math from "https://esm.sh/mathjs"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0"; /** * The main App component is rendered on the client. * Allows evaluating math expressions */ function App() { const [expression, setExpression] = useState(""); const [result, setResult] = useState(null); const [error, setError] = useState(null); const evaluateMathExpression = async () => { try { const response = await fetch(`/calculate?expr=${encodeURIComponent(expression)}`); const data = await response.json(); if (data.result !== undefined) { setResult(data.result); setError(null); } else { setResult(null); setError(data.error || "Unexpected error occurred"); } } catch (error) { console.error("Failed to evaluate expression", error); setResult(null); setError(error instanceof Error ? error.message : "Unknown error"); } }; return (

🧮 Math Expression Evaluator

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

{result !== null && (

Result: {result}

)} {error && (

Error: {error}

)}

Examples:

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

View Source

); } const styles = { container: { fontFamily: "system-ui, sans-serif", maxWidth: "500px", margin: "0 auto", padding: "20px", textAlign: "center", }, inputContainer: { display: "flex", justifyContent: "center", alignItems: "center", gap: "15px", marginBottom: "15px", }, input: { padding: "10px", width: "300px", borderRadius: "5px", border: "1px solid #ddd", }, button: { padding: "10px 15px", backgroundColor: "#007bff", color: "white", border: "none", borderRadius: "5px", cursor: "pointer", }, result: { marginTop: "20px", fontSize: "18px", fontWeight: "bold", color: "green", }, error: { marginTop: "20px", fontSize: "18px", fontWeight: "bold", color: "red", }, examples: { marginTop: "20px", color: "#666", }, sourceLink: { display: "block", marginTop: "20px", color: "#666", textDecoration: "none", }, }; /** * Client-only code * Renders the React application */ function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } /** * Server-side handler for evaluating math expressions using math.js */ export default async function server(request: Request): Promise { const url = new URL(request.url); const expression = url.searchParams.get("expr") || ""; try { // Explicitly use math.evaluate with a scope to handle more complex expressions const scope = { pi: Math.PI, e: Math.E, }; const result = math.evaluate(expression, scope); // Ensure the result is converted to a number const numericResult = Number(result); console.log("Evaluation successful:", { expression, result: numericResult }); return new Response(JSON.stringify({ result: numericResult }), { headers: { "Content-Type": "application/json", }, }); } catch (error) { console.error("Math evaluation error:", error); return new Response( JSON.stringify({ result: null, error: error instanceof Error ? error.message : "Invalid mathematical expression", }), { status: 400, headers: { "Content-Type": "application/json", }, }, ); } } const css = ` body { margin: 0; font-family: system-ui, sans-serif; background-color: #f4f4f4; } ul { list-style-type: none; padding: 0; } li { background-color: #f0f0f0; margin: 5px 0; padding: 5px; border-radius: 3px; } `;

ezg