🔧calcState Maxlength, 🎨css

hnaa0 · Jul 28, 2023 · c4cbb5b · c4cbb5b
1 parent bead60b
commit c4cbb5b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,6 +10,11 @@ ${reset}
 * {
   box-sizing: border-box;
 }
+
+body {
+  width: 100%;
+  height: 100vh;
+}
 `;
 
 function App() {
@@ -46,7 +51,8 @@ function App() {
   };
 
   const appendNum = (value) => {
-    if (
+    if (calcState.calcForm.length >= 20) return;
+    else if (
       (value === "0") &
       (calcState.calcForm.length === 0) &
       calcState.calcForm.charAt(calcState.calcForm.length - 1)
@@ -59,7 +65,8 @@ function App() {
   };
 
   const appendOperator = (value) => {
-    if (
+    if (calcState.calcForm.length >= 20) return;
+    else if (
       (calcState.calcForm === "") |
       isNaN(calcState.calcForm.charAt(calcState.calcForm.length - 1))
     ) {
@@ -70,6 +77,7 @@ function App() {
   };
 
   const appendPoint = (value) => {
+    if (calcState.calcForm.length >= 20) return;
     let updateform = calcState.calcForm + value;
     setCalcState({ calcForm: updateform });
   };
@@ -114,18 +122,34 @@ function App() {
   };
 
   return (
-    <>
+    <Container>
       <GlobalStyle />
-      <CalcResult form={calcState.calcForm} result={calcState.calcResult} />
-      <KeypadContainer>
-        <Keypad onClick={onClick} />
-      </KeypadContainer>
-    </>
+      <CalcContainer>
+        <CalcResult form={calcState.calcForm} result={calcState.calcResult} />
+        <KeypadContainer>
+          <Keypad onClick={onClick} />
+        </KeypadContainer>
+      </CalcContainer>
+    </Container>
   );
 }
 
 export default App;
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #ede4e0;
+`;
+
+const CalcContainer = styled.div`
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
+`;
+
 const KeypadContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);

diff --git a/src/components/CalcResult.jsx b/src/components/CalcResult.jsx
@@ -16,7 +16,7 @@ const ResultView = styled.div`
   align-items: flex-end;
   width: 350px;
   height: 100px;
-  padding: 12px 4px;
+  padding: 12px;
   background-color: #ecf2ff;
 `;