added validation in user input

src/components/Buttons.js

@@ -2,13 +2,14 @@ import React from "react";
 import "./styles/Buttons.css";
 // import CALCULATOR_BUTTONS from "./CalculatorButtons";
 
-const Buttons = ({
-  inputHandler,
-  clearInput,
-  backspace,
-  changePlusMinus,
-  calculateAns,
-}) => {
+const Buttons = ({ inputHandler, clearInput, backspace, changePlusMinus, calculateAns }) => {
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      document.getElementById("equalbtn").click();
+    }
+  });
+
   return (
     <div className="show-btn">
       <button className="btn exp" onClick={inputHandler}>
@@ -95,7 +96,7 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         .
       </button>
-      <button className="btn exp equal" onClick={calculateAns}>
+      <button className="btn exp equal" id="equalbtn" onClick={calculateAns}>
         =
       </button>
     </div>

src/components/Display.js

@@ -2,13 +2,13 @@ import React from "react";
 import "./styles/Display.css";
 
 const Display = ({ input, setInput, answer }) => {
-  // const onChangeTagInput = (e) => {
-  //   // setInputVal(e.target.value.replace(/^[0-9 ()+-]+$/, "a"));
-  //   // if(e.target.value === "1")
-  //   setInput(e.target.value);
-  //   // console.log(e.target.value.test(/^[0-9 ()+-]+$/));
-  //   // console.log(e.target.value);
-  // };
+  const onChangeTagInput = (e) => {
+    const re = /^[!%(-+\x2D-9^glox\xF7\u221A]+$/;
+
+    if (e.target.value === "" || re.test(e.target.value)) {
+      setInput(e.target.value);
+    }
+  };
 
   return (
     <>
@@ -22,9 +22,10 @@ const Display = ({ input, setInput, answer }) => {
               style={{ padding: "29px" }}
               value={input}
               placeholder="0"
-              // onChange={onChangeTagInput}
               maxLength={12}
-              disabled
+              // disabled
+              onChange={onChangeTagInput}
+              autoComplete="off"
             />
           </>
         ) : (
@@ -43,7 +44,6 @@ const Display = ({ input, setInput, answer }) => {
               name="value"
               className="input"
               value={answer}
-              // onChange={onChangeTagInput}
               disabled
             />
           </>