From 57a69a8e9cb405f28f4f7e6bda5ec3e4f72f5f88 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sun, 26 May 2024 10:34:49 +0200
Subject: [PATCH] fix styling (heights were messed up)

---
 src/App.css                   | 103 +++++++++++++++++-----------------
 src/Components/Calculator.jsx |  38 ++++++-------
 2 files changed, 71 insertions(+), 70 deletions(-)

diff --git a/src/App.css b/src/App.css
index 275f441..608d682 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,3 @@
-
-
 *,
 *::before,
 *::after {
@@ -11,24 +9,26 @@
     src: url("DS-DIGIB.TTF");
 }
 
-html{
+html {
     font-size: 16px;
 }
 
-#calculator{
-    width:550px;
-    margin:auto;
-    background: rgb(68,64,64);
-background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100%);
+#calculator {
+    height: 800px;
+    width: 550px;
+    margin: auto;
+    background: rgb(68, 64, 64);
+    background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
     padding: 1rem;
     border-radius: 2rem;
 }
 
-#calculator-content{
+#calculator-content {
+    height: 100%;
     display: grid;
-    grid-template-columns: repeat(4,1fr);
-    grid-template-rows: 1fr 1.6fr repeat(5,1fr);
-    grid-template-areas: 
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
+    grid-template-areas:
         "header header header header"
         "display display display display"
         "functions functions functions operators"
@@ -36,32 +36,32 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
         "numbers numbers numbers operators"
         "numbers numbers numbers operators"
         "numbers numbers numbers operators"
-        ;
-    gap:1rem;
+    ;
+    gap: 1rem;
 }
 
 
-#calculator-content > header{
+#calculator-content>header {
     grid-area: header;
     align-self: center;
     font-family: 'Roboto', sans-serif;
-    
+
 }
 
-#calculator-content > header > h1{
+#calculator-content>header>h1 {
     font-size: 3rem;
-    margin:0.5rem auto;
+    margin: 0.5rem auto;
     color: aliceblue;
 
     opacity: 0.8;
 }
 
-#display-container{
+#display-container {
     grid-area: display;
     justify-self: end;
     align-self: end;
-    height:9rem;
-    width:100%;
+    height: 9rem;
+    width: 100%;
     display: grid;
     grid-template-rows: 1fr 6fr 1fr;
     grid-template-areas:
@@ -71,105 +71,106 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
     ;
 
 
-    background: linear-gradient(351deg, rgba(15,93,53,1) 0%, rgba(194,228,185,1) 100%);
-    font-family: 'VT323', monospace;    
+    background: linear-gradient(351deg, rgba(15, 93, 53, 1) 0%, rgba(194, 228, 185, 1) 100%);
+    font-family: 'VT323', monospace;
     font-size: 1rem;
     border-radius: 0.5rem;
-    padding:0.5rem;
+    padding: 0.5rem;
     box-shadow: 0.5rem 0.5rem 2rem inset;
 }
 
-.off{
+.off {
     filter: brightness(0.5);
 }
-.off > p{
+
+.off>p {
     display: none !important;
 }
 
-#display-container > p {
-    margin:auto 0;
+#display-container>p {
+    margin: auto 0;
     text-align: right;
     opacity: 0.8;
 }
 
-#display{
+#display {
     font-family: calculator;
-    font-size: 6rem;
+    font-size: 5rem;
     grid-area: main;
     align-self: center;
 
 }
 
-#memory{
+#memory {
     grid-area: memory;
     align-self: center;
-    
+
 }
 
-#operator{
+#operator {
     grid-area: operator;
     align-self: center;
-    
+
 }
 
 
 
 
 
-.num-pad{
+.num-pad {
     grid-area: numbers;
     display: grid;
-    grid-template-columns: repeat(3,1fr);
-    grid-template-rows: repeat(4,1fr);
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
     gap: 0.2rem;
 }
 
-.operator-pad{
+.operator-pad {
     grid-area: operators;
     display: grid;
-    grid-template-rows: repeat(3,1fr) 2fr;
+    grid-template-rows: repeat(3, 1fr) 2fr;
     gap: 0.2rem;
 }
 
-.function-pad{
+.function-pad {
     grid-area: functions;
     display: grid;
-    grid-template-columns: repeat(3,1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 0.2rem;
 }
 
 
 
-button{
-    background: linear-gradient(351deg, rgba(92,92,92,0.9) 0%, rgba(224,224,224,0.9) 100%);
+button {
+    background: linear-gradient(351deg, rgba(92, 92, 92, 0.9) 0%, rgba(224, 224, 224, 0.9) 100%);
     background-blend-mode: multiply;
-    
+
     font-size: 3rem;
     place-self: stretch;
     border-radius: 1.5rem;
 }
 
-.num-pad > button{
+.num-pad>button {
     background-color: lightblue;
 
 }
 
-.operator-pad > button{
+.operator-pad>button {
     font-size: 3.5em;
 }
 
-.function-pad > button{
+.function-pad>button {
     font-size: 2em;
 }
 
-#off{
+#off {
     background-color: #FF9B9B;
 }
 
-#on{
+#on {
     background-color: #CBFFA9;
 }
 
-#clear{
+#clear {
     background-color: #FFD6A5;
-}
\ No newline at end of file
+}
diff --git a/src/Components/Calculator.jsx b/src/Components/Calculator.jsx
index 2728db6..6f9ffb1 100644
--- a/src/Components/Calculator.jsx
+++ b/src/Components/Calculator.jsx
@@ -18,56 +18,56 @@ export default function Calculator(props) {
       }
     },
 
-    zero: function () {
+    zero: function() {
       this.conc("0");
     },
-    one: function () {
+    one: function() {
       this.conc("1");
     },
-    two: function () {
+    two: function() {
       this.conc("2");
     },
-    three: function () {
+    three: function() {
       this.conc("3");
     },
-    four: function () {
+    four: function() {
       this.conc("4");
     },
-    five: function () {
+    five: function() {
       this.conc("5");
     },
-    six: function () {
+    six: function() {
       this.conc("6");
     },
-    seven: function () {
+    seven: function() {
       this.conc("7");
     },
-    eight: function () {
+    eight: function() {
       this.conc("8");
     },
-    nine: function () {
+    nine: function() {
       this.conc("9");
     },
-    decimal: function () {
+    decimal: function() {
       if (!/\./g.test(main)) {
         this.conc(".");
       }
     },
 
-    add: function () {
+    add: function() {
       this.rcvOperator("add");
     },
-    subtract: function () {
+    subtract: function() {
       this.rcvOperator("subtract");
     },
-    multiply: function () {
+    multiply: function() {
       this.rcvOperator("multiply");
     },
-    divide: function () {
+    divide: function() {
       this.rcvOperator("divide");
     },
 
-    rcvOperator: function (operator) {
+    rcvOperator: function(operator) {
       if (main === "-") {
         setMain("");
       } else if (main !== "") {
@@ -111,7 +111,7 @@ export default function Calculator(props) {
       setMemory("");
       setOperation("");
     },
-    equals: function () {
+    equals: function() {
       if (operation !== "" && main !== "") {
         setMain((prev) => {
           return this.calculate(prev, memory);
@@ -127,7 +127,7 @@ export default function Calculator(props) {
       setMemory("");
       setOperation("");
     },
-    calculate: function (a, b) {
+    calculate: function(a, b) {
       const string = this.operations[operation](
         parseFloat(a),
         parseFloat(b),
@@ -144,7 +144,7 @@ export default function Calculator(props) {
     <div id="calculator">
       <div id="calculator-content">
         <header>
-          <h1>CALCULATOR - CI/CD EDITION</h1>
+          <h1>CALCULATOR</h1>
         </header>
         <div id="display-container" className={on ? "on" : "off"}>
           <p id="memory">{memory}</p>