styling

src/App.css

@@ -59,7 +59,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
     grid-area: display;
     justify-self: end;
     align-self: end;
-    height:100%;
+    height:9rem;
     width:100%;
     display: grid;
     grid-template-rows: 1fr 6fr 1fr;
@@ -78,6 +78,13 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
     box-shadow: 0.5rem 0.5rem 2rem inset;
 }
 
+.off{
+    filter: brightness(0.5);
+}
+.off > p{
+    display: none !important;
+}
+
 #display-container > p {
     margin:auto 0;
     text-align: right;

src/Components/Calculator.js

@@ -5,6 +5,7 @@ export default function Calculator(props) {
     const [main, setMain] = useState("0")
     const [memory, setMemory] = useState("")
     const [operation, setOperation] = useState("")
+    const [on, setOn] = useState(true)
 
     const map = {
         conc: (numberString) => {
@@ -83,6 +84,13 @@ export default function Calculator(props) {
             }
 
         },
+        on:()=>setOn(true),
+        off:()=>{
+            setOn(false)
+            setMain("0")
+            setMemory("")
+            setOperation("")
+        },
         calculate: function (a, b) {
             return this.operations[operation](parseFloat(a), parseFloat(b)).toString()
         }
@@ -97,7 +105,7 @@ export default function Calculator(props) {
         <div id="calculator">
             <div id="calculator-content">
                 <header><h1>CALCULATOR</h1></header>
-                <div id="display-container">
+                <div id="display-container" className={on?"on":"off"}>
                     <p id="memory">{memory}</p>
                     <p id="display">{main}</p>
                     <p id="operator">{operation}</p>