extra feature added

src/components/Buttons.js

@@ -5,6 +5,7 @@ import "./styles/Buttons.css";
 const Buttons = ({
   inputHandler,
   clearInput,
+  clearAnswer,
   backspace,
   changePlusMinus,
   calculateAns,
@@ -23,6 +24,9 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         √
       </button>
+      <button className="btn exp" onClick={inputHandler}>
+        x<sup>2</sup>
+      </button>
       <button className="btn clr" onClick={clearInput}>
         AC
       </button>
@@ -30,11 +34,14 @@ const Buttons = ({
         ⌫
       </button>
       <button className="btn exp" onClick={inputHandler}>
-        %
+        log
       </button>
       <button className="btn exp" onClick={inputHandler}>
         ÷
       </button>
+      <button className="btn exp" onClick={inputHandler}>
+        %
+      </button>
       <button className="btn" onClick={inputHandler}>
         7
       </button>
@@ -47,6 +54,9 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         x
       </button>
+      <button className="btn exp" onClick={inputHandler}>
+        x<sup>3</sup>
+      </button>
       <button className="btn" onClick={inputHandler}>
         4
       </button>
@@ -59,6 +69,9 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         -
       </button>
+      <button className="btn exp" onClick={inputHandler}>
+        <sup>3</sup>√
+      </button>
       <button className="btn" onClick={inputHandler}>
         1
       </button>
@@ -71,6 +84,9 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         +
       </button>
+      <button className="btn exp" onClick={inputHandler}>
+        !
+      </button>
       <button className="btn exp" onClick={changePlusMinus}>
         ±
       </button>
@@ -80,7 +96,7 @@ const Buttons = ({
       <button className="btn exp" onClick={inputHandler}>
         .
       </button>
-      <button className="btn exp" onClick={calculateAns}>
+      <button className="btn exp equal" onClick={calculateAns}>
         =
       </button>
     </div>

src/components/Calculator.js

@@ -12,6 +12,11 @@ function Calculator() {
   const inputHandler = (event) => {
     if (answer === "Invalid Input!!") return;
     let val = event.target.innerText;
+    if (val === "x2") val = "^2";
+    else if (val === "x3") val = "^3";
+    else if (val === "3√") val = "^(1÷3)";
+    else if (val === "log") val = "log(";
+
     let str = input + val;
     if (str.length > 14) return;
 
@@ -28,6 +33,11 @@ function Calculator() {
     setAnswer("");
   };
 
+  const clearAnswer = () => {
+    if (answer === "") setInput("");
+    setAnswer("");
+  };
+
   // check brackets are balanced or not
   const checkBracketBalanced = (expr) => {
     let stack = [];
@@ -131,6 +141,7 @@ function Calculator() {
           <Buttons
             inputHandler={inputHandler}
             clearInput={clearInput}
+            clearAnswer={clearAnswer}
             backspace={backspace}
             changePlusMinus={changePlusMinus}
             calculateAns={calculateAns}

src/components/styles/Buttons.css

@@ -1,14 +1,19 @@
 .show-btn {
   display: grid;
-  grid-template-columns: auto auto auto auto;
+  grid-template-columns: auto auto auto auto auto;
   background-color: white;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
 
+.equal {
+  grid-column-start: 4;
+  grid-column-end: 6;
+}
+
 .btn {
-  width: 80px;
-  height: 80px;
+  width: 60px;
+  height: 60px;
   margin: 6px auto;
   font-size: 24px;
   font-weight: 500;
@@ -21,8 +26,9 @@
 .btn:last-child {
   font-weight: medium;
   font-size: 40px;
-  width: 65px;
-  height: 65px;
+  width: 110px;
+  height: 50px;
+  border-radius: 10px;
   color: white;
   background-color: #6dd5ed;
 }