Shortened keypad code by a lot

AyaanDanish · Jul 26, 2023 · 9ea40be · 9ea40be
1 parent c72e5e7
commit 9ea40be
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 143 deletions.
diff --git a/src/components/Keypad.jsx b/src/components/Keypad.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 import { Box } from "@mui/material";
 import {
@@ -8,151 +7,72 @@ import {
 } from "./CustomButtons.jsx";
 
 const Keypad = ({ handleClick }) => {
+  const primaryButtonData = [
+    { label: "0", gridArea: "zero" },
+    { label: "1", gridArea: "one" },
+    { label: "2", gridArea: "two" },
+    { label: "3", gridArea: "three" },
+    { label: "4", gridArea: "four" },
+    { label: "5", gridArea: "five" },
+    { label: "6", gridArea: "six" },
+    { label: "7", gridArea: "seven" },
+    { label: "8", gridArea: "eight" },
+    { label: "9", gridArea: "nine" },
+    { label: ".", gridArea: "dot" },
+    { label: "⌫", gridArea: "del" },
+  ];
+
+  const secondaryButtonData = [
+    { label: "(", gridArea: "open" },
+    { label: ")", gridArea: "close" },
+    { label: "÷", gridArea: "div" },
+    { label: "×", gridArea: "mul" },
+    { label: "-", gridArea: "minus" },
+    { label: "+", gridArea: "plus" },
+  ];
+
+  const tertiaryButtonData = [
+    { label: "AC", gridArea: "ac" },
+    { label: "=", gridArea: "equals" },
+  ];
+
   return (
     <Box id="keypad">
       {/* Digits */}
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "seven" }}
-        onClick={handleClick}
-      >
-        7
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "eight" }}
-        onClick={handleClick}
-      >
-        8
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "nine" }}
-        onClick={handleClick}
-      >
-        9
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "four" }}
-        onClick={handleClick}
-      >
-        4
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "five" }}
-        onClick={handleClick}
-      >
-        5
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "six" }}
-        onClick={handleClick}
-      >
-        6
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "three" }}
-        onClick={handleClick}
-      >
-        3
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "two" }}
-        onClick={handleClick}
-      >
-        2
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "one" }}
-        onClick={handleClick}
-      >
-        1
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "zero" }}
-        onClick={handleClick}
-      >
-        0
-      </PrimaryButton>
+      {primaryButtonData.map((button) => (
+        <PrimaryButton
+          key={button.label}
+          variant="contained"
+          sx={{ gridArea: button.gridArea }}
+          onClick={handleClick}
+        >
+          {button.label}
+        </PrimaryButton>
+      ))}
 
       {/* Special Characters */}
-      <TertiaryButton
-        variant="contained"
-        sx={{ gridArea: "ac" }}
-        onClick={handleClick}
-      >
-        AC
-      </TertiaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "open" }}
-        onClick={handleClick}
-      >
-        {"("}
-      </SecondaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "close" }}
-        onClick={handleClick}
-      >
-        {")"}
-      </SecondaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "div" }}
-        onClick={handleClick}
-      >
-        ÷
-      </SecondaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "mul" }}
-        onClick={handleClick}
-      >
-        ×
-      </SecondaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "plus" }}
-        onClick={handleClick}
-      >
-        +
-      </SecondaryButton>
-      <SecondaryButton
-        variant="contained"
-        sx={{ gridArea: "minus" }}
-        onClick={handleClick}
-      >
-        -
-      </SecondaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "dot" }}
-        onClick={handleClick}
-      >
-        .
-      </PrimaryButton>
-      <PrimaryButton
-        variant="contained"
-        sx={{ gridArea: "del" }}
-        onClick={handleClick}
-      >
-        ⌫
-      </PrimaryButton>
-      <TertiaryButton
-        variant="contained"
-        sx={{ gridArea: "equals" }}
-        onClick={handleClick}
-      >
-        =
-      </TertiaryButton>
+      {secondaryButtonData.map((button) => (
+        <SecondaryButton
+          key={button.label}
+          variant="contained"
+          sx={{ gridArea: button.gridArea }}
+          onClick={handleClick}
+        >
+          {button.label}
+        </SecondaryButton>
+      ))}
+
+      {/* AC and Equals */}
+      {tertiaryButtonData.map((button) => (
+        <TertiaryButton
+          key={button.label}
+          variant="contained"
+          sx={{ gridArea: button.gridArea }}
+          onClick={handleClick}
+        >
+          {button.label}
+        </TertiaryButton>
+      ))}
     </Box>
   );
 };

diff --git a/src/index.css b/src/index.css
@@ -22,6 +22,18 @@ body {
   border-radius: 25px 25px 0 0;
   box-sizing: border-box;
   padding: 10px;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+}
+
+::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 0.25em;
 }
 
 #output-text {
@@ -39,8 +51,8 @@ body {
     "ac open close div"
     "seven eight nine mul"
     "four five six minus"
-    "three two one plus"
-    "zero dot del equals";
+    "one two three plus"
+    "dot zero del equals";
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   gap: 10px;