/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=51"; import { sillyCSS } from "https://esm.town/v/gueejla/sillyCSS"; function App() { // Calculate square root from url parameter "inputNum" const [inputNum, sqrtNum, message] = quickMath(); // Draw image demonstrating square root value using area of a square const canvasRef = sqrtNum ? showMath(inputNum, sqrtNum) : null; // Render website with React return (

What number do you want to square root?

{message}

); } function quickMath() { const url = new URL(window.location.href); let inputNum = url.searchParams.get("inputNum"); if (inputNum === null || inputNum === "") { return [null, null, null]; } else { inputNum = Number(inputNum); } const sqrtNum = Math.sqrt(inputNum); const result = (!isNaN(sqrtNum)) ? "The square root of " + inputNum.toString() + " 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(() => { const imageMaxSize = 400; // Get increment between each line in pixels const lineIncrement = Math.floor(imageMaxSize / sqrtNum); // Get width/height of image in pixels so it is a multiple of square root const imageSize = Math.floor(lineIncrement * sqrtNum); // Create canvas const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); canvas.width = imageSize; canvas.height = imageSize; // Background color ctx.fillStyle = "#dedede"; ctx.fillRect(0, 0, imageSize, imageSize); // Draw horizontal lines for (let i = 0; i <= imageSize; i += lineIncrement) { drawLine(ctx, 0, i, imageSize, i); } // Draw vertical lines for (let i = 0; i <= imageSize; i += lineIncrement) { drawLine(ctx, i, 0, i, imageSize); } // Draw end lines if it isn't a whole square root number if (!Number.isInteger(sqrtNum)) { drawLine(ctx, 0, imageSize, imageSize, imageSize); drawLine(ctx, imageSize, 0, imageSize, imageSize); } }, []); 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" }, }, ); } export default server;

squareroot

Version 5