From 03f6a7b8afc4cd51c08571a072e643379d1ba470 Mon Sep 17 00:00:00 2001
From: Andrzej Stepien <andrzejjamesstepien@gmail.com>
Date: Fri, 7 Jul 2023 20:42:27 +0200
Subject: [PATCH] styling

---
 src/App.css                  |  9 ++++++++-
 src/Components/Calculator.js | 10 +++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index 77596ac..43666ff 100644
--- a/src/App.css
+++ b/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;
diff --git a/src/Components/Calculator.js b/src/Components/Calculator.js
index d5d7c5d..d787d25 100644
--- a/src/Components/Calculator.js
+++ b/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>