better calc

jptafe · Dec 17, 2020 · 59e48f6 · 59e48f6
1 parent 2308174
commit 59e48f6
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 97 deletions.
diff --git a/css.css b/css.css
diff --git a/index.html b/index.html
@@ -1,39 +1,39 @@
-<html>
-    <head>
-        <link type="text/css" rel="stylesheet" href="css.css">
-        <script src="js.js"></script>
-    </head>
-    <body>
-        <div class="calculator">
-            <div class="row"> 
-                <input type="text" name="outscreen" size="10" id="outscreen" disabled> 
-                <input type="hidden" name="calctype" id="calctype"> 
-                <input type="hidden" name="secondval" id="secondval">
-            </div> 
-            <div class="row"> 
-                <div class="button" onClick="btnPress(7)"><span>7</span></div>
-                <div class="button" onClick="btnPress(8)"><span>8</span></div>
-                <div class="button" onClick="btnPress(9)"><span>9</span></div>
-                <div class="button" onClick="calcType('-')">-</div>
-            </div> 
-            <div class="row"> 
-                <div class="button" onClick="btnPress(4)"><span>4</span></div>
-                <div class="button" onClick="btnPress(5)"><span>5</span></div>
-                <div class="button" onClick="btnPress(6)"><span>6</span></div>
-                <div class="button" onClick="calcType('+')">+</div>
-            </div> 
-            <div class="row"> 
-                <div class="button" onClick="btnPress(1)"><span>1</span></div>
-                <div class="button" onClick="btnPress(2)"><span>2</span></div>
-                <div class="button" onClick="btnPress(3)"><span>3</span></div>
-                <div class="button" onClick="calcType('*')">*</div>
-            </div> 
-            <div class="row"> 
-                <div class="button" onClick="btnPress(0)"><span>0</span></div>
-                <div class="button">.</div>
-                <div class="button" onClick="doCalc()"><span>=</span></div>
-                <div class="button" onClick="calcType('/')">/</div>
-            </div> 
-        </div>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="js.js"></script>
+</head>
+<body>
+    <div id="screen">0</div>
+    <div class="calc">
+        <div class="row">
+            <div class="button" onclick="addNum(9)">9</div>
+            <div class="button" onclick="addNum(8)">8</div>
+            <div class="button" onclick="addNum(7)">7</div>
+            <div class="button" onclick="operateNum('*')">*</div>
+        </div>        
+        <div class="row">
+            <div class="button" onclick="addNum(6)">6</div>
+            <div class="button" onclick="addNum(5)">5</div>
+            <div class="button" onclick="addNum(4)">4</div>
+            <div class="button" onclick="operateNum('/')">/</div>  </div>    
+        <div class="row">
+            <div class="button" onclick="addNum(3)">3</div>
+            <div class="button" onclick="addNum(2)">2</div>
+            <div class="button" onclick="addNum(1)">1</div>
+            <div class="button" onclick="operateNum('+')">+</div>
+        </div>        
+        <div class="row">
+            <div class="button"  onclick="addNum(0)">0</div>
+            <div class="button" onclick="mkDec()">.</div>
+            <div class="button" onclick="calcNum()">=</div>
+            <div class="button" onclick="operateNum('-')">-</div>
+        </div>  
+    </div>
+</body>
 </html>
diff --git a/js.js b/js.js
@@ -1,30 +1,48 @@
-function btnPress(keyVal) {
-    var numberToShow = outscreen.value;
-    numberToShow = (numberToShow * 10) + keyVal;
-    outscreen.value = numberToShow;
-}
+var num1 = 0;
+var num2 = 0;
+var opNum = '';
+var makeDec = 0;
 
-function doCalc() {
-    var newVal;
-    if(calctype.value == '+') {
-        newVal = Number(secondval.value) + Number(outscreen.value);
+function addNum(btnPress) {
+    if(makeDec == 0) {
+        num1 = num1 * 10 + btnPress;
+    } else {
+        num1 = num1 + (btnPress / makeDec);
+        makeDec = makeDec * 10;
     }
-    if(calctype.value == '-') {
-        newVal = secondval.value - outscreen.value;
+    document.getElementById('screen').innerHTML = num1;
+    console.log(num1);
+}
+function mkDec() {
+    if(makeDec == 0) {
+        makeDec = 10;
+    } else {
+        makeDec = makeDec * 10;
     }
-    if(calctype.value == '*') {
-        newVal = secondval.value * outscreen.value;
+}
+function operateNum(operator) {
+    opNum = operator;
+    num2 = num1;
+    num1 = 0;
+    makeDec = 0;
+}
+function calcNum() {
+    var outNum = 0;
+    if(opNum == '+') {
+        outNum = num2 + num1;
     }
-    if(calctype.value == '/') {
-        newVal = secondval.value / outscreen.value;
+    if(opNum == '-') {
+        outNum = num2 - num1;
     }
-    secondval = 0;
-    calctype.value = 0;
-    outscreen.value = newVal;
+    if(opNum == '*') {
+        outNum = num2 * num1;
+    }
+    if(opNum == '/') {
+        outNum = num2 / num1;
+    }
+    document.getElementById('screen').innerHTML = outNum;
+    num1 = outNum;
+    num2 = 0;
+    makeDec = 0;
 }
 
-function calcType(keyVal) {
-    calctype.value = keyVal;
-    secondval.value = outscreen.value;
-    outscreen.value = '';
-}
diff --git a/style.css b/style.css
@@ -0,0 +1,27 @@
+* {
+    border: salmon solid 1px;
+    box-sizing: border-box;
+}
+.calc {
+    display: table;
+    background-color: gray;
+    padding: .1em;
+    width: 13em;
+}
+.row {
+    display: table-row;
+}
+#screen {
+    width: 13em;
+    text-align: right;
+}
+.button {
+    display: table-cell;
+    width: 3em;
+    height: 3em;
+    margin: .1em;
+    padding:1em;
+}
+.button:active {
+    background: rebeccapurple;
+}