added layout for calculator

AirTechWick · Aug 24, 2021 · 39ff2f2 · 39ff2f2
1 parent df7f896
commit 39ff2f2
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -6,10 +6,38 @@
 </head>
 
 <body>
-<div id="housing">
-    <div id="display">
-        <div id="displayText"></div>
+<div id="pageWrapper">
+    <div id="housing">
+        <div id="display">
+            <div id="displayText">0</div>
+        </div>
+        <div id="buttonGroup">
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+            <div class="button"></div>
+        </div>
     </div>
-    <div id="buttons"></div>
 </div>
 </body>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,30 @@
+function start()
+{
+
+}
+
+function add(a,b)
+{
+    return a + b;
+}
+
+function subtract(a,b)
+{
+    return a - b;
+}
+
+function multiply(a,b)
+{
+    return a * b;    
+}
+
+function divide(a,b)
+{
+    if(b == 0)
+    {
+        window.alert("Nope, You can't do that!");
+        return;
+    }
+
+    return a / b;
+}
diff --git a/styles.css b/styles.css
@@ -1,7 +1,19 @@
+body {
+    margin: 0 auto;
+    width: 100%;
+    font-family: sans-serif;
+}
+
+#pageWrapper {
+    display: flex;
+    justify-content: center;
+}
+
 #housing {
+    margin-top: 100px;
     outline: solid red 2px;
     height: 500px;
-    width: 450px;
+    width: 400px;
     border-radius: 40px;
 }
 
@@ -12,3 +24,27 @@
     width: 100%;
     margin-top: 50px;
 }
+ #buttonGroup {
+    outline: solid orange 2px;
+    height: 75%;
+    width: 90%;
+    margin: 20px auto;
+ }
+
+.button {
+    display: inline-flex;
+    justify-content: center;
+    margin: 5px;
+    outline: solid purple 2px;
+    height: 50px;
+    width: 16%; /* can't put 20 will figure out why */
+    border-radius: 10px;
+}
+
+#displayText{
+    text-align: right;
+    padding-top: 40px;
+    padding-bottom: 30px;
+    padding-right: 40px;
+    font-size: 2em;
+}