/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function ScientificCalculator() { const [display, setDisplay] = useState("0"); const [memory, setMemory] = useState(null); const scientificOperations = { sin: Math.sin, cos: Math.cos, tan: Math.tan, log: Math.log10, ln: Math.log, sqrt: Math.sqrt, pow: Math.pow, exp: Math.exp, π: () => Math.PI, "e": () => Math.E }; const handleNumberClick = (num) => { setDisplay(prev => prev === "0" ? num : prev + num ); }; const handleOperationClick = (op) => { try { if (scientificOperations[op]) { const result = scientificOperations[op](parseFloat(display)); setDisplay(result.toString()); } } catch (error) { setDisplay("Error"); } }; const calculateResult = () => { try { const result = eval(display); setDisplay(result.toString()); } catch (error) { setDisplay("Error"); } }; const clearDisplay = () => { setDisplay("0"); }; return (

{display}

{Object.keys(scientificOperations).map(op => ( ))}

{[7,8,9,4,5,6,1,2,3,0].map(num => ( ))}

); } function App() { return (

🧮 Scientific Calculator

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Scientific Calculator

`, { headers: { "content-type": "text/html" } }); } const css = ` body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color: #ecf0f1; } .app-container { background-color: rgba(44, 62, 80, 0.8); border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,0.2); padding: 30px; text-align: center; width: 380px; } h1 { color: #ecf0f1; margin-bottom: 20px; font-size: 2rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .calculator { background-color: rgba(236, 240, 241, 0.1); border-radius: 15px; padding: 20px; box-shadow: inset 0 5px 15px rgba(0,0,0,0.1); } .display { background-color: rgba(52, 152, 219, 0.2); border-radius: 10px; padding: 15px; text-align: right; font-size: 28px; margin-bottom: 15px; color: #ecf0f1; border: 2px solid rgba(52, 152, 219, 0.5); } .buttons { display: grid; gap: 10px; } .scientific-ops { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } .number-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .basic-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } button { background-color: rgba(52, 152, 219, 0.7); color: white; border: none; border-radius: 10px; padding: 12px; font-size: 18px; cursor: pointer; transition: all 0.3s ease; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .sci-btn { background-color: rgba(41, 128, 185, 0.7); font-size: 16px; } .num-btn { background-color: rgba(52, 152, 219, 0.5); } .op-btn { background-color: rgba(41, 128, 185, 0.6); } .eq-btn { background-color: #2ecc71; grid-column: span 2; } .clear-btn { background-color: #e74c3c; } button:hover { transform: scale(1.05); opacity: 0.9; box-shadow: 0 5px 15px rgba(0,0,0,0.2); } button:active { transform: scale(0.95); opacity: 0.8; } `;

Adool55