Do the thing ;-)

advercalculator.client/src/App.css

@@ -6,11 +6,11 @@
 }
 
 tr:nth-child(even) {
-    background: #F2F2F2;
+/*    background: #F2F2F2;*/
 }
 
 tr:nth-child(odd) {
-    background: #FFF;
+/*    background: #FFF;*/
 }
 
 th, td {

advercalculator.client/src/App.tsx

@@ -1,56 +1,139 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import './App.css';
 
-interface Forecast {
-    date: string;
-    temperatureC: number;
-    temperatureF: number;
-    summary: string;
+const OOperator = {
+    Addition: "add",
+    Subtraction: "subtract",
+    Multiplication: "multiply",
+    Division: "divide",
+} as const;
+type Operator = typeof OOperator[keyof typeof OOperator];
+
+enum CalculatorState {
+    AFTER_EQUALS,
+    AFTER_OPERATOR,
+    AFTER_DIGIT,
 }
 
-function App() {
-    const [forecasts, setForecasts] = useState<Forecast[]>();
+interface Calculator {
+    readonly leftOperand: string;
+    readonly rightOperand: string;
+    readonly operator?: Operator;
+    readonly state: CalculatorState;
+}
 
-    useEffect(() => {
-        populateWeatherData();
-    }, []);
-
-    const contents = forecasts === undefined
-        ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
-        : <table className="table table-striped" aria-labelledby="tabelLabel">
-            <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Temp. (C)</th>
-                    <th>Temp. (F)</th>
-                    <th>Summary</th>
-                </tr>
-            </thead>
-            <tbody>
-                {forecasts.map(forecast =>
-                    <tr key={forecast.date}>
-                        <td>{forecast.date}</td>
-                        <td>{forecast.temperatureC}</td>
-                        <td>{forecast.temperatureF}</td>
-                        <td>{forecast.summary}</td>
-                    </tr>
-                )}
-            </tbody>
-        </table>;
-
-    return (
-        <div>
-            <h1 id="tabelLabel">Weather forecast</h1>
-            <p>This component demonstrates fetching data from the server.</p>
-            {contents}
-        </div>
-    );
-
-    async function populateWeatherData() {
-        const response = await fetch('weatherforecast');
-        const data = await response.json();
-        setForecasts(data);
+function makeCalculator(): Calculator {
+    return {
+        leftOperand: "0",
+        rightOperand: "0",
+        operator: undefined,
+        state: CalculatorState.AFTER_EQUALS
     }
 }
 
+async function evaluate(c: Calculator) {
+    if (c.operator === undefined) {
+        return c.rightOperand;
+    }
+
+    return await fetch(c.operator.toString() + "?" + new URLSearchParams({
+        left: c.leftOperand,
+        right: c.rightOperand,
+    })).then(r => r.text());
+}
+
+async function operator(c: Calculator, op: Operator): Promise<Calculator> {
+    switch (c.state) {
+        case CalculatorState.AFTER_EQUALS:
+        case CalculatorState.AFTER_OPERATOR:
+            return {
+                ...c,
+                leftOperand: c.rightOperand,
+                operator: op,
+                state: CalculatorState.AFTER_OPERATOR,
+            }
+        case CalculatorState.AFTER_DIGIT:
+            const result = await evaluate(c);
+            return {
+                ...c,
+                operator: op,
+                leftOperand: result,
+                state: CalculatorState.AFTER_OPERATOR,
+            }
+    }
+}
+
+async function digit(c: Calculator, digit: string): Promise<Calculator> {
+    switch (c.state) {
+        case CalculatorState.AFTER_EQUALS:
+        case CalculatorState.AFTER_OPERATOR:
+            return {
+                ...c,
+                leftOperand: c.rightOperand,
+                rightOperand: digit,
+                state: CalculatorState.AFTER_DIGIT,
+            }
+        case CalculatorState.AFTER_DIGIT:
+            return {
+                ...c,
+                rightOperand: c.rightOperand + digit,
+            }
+    }
+}
+
+async function equals(c: Calculator): Promise<Calculator> {
+    return {
+        ...c,
+        leftOperand: await evaluate(c),
+        state: CalculatorState.AFTER_EQUALS,
+    }
+}
+
+function App() {
+    const [calculator, setCalculator] = useState<Calculator>(makeCalculator());
+    const [uiEnabled, setUiEnabled] = useState<boolean>(true);
+
+    async function operatorClicked(op: Operator) {
+        setUiEnabled(false);
+        setCalculator(await operator(calculator, op));
+        setUiEnabled(true);
+    }
+
+    async function digitClicked(d: number) {
+        setUiEnabled(false);
+        setCalculator(await digit(calculator, d.toString()));
+        setUiEnabled(true);
+    }
+
+    async function equalsClicked() {
+        setUiEnabled(false);
+        setCalculator(await equals(calculator));
+        setUiEnabled(true);
+    }
+
+    return (
+        <div>
+            <div>{calculator.state == CalculatorState.AFTER_DIGIT ? calculator.rightOperand : calculator.leftOperand}</div>
+            <div>
+                <button disabled={!uiEnabled} onClick={() => operatorClicked(OOperator.Addition)}>+</button>
+                <button disabled={!uiEnabled} onClick={() => operatorClicked(OOperator.Subtraction)}>-</button>
+                <button disabled={!uiEnabled} onClick={() => operatorClicked(OOperator.Multiplication)}>*</button>
+                <button disabled={!uiEnabled} onClick={() => operatorClicked(OOperator.Division)}>/</button>
+                <button disabled={!uiEnabled} onClick={() => equalsClicked()}>=</button>
+            </div>
+            <div>{
+                    [1, 2, 3].map((r) => (
+                        <div key={r}>{
+                            [1, 2, 3].map((c) => (
+                                <button key={r * c} disabled={!uiEnabled} onClick={() => digitClicked(r * c)}>{r * c}</button>
+                            ))
+                        }</div>
+                    ))
+                
+            }</div>
+            <div> <button disabled={!uiEnabled} onClick={() => digitClicked(0)}>0</button></div>
+        </div>
+    );
+}
+
 export default App;

advercalculator.client/vite.config.ts

@@ -46,7 +46,7 @@ export default defineConfig({
     },
     server: {
         proxy: {
-            '^/weatherforecast': {
+            '^/(add|multiply|subtract|divide)': {
                 target: 'https://localhost:7102/',
                 secure: false
             }