Implement keyboard controls for the current version of calculator.

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useState, useEffect, useRef} from "react";
 
 import Wrapper from "./components/Wrapper";
 import Screen from "./components/Screen";
@@ -28,6 +28,15 @@ const App = () => {
     res: 0,
   });
 
+
+  const ref = useRef(0);
+
+  useEffect(() => {
+    ref.current.focus();
+  }, []);
+
+
+
   const numClickHandler = (e) => {
     e.preventDefault();
     const value = e.target.innerHTML;
@@ -121,36 +130,128 @@ const App = () => {
     });
   };
 
+  const onKeyPressed = (event) => {
+    console.log('User pressed: ', event.key);
+    if(event.key === '1' || event.key === '2' || event.key === '3' || event.key === '4' ||
+        event.key === '5' || event.key === '6' || event.key === '7' || event.key === '8' ||
+        event.key === '9' || event.key === '0'){
+        const value = event.key;
+        if (removeSpaces(calc.num).length < 16) {
+          setCalc({
+            ...calc,
+            num:
+              removeSpaces(calc.num) % 1 === 0 && !calc.num.toString().includes(".")
+                ? toLocaleString(Number(removeSpaces(calc.num + value)))
+                : toLocaleString(calc.num + value),
+            res: !calc.sign ? 0 : calc.res,
+          });
+        }
+      }
+      else if(event.key==='Backspace'){
+        setCalc({
+          ...calc,
+          sign: "",
+          num: 0,
+          res: 0,
+        });
+      }
+      else if(event.key==='I'){
+        setCalc({
+          ...calc,
+          num: calc.num ? toLocaleString(removeSpaces(calc.num) * -1) : 0,
+          res: calc.res ? toLocaleString(removeSpaces(calc.res) * -1) : 0,
+          sign: "",
+        });
+      }
+      else if(event.key==='%'){
+        let num = calc.num ? parseFloat(removeSpaces(calc.num)) : 0;
+        let res = calc.res ? parseFloat(removeSpaces(calc.res)) : 0;
+        setCalc({
+          ...calc,
+          num: (num /= Math.pow(100, 1)),
+          res: (res /= Math.pow(100, 1)),
+          sign: "",
+        });
+      }
+      else if(event.key === '/' || event.key === '+' || event.key === '-' || event.key==='*'){
+        setCalc({
+          ...calc,
+          sign: event.key === '*'? 'X' : event.key,
+          res: !calc.num
+            ? calc.res
+            : !calc.res
+            ? calc.num
+            : toLocaleString(
+                math(
+                  Number(removeSpaces(calc.res)),
+                  Number(removeSpaces(calc.num)),
+                  calc.sign
+                )
+              ),
+          num: 0,
+        });
+      }
+      else if(event.key === '.'){
+        const value = event.key;
+        setCalc({
+          ...calc,
+          num: !calc.num.toString().includes(".") ? calc.num + value : calc.num,
+        });
+      }
+      else if(event.key === 'Enter'){
+        if (calc.sign && calc.num) {
+          setCalc({
+            ...calc,
+            res:
+              calc.num === "0" && calc.sign === "/"
+                ? "Can't divide with 0"
+                : toLocaleString(
+                    math(
+                      Number(removeSpaces(calc.res)),
+                      Number(removeSpaces(calc.num)),
+                      calc.sign
+                    )
+                  ),
+            sign: "",
+            num: 0,
+          });
+        }
+      }
+  }
+
+
   return (
-    <Wrapper>
-      <Screen value={calc.num ? calc.num : calc.res} />
-      <ButtonBox>
-        {btnValues.flat().map((btn, i) => {
-          return (
-            <Button
-              key={i}
-              className={btn === "=" ? "equals" : ""}
-              value={btn}
-              onClick={
-                btn === "C"
-                  ? resetClickHandler
-                  : btn === "+-"
-                  ? invertClickHandler
-                  : btn === "%"
-                  ? percentClickHandler
-                  : btn === "="
-                  ? equalsClickHandler
-                  : btn === "/" || btn === "X" || btn === "-" || btn === "+"
-                  ? signClickHandler
-                  : btn === "."
-                  ? comaClickHandler
-                  : numClickHandler
-              }
-            />
-          );
-        })}
-      </ButtonBox>
-    </Wrapper>
+    <div ref={ref} tabIndex={0} onKeyDown={onKeyPressed}>
+      <Wrapper>
+        <Screen value={calc.num ? calc.num : calc.res}/>
+        <ButtonBox>
+          {btnValues.flat().map((btn, i) => {
+            return (
+              <Button
+                key={i}
+                className={btn === "=" ? "equals" : ""}
+                value={btn}
+                onClick={
+                  btn === "C"
+                    ? resetClickHandler
+                    : btn === "+-"
+                    ? invertClickHandler
+                    : btn === "%"
+                    ? percentClickHandler
+                    : btn === "="
+                    ? equalsClickHandler
+                    : btn === "/" || btn === "X" || btn === "-" || btn === "+"
+                    ? signClickHandler
+                    : btn === "."
+                    ? comaClickHandler
+                    : numClickHandler
+                }
+              />
+            );
+          })}
+        </ButtonBox>
+      </Wrapper>
+    </div>
   );
 };
 export default App;