solver

examples/module1/lesson1/solver/App.tsx

@@ -1,58 +1,52 @@
 import React, { useState } from 'react';
-import { f1, f2, f3, f4 } from './functions';
+import { recalculate } from './functions';
 
 const App = () => {
-  const [numA, setNumA] = useState<number>(0);
-  const [numB, setNumB] = useState<number>(0);
-  const [numC, setNumC] = useState<number | string>(0);
+  const [firstNumberValue, setFirstNumberValue] = useState<number>(0);
+  const [secondNumberValue, setSecondNumberValue] = useState<number>(0);
+  const [resultNumberValue, setResultNumberValue] = useState<number | string>(0);
 
-  const doWork = (func: (a: number, b: number) => number) => {
-    setNumC(func(numA, numB));
-  };
+  const setResult = (operation: string) => {
+    setResultNumberValue(recalculate(Number(firstNumberValue || 0), Number(secondNumberValue || 0), operation))
+  }
+
+  const operationButtons = [
+    { label: '+', onClick: () => setResult( 'addition') },
+    { label: '-', onClick: () => setResult( 'subtraction') },
+    { label: '*', onClick: () => setResult( 'multiplication') },
+    { label: '/', onClick: () => setResult( 'division') }
+  ];
 
   return (
     <div>
       <div className="grid grid-cols-2 gap-x-4">
         <input
           type="number"
           className="rounded-md shadow-md p-4"
-          value={numA}
-          onChange={(e) => setNumA(parseFloat(e.target.value))}
+          value={firstNumberValue}
+          onChange={(e) => setFirstNumberValue(parseFloat(e.target.value))}
         />
         <input
           type="number"
           className="rounded-md shadow-md p-4"
-          value={numB}
-          onChange={(e) => setNumB(parseFloat(e.target.value))}
+          value={secondNumberValue}
+          onChange={(e) => setSecondNumberValue(parseFloat(e.target.value))}
         />
       </div>
+
       <div className="grid grid-cols-4 gap-x-4 my-4">
-        <button
-          className="bg-blue-200 px-2 py-4 text-lg hover:bg-blue-500 hover:text-white rounded-md"
-          onClick={() => doWork(f1)}
-        >
-          +
-        </button>
-        <button
-          className="bg-blue-200 px-2 py-4 text-lg hover:bg-blue-500 hover:text-white rounded-md"
-          onClick={() => doWork(f2)}
-        >
-          -
-        </button>
-        <button
-          className="bg-blue-200 px-2 py-4 text-lg hover:bg-blue-500 hover:text-white rounded-md"
-          onClick={() => doWork(f3)}
-        >
-          *
-        </button>
-        <button
-          className="bg-blue-200 px-2 py-4 text-lg hover:bg-blue-500 hover:text-white rounded-md"
-          onClick={() => doWork(f4)}
-        >
-          /
-        </button>
+        {operationButtons.map((button, index) => (
+          <button
+            key={index}
+            className="bg-blue-200 px-2 py-4 text-lg hover:bg-blue-500 hover:text-white rounded-md"
+            onClick={button.onClick}
+          >
+            {button.label}
+          </button>
+        ))}
       </div>
-      <div>Result: {numC}</div>
+
+      <div>Result: {resultNumberValue}</div>
     </div>
   );
 };

examples/module1/lesson1/solver/functions.ts

@@ -1,13 +1,14 @@
-export function f1(a, b) {
-  return a + b;
-}
-export function f2(a, b) {
-  return a - b;
-}
-export function f3(a, b) {
-  return a * b;
-}
-
-export function f4(a, b) {
-  return a / b;
+export const recalculate = (a: number, b: number, operation: string) => {
+  switch (operation) {
+    case 'addition':
+      return a + b;
+    case 'subtraction':
+      return a - b;
+    case 'multiplication':
+      return a * b;
+    case 'division':
+      return a / b;
+    default:
+      return 0
+  }
 }