Add Calculator styling

jambalong · Jun 2, 2024 · 9d8773a · 9d8773a
1 parent 6c4d5ff
commit 9d8773a
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -4,38 +4,46 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Calculator</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div id="main-container">
       <div id="calculator-body">
         <div id="display">0</div>
+
         <div id="keypad">
-          <div id="function-keys">
-            <button id="all-clear">AC</button>
-            <button id="sign">+/-</button>
-            <button id="percent">%</button>
+          <div id="left-keys">
+            <div id="function-keys">
+              <button id="all-clear">AC</button>
+              <button id="sign">+/-</button>
+              <button id="percent">%</button>
+            </div>
+            <div id="number-keys">
+              <button id="seven">7</button>
+              <button id="eight">8</button>
+              <button id="nine">9</button>
+              <button id="four">4</button>
+              <button id="five">5</button>
+              <button id="six">6</button>
+              <button id="one">1</button>
+              <button id="two">2</button>
+              <button id="three">3</button>
+              <button id="zero">0</button>
+              <button id="decimal">.</button>
+            </div>
           </div>
-          <div id="operator-keys">
-            <button id="divide">/</button>
-            <button id="multiply">*</button>
-            <button id="subtract">-</button>
-            <button id="add">+</button>
-            <button id="equal">=</button>
+
+          <div id="right-keys">
+            <div id="operator-keys">
+              <button id="divide">/</button>
+              <button id="multiply">*</button>
+              <button id="subtract">-</button>
+              <button id="add">+</button>
+              <button id="equal">=</button>
+            </div>
           </div>
-          <div id="number-keys"></div>
-          <button id="decimal">0</button>
-          <button id="zero">.</button>
-          <button id="one">1</button>
-          <button id="two">2</button>
-          <button id="three">3</button>
-          <button id="four">4</button>
-          <button id="five">5</button>
-          <button id="six">6</button>
-          <button id="seven">7</button>
-          <button id="eight">8</button>
-          <button id="nine">9</button>
-      </div>
+        </div>
+
     </div>
     <script src="script.js"></script>
   </body>

diff --git a/style.css b/style.css
@@ -1,4 +1,99 @@
 * {
   margin: 0;
   padding: 0;
+  font-family: "Digital-7", sans-serif;
+}
+
+body {
+  display: flex;
+  padding: 32px 12px;
+  background-color: #F4F1DE;
+}
+
+#main-container {
+  display: flex;
+  margin: auto;
+  height: 600px;
+  width: 400px;
+  border: 12px solid #3D405B;
+  border-radius: 6px;
+}
+
+#calculator-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: 1px solid black;
+}
+
+#display {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background-color: grey;
+  color: white;
+  font-size: 64px;
+  height: calc(600px / 6);
+  padding-right: 12px;
+  border: 2px solid black;
+}
+
+#keypad {
+  display: flex;
+  flex: 1;
+  background-color: black;
+}
+
+#left-keys {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+#right-keys {
+  display: flex;
+  flex: 1;
+}
+
+#function-keys {
+  display: flex;
+  flex: 1;
+}
+
+#function-keys button {
+  background-color: #F2CC8F;
+}
+
+#operator-keys {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#operator-keys button {
+  background-color: #e07b5f;
+}
+
+#number-keys {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+#number-keys button {
+  background-color: #81B29A;
+  flex-shrink: 0;
+}
+
+#zero {
+  min-width: 200px;
+}
+
+button {
+  min-width: 100px;
+  min-height: 100px;
+  flex: 1;
+  font-size: 36px;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }