Complete Calculator App

Author: DevHanza

06. Calculator/src/Calculator.jsx

@@ -1,7 +1,47 @@
+import { useState } from "react";
+
 function Calculator() {
+  const [inputValue, setInputValue] = useState("");
+
+  const display = (value) => setInputValue(inputValue + value);
+
+  // I know, eval() is not recommended in production. 
+  const calculate = () => setInputValue(eval(inputValue));
+  const clear = () => setInputValue("");
+
+
+  return (
+    <form className="calculator" name="calc">
+      <input type="text" className="value" value={inputValue} />
+
+      <span className="num clear" onClick={() => clear()}>
+        C
+      </span>
+
+      <span onClick={() => display("/")}>/</span>
+      <span onClick={() => display("*")}>*</span>
+      <span onClick={() => display("7")}>7</span>
+      <span onClick={() => display("8")}>8</span>
+      <span onClick={() => display("9")}>9</span>
+      <span onClick={() => display("-")}>-</span>
+      <span onClick={() => display("4")}>4</span>
+      <span onClick={() => display("5")}>5</span>
+      <span onClick={() => display("6")}>6</span>
+      <span className="plus" onClick={() => display("+")}>
+        +
+      </span>
 
-    
-  return <div>Calculator</div>;
+      <span onClick={() => display("1")}>1</span>
+      <span onClick={() => display("2")}>2</span>
+      <span onClick={() => display("3")}>3</span>
+      <span onClick={() => display("0")}>0</span>
+      <span onClick={() => display("0")}>00</span>
+      <span onClick={() => display(".")}>.</span>
+      <span className="num equal" onClick={() => calculate()}>
+        =
+      </span>
+    </form>
+  );
 }
 
 export default Calculator;

06. Calculator/src/index.css

@@ -0,0 +1,61 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: sans-serif;
+  }
+  
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #1b1b1b;
+  }
+  
+  .calculator {
+    position: relative;
+    display: grid;
+  }
+  
+  .calculator .value {
+    grid-column: span 4;
+    height: 100px;
+    text-align: right;
+    border: none;
+    outline: none;
+    padding: 10px;
+    font-size: 18px;
+  }
+  
+  .calculator span {
+    display: grid;
+    width: 60px;
+    height: 60px;
+    background: #292929;
+    place-items: center;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: #fff;
+  }
+  
+  .calculator span:active {
+    background: rgb(255, 163, 26);
+    color: #fff;
+  }
+  
+  .calculator span.clear {
+    grid-column: span 2;
+    width: 120px;
+    background: rgb(255, 163, 26);
+    /* color: #fff; */
+  }
+  
+  .calculator span.plus {
+    grid-row: span 2;
+    height: 120px;
+  }
+  
+  .calculator span.equal {
+    background: rgb(255, 163, 26);
+    /* background: #03b1ff; */
+  }