From adf5215e1631f94d64624b295844b17585c2351a Mon Sep 17 00:00:00 2001
From: Andrzej Stepien <andrzejjamesstepien@gmail.com>
Date: Fri, 7 Jul 2023 23:11:53 +0200
Subject: [PATCH] stopped number from exceeding bounds of screen

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

diff --git a/src/App.css b/src/App.css
index 43666ff..275f441 100644
--- a/src/App.css
+++ b/src/App.css
@@ -43,6 +43,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
 
 #calculator-content > header{
     grid-area: header;
+    align-self: center;
     font-family: 'Roboto', sans-serif;
     
 }
@@ -88,7 +89,6 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
 #display-container > p {
     margin:auto 0;
     text-align: right;
-    line-height:1em;
     opacity: 0.8;
 }
 
@@ -141,11 +141,35 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
 
 
 button{
+    background: linear-gradient(351deg, rgba(92,92,92,0.9) 0%, rgba(224,224,224,0.9) 100%);
+    background-blend-mode: multiply;
     
-    background: rgb(92,92,92);
-background: linear-gradient(351deg, rgba(92,92,92,1) 0%, rgba(224,224,224,1) 100%);
-    font-size: 30px;
+    font-size: 3rem;
     place-self: stretch;
     border-radius: 1.5rem;
+}
 
+.num-pad > button{
+    background-color: lightblue;
+
+}
+
+.operator-pad > button{
+    font-size: 3.5em;
+}
+
+.function-pad > button{
+    font-size: 2em;
+}
+
+#off{
+    background-color: #FF9B9B;
+}
+
+#on{
+    background-color: #CBFFA9;
+}
+
+#clear{
+    background-color: #FFD6A5;
 }
\ No newline at end of file
diff --git a/src/Components/Calculator.js b/src/Components/Calculator.js
index d787d25..c2d61f4 100644
--- a/src/Components/Calculator.js
+++ b/src/Components/Calculator.js
@@ -9,12 +9,13 @@ export default function Calculator(props) {
 
     const map = {
         conc: (numberString) => {
-            if (main[0] === "0") {
-                setMain(prev => prev.slice(1) + numberString)
-            } else {
-                setMain(prev => prev + numberString)
+            if(main.length<=9){
+                if (main[0] === "0") {
+                    setMain(prev => prev.slice(1) + numberString)
+                } else {
+                    setMain(prev => prev + numberString)
+                }
             }
-
         },
 
         zero: function () { this.conc("0") },
@@ -92,7 +93,8 @@ export default function Calculator(props) {
             setOperation("")
         },
         calculate: function (a, b) {
-            return this.operations[operation](parseFloat(a), parseFloat(b)).toString()
+            const string = this.operations[operation](parseFloat(a), parseFloat(b)).toString()
+            return string.length<=9?string:string.slice(0,10)
         }
     }