minor UI changes

nyakove · Nov 22, 2018 · e5dab0c · e5dab0c
1 parent fd4bf15
commit e5dab0c
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 112 deletions.
diff --git a/calc.html b/calc.html
@@ -4,7 +4,7 @@
 <head>
     <title>CalcJS</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, maximum-scale=1.0, user-scalable=no">
     <link rel='stylesheet' href="calcstyle.css">
     <link rel="shortcut icon" href="icon.png">
 </head>

diff --git a/calcscript.js b/calcscript.js
@@ -1,133 +1,132 @@
 function clickInput(event) {
-	if (/[div]/.test(event.target.innerHTML)) 
-		return;
-	if ('+-/*.'.indexOf(event.target.innerHTML) > -1 && '+-/*.'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
-		del();
-	}
-	if (document.getElementsByTagName('input')[0].value == '' && '+-/*.'.indexOf(event.target.innerHTML) > -1) {
-		return;
-	}
-	if (document.getElementsByTagName('input')[0].value.length == 1 && document.getElementsByTagName('input')[0].value.slice(-1) == '0' && '123456789'.indexOf(this.innerHTML) > -1) {
-		del();
-	}
-	if (document.getElementsByTagName('input')[0].value == 'Error!') {
-		clear();
-	}
-	if (event.target.innerHTML == 'C' || event.target.innerHTML == 'CL' || event.target.innerHTML == '=') {
-		return;
-	}
-	document.getElementsByTagName('input')[0].value += event.target.innerHTML;
+    if (/[div]/.test(event.target.innerHTML))
+        return;
+    if ('+-/*.'.indexOf(event.target.innerHTML) > -1 && '+-/*.'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
+        del();
+    }
+    if (document.getElementsByTagName('input')[0].value == '' && '+-/*.'.indexOf(event.target.innerHTML) > -1) {
+        return;
+    }
+    if (document.getElementsByTagName('input')[0].value.length == 1 && document.getElementsByTagName('input')[0].value.slice(-1) == '0' && '123456789'.indexOf(this.innerHTML) > -1) {
+        del();
+    }
+    if (document.getElementsByTagName('input')[0].value == 'Error!') {
+        clear();
+    }
+    if (event.target.innerHTML == 'C' || event.target.innerHTML == 'CL' || event.target.innerHTML == '=') {
+        return;
+    }
+    document.getElementsByTagName('input')[0].value += event.target.innerHTML;
 }
 
 function calculate() {
-	if (document.getElementsByTagName('input')[0].value.substring(0,1) == '0' && '+-*/'.indexOf(document.getElementsByTagName('input')[0].value.substring(1,2)) == -1) {
-		document.getElementsByTagName('input')[0].value = document.getElementsByTagName('input')[0].value.slice(1);
-		calculate();
-		}
-	if ('+-/*='.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
-		del();
-	}
-	if (document.getElementsByTagName('input')[0].value == '') 
-		return;
-	if (document.getElementsByTagName('input')[0].value == 'Error!') {
-		clear();
-		return;
-	}
-	try {
-		value = eval(document.getElementsByTagName('input')[0].value);
-	}
-	catch(err){
-		alert(err);
-	}
-	if (isNaN(value) || value == Infinity || value == -Infinity) {
-		value = 'Error!';
-		document.getElementsByTagName('input')[0].style.backgroundColor = '#F08080';
-	}
-	if (value.toString().indexOf('99999') > 0 && value.toString().indexOf('.')) {
-		value = value.toFixed(value.toString().indexOf('99999') - parseInt(value).toString().length - 1)
-	}
-	if (value.toString().indexOf('00000') > 0 && value.toString().indexOf('.')) {
-		value = value.toFixed(value.toString().indexOf('00000') - parseInt(value).toString().length - 1)
-	}
-	document.getElementsByTagName('input')[0].value = value;
+    if (document.getElementsByTagName('input')[0].value.substring(0, 1) == '0' && '+-*/'.indexOf(document.getElementsByTagName('input')[0].value.substring(1, 2)) == -1) {
+        document.getElementsByTagName('input')[0].value = document.getElementsByTagName('input')[0].value.slice(1);
+        calculate();
+    }
+    if ('+-/*='.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
+        del();
+    }
+    if (document.getElementsByTagName('input')[0].value == '')
+        return;
+    if (document.getElementsByTagName('input')[0].value == 'Error!') {
+        clear();
+        return;
+    }
+    try {
+        value = eval(document.getElementsByTagName('input')[0].value);
+    } catch (err) {
+        alert(err);
+    }
+    if (isNaN(value) || value == Infinity || value == -Infinity) {
+        value = 'Error!';
+        document.getElementsByTagName('input')[0].style.backgroundColor = '#F08080';
+    }
+    if (value.toString().indexOf('99999') > 0 && value.toString().indexOf('.')) {
+        value = value.toFixed(value.toString().indexOf('99999') - parseInt(value).toString().length - 1)
+    }
+    if (value.toString().indexOf('00000') > 0 && value.toString().indexOf('.')) {
+        value = value.toFixed(value.toString().indexOf('00000') - parseInt(value).toString().length - 1)
+    }
+    document.getElementsByTagName('input')[0].value = value;
 }
 
 function clear() {
-	document.getElementsByTagName('input')[0].value = '';
-	document.getElementsByTagName('input')[0].style.backgroundColor = '#B0E0E6';
+    document.getElementsByTagName('input')[0].value = '';
+    document.getElementsByTagName('input')[0].style.backgroundColor = '#B0E0E6';
 }
 
 function del() {
-	if (document.getElementsByTagName('input')[0].value.length == 0) 
-		return;
-	document.getElementsByTagName('input')[0].value = document.getElementsByTagName('input')[0].value.substring(0, document.getElementsByTagName('input')[0].value.length - 1)
+    if (document.getElementsByTagName('input')[0].value.length == 0)
+        return;
+    document.getElementsByTagName('input')[0].value = document.getElementsByTagName('input')[0].value.substring(0, document.getElementsByTagName('input')[0].value.length - 1)
 }
 
 function keyOps(event) {
-	if (event.key == '/') {
-		event.preventDefault();
-	}
-	if (event.key.length == 1 && /[0-9]/.test(event.key)) {
-		if (document.getElementsByTagName('input')[0].value == 'Error!')
-			clear();
-		document.getElementsByTagName('input')[0].value += event.key;
-	}
-	if ('+-/*.=()'.indexOf(event.key) > -1) {
-		if (document.getElementsByTagName('input')[0].value == '') {
-			return;	
-		}
-		if ('+-/*=().'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
-			del();
-		}
-		if (document.getElementsByTagName('input')[0].value == 'Error!') {
-			clear();
-		}
-		document.getElementsByTagName('input')[0].value += event.key;
-	}
-	if (event.key == 'Delete') {
-		clear();
-	}
-	if (event.key == 'Backspace') {
-		del();
-	}
-	if (event.key == 'Enter')
-		calculate();
-	if (event.key == ',') {
-		if (document.getElementsByTagName('input')[0].value == '') {
-			return;	
-		}
-		if ('+-/*=().'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
-			del();
-		}
-		if (document.getElementsByTagName('input')[0].value == 'Error!') {
-			clear();
-		}
-		document.getElementsByTagName('input')[0].value += '.';
-		}
+    if (event.key == '/') {
+        event.preventDefault();
+    }
+    if (event.key.length == 1 && /[0-9]/.test(event.key)) {
+        if (document.getElementsByTagName('input')[0].value == 'Error!')
+            clear();
+        document.getElementsByTagName('input')[0].value += event.key;
+    }
+    if ('+-/*.=()'.indexOf(event.key) > -1) {
+        if (document.getElementsByTagName('input')[0].value == '') {
+            return;
+        }
+        if ('+-/*=().'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
+            del();
+        }
+        if (document.getElementsByTagName('input')[0].value == 'Error!') {
+            clear();
+        }
+        document.getElementsByTagName('input')[0].value += event.key;
+    }
+    if (event.key == 'Delete') {
+        clear();
+    }
+    if (event.key == 'Backspace') {
+        del();
+    }
+    if (event.key == 'Enter')
+        calculate();
+    if (event.key == ',') {
+        if (document.getElementsByTagName('input')[0].value == '') {
+            return;
+        }
+        if ('+-/*=().'.indexOf(document.getElementsByTagName('input')[0].value.slice(-1)) > -1) {
+            del();
+        }
+        if (document.getElementsByTagName('input')[0].value == 'Error!') {
+            clear();
+        }
+        document.getElementsByTagName('input')[0].value += '.';
+    }
 }
 
 function keyOn(event) {
-	if (/[0-9]/.test(event.key) && event.key.length == 1) {
-		document.getElementById(event.key).style.backgroundColor = '#EEE8AA';
-	}
+    if (/[0-9]/.test(event.key) && event.key.length == 1) {
+        document.getElementById(event.key).style.backgroundColor = '#EEE8AA';
+    }
 }
 
 function keyOff(event) {
-	if (/[0-9]/.test(event.key) && event.key.length == 1) {
-		document.getElementById(event.key).style.backgroundColor = '#FFFFE0';
-	}
- }
+    if (/[0-9]/.test(event.key) && event.key.length == 1) {
+        document.getElementById(event.key).style.backgroundColor = '#FFFFE0';
+    }
+}
 
 function clickOn(event) {
-	if (/[div]/.test(event.target.innerHTML)) 
-		return;
-	event.target.style.backgroundColor = '#EEE8AA';
+    if (/[div]/.test(event.target.innerHTML))
+        return;
+    event.target.style.backgroundColor = '#EEE8AA';
 }
 
 function clickOff(event) {
-	if (/[div]/.test(event.target.innerHTML)) 
-		return;
-	event.target.style.backgroundColor = '#FFFFE0';
+    if (/[div]/.test(event.target.innerHTML))
+        return;
+    event.target.style.backgroundColor = '#FFFFE0';
 }
 
 document.getElementById('keys').addEventListener('click', clickInput);
@@ -138,4 +137,4 @@ document.addEventListener('keyup', keyOff);
 document.addEventListener('keydown', keyOps);
 document.getElementById('result').addEventListener('click', calculate);
 document.getElementById('clear').addEventListener('click', clear);
-document.getElementById('del').addEventListener('click', del);
+document.getElementById('del').addEventListener('click', del);
diff --git a/calcstyle.css b/calcstyle.css
@@ -99,7 +99,7 @@ input {
         display: flex;
         align-items: center;
         justify-content: center;
-        padding: 3vh 2vw;
+        padding: 2vh 2vw 2vh 2vw;
     }
 
     input {
@@ -108,13 +108,15 @@ input {
         border: 1px solid #cbcbcb;
         font-size: 8vh;
         padding: 0 1vw;
+        margin: 0;
     }
 
     #keys {
-        height: 80vh;
+        min-height: 82vh;
+        height: auto;
         display: flex;
         align-items: center;
-        justify-content: space-around;
+        justify-content: space-evenly;
         flex-direction: column;
     }
 
@@ -134,7 +136,8 @@ input {
     }
 
     .digit {
-        display: inline-block;
+        display: flex;
+        justify-content: center;
         height: calc(80vh/6 - 2vw);
         line-height: calc(80vh/6 - 2vw);
         width: calc(92vw / 3);
@@ -143,5 +146,6 @@ input {
         margin: 0;
         align-self: center;
         vertical-align: middle;
+        color: #000;
     }
 }