/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [inputNum, sqrtNum, message] = quickMath(); const canvasRef = sqrtNum ? showMath(inputNum, sqrtNum) : null; return (

What number do you want to square root?

{message}

); } function quickMath() { const url = new URL(window.location.href); const inputNum = url.searchParams.get("inputNum"); if (!inputNum) { return [null, null, null]; } const sqrtNum = Math.sqrt(Number(inputNum)); const result = (!isNaN(sqrtNum)) ? "The square root of " + inputNum + " is " + sqrtNum.toString() : "There was an an error getting the square root, please try another number!"; return [inputNum, sqrtNum, result]; } function showMath(inputNum, sqrtNum) { const canvasRef = useRef(null); useEffect(() => { // Create canvas const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500; // Background color ctx.fillStyle = "#dedede"; ctx.fillRect(50, 50, 400, 400); // TODO: draw lines to demonstrate square root idea drawLine(ctx, 50, 50, 200, 50); }, []); return canvasRef; } function drawLine(ctx, startX, startY, endX, endY) { ctx.beginPath(); ctx.moveTo(startX, startY); ctx.lineTo(endX, endY); ctx.stroke(); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } function server(req: Request): Promise { return new Response( ` square root

`, { headers: { "Content-Type": "text/html" }, }, ); } const CSS = ` body { text-align: center; font-family: cursive; margin-top: 50px; } input { font-size:30px; font-family: cursive; margin-top: 20px; } `; export default server;

squareroot